@link-loom/cloud-sdk 1.0.1

package/dist/cloud-sdk.cjs.cjs

@@ -0,0 +1,4977 @@
+'use strict';
+
+var axios = require('axios');
+var React$1 = require('react');
+var styles = require('@mui/material/styles');
+var Box = require('@mui/material/Box');
+var Typography = require('@mui/material/Typography');
+var CircularProgress = require('@mui/material/CircularProgress');
+var client = require('react-dom/client');
+var Button = require('@mui/material/Button');
+var IconButton = require('@mui/material/IconButton');
+var Chip = require('@mui/material/Chip');
+var SaveIcon = require('@mui/icons-material/Save');
+var BuildIcon = require('@mui/icons-material/Build');
+var PublishIcon = require('@mui/icons-material/Publish');
+var PlayArrowIcon = require('@mui/icons-material/PlayArrow');
+var VisibilityIcon = require('@mui/icons-material/Visibility');
+var ViewSidebarIcon = require('@mui/icons-material/ViewSidebar');
+var ArrowBackIcon = require('@mui/icons-material/ArrowBack');
+var FolderIcon = require('@mui/icons-material/Folder');
+var FolderOpenIcon = require('@mui/icons-material/FolderOpen');
+var InsertDriveFileIcon = require('@mui/icons-material/InsertDriveFile');
+var NoteAddIcon = require('@mui/icons-material/NoteAdd');
+var CreateNewFolderIcon = require('@mui/icons-material/CreateNewFolder');
+var ExpandMoreIcon = require('@mui/icons-material/ExpandMore');
+var ChevronRightIcon = require('@mui/icons-material/ChevronRight');
+var Tabs = require('@mui/material/Tabs');
+var Tab = require('@mui/material/Tab');
+var CloseIcon = require('@mui/icons-material/Close');
+var Editor = require('@monaco-editor/react');
+var TextField = require('@mui/material/TextField');
+var Switch = require('@mui/material/Switch');
+var Select = require('@mui/material/Select');
+var MenuItem = require('@mui/material/MenuItem');
+var ChevronLeftIcon = require('@mui/icons-material/ChevronLeft');
+var KeyboardArrowDownIcon = require('@mui/icons-material/KeyboardArrowDown');
+var KeyboardArrowUpIcon = require('@mui/icons-material/KeyboardArrowUp');
+var InputAdornment = require('@mui/material/InputAdornment');
+var SearchIcon = require('@mui/icons-material/Search');
+var AddIcon = require('@mui/icons-material/Add');
+var MoreVertIcon = require('@mui/icons-material/MoreVert');
+var PushPinIcon = require('@mui/icons-material/PushPin');
+var StarIcon = require('@mui/icons-material/Star');
+var Menu = require('@mui/material/Menu');
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
+function _assertClassBrand(e, t, n) {
+  if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n;
+  throw new TypeError("Private element is not present on this object");
+}
+function _assertThisInitialized(e) {
+  if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  return e;
+}
+function asyncGeneratorStep(n, t, e, r, o, a, c) {
+  try {
+    var i = n[a](c),
+      u = i.value;
+  } catch (n) {
+    return void e(n);
+  }
+  i.done ? t(u) : Promise.resolve(u).then(r, o);
+}
+function _asyncToGenerator(n) {
+  return function () {
+    var t = this,
+      e = arguments;
+    return new Promise(function (r, o) {
+      var a = n.apply(t, e);
+      function _next(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
+      }
+      function _throw(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
+      }
+      _next(void 0);
+    });
+  };
+}
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
+function _checkPrivateRedeclaration(e, t) {
+  if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object");
+}
+function _classCallCheck(a, n) {
+  if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
+}
+function _classPrivateMethodInitSpec(e, a) {
+  _checkPrivateRedeclaration(e, a), a.add(e);
+}
+function _defineProperties(e, r) {
+  for (var t = 0; t < r.length; t++) {
+    var o = r[t];
+    o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, _toPropertyKey(o.key), o);
+  }
+}
+function _createClass(e, r, t) {
+  return r && _defineProperties(e.prototype, r), Object.defineProperty(e, "prototype", {
+    writable: false
+  }), e;
+}
+function _createForOfIteratorHelper(r, e) {
+  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (!t) {
+    if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) {
+      t && (r = t);
+      var n = 0,
+        F = function () {};
+      return {
+        s: F,
+        n: function () {
+          return n >= r.length ? {
+            done: true
+          } : {
+            done: false,
+            value: r[n++]
+          };
+        },
+        e: function (r) {
+          throw r;
+        },
+        f: F
+      };
+    }
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+  var o,
+    a = true,
+    u = false;
+  return {
+    s: function () {
+      t = t.call(r);
+    },
+    n: function () {
+      var r = t.next();
+      return a = r.done, r;
+    },
+    e: function (r) {
+      u = true, o = r;
+    },
+    f: function () {
+      try {
+        a || null == t.return || t.return();
+      } finally {
+        if (u) throw o;
+      }
+    }
+  };
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+function _get$1() {
+  return _get$1 = "undefined" != typeof Reflect && Reflect.get ? Reflect.get.bind() : function (e, t, r) {
+    var p = _superPropBase(e, t);
+    if (p) {
+      var n = Object.getOwnPropertyDescriptor(p, t);
+      return n.get ? n.get.call(arguments.length < 3 ? e : r) : n.value;
+    }
+  }, _get$1.apply(null, arguments);
+}
+function _getPrototypeOf(t) {
+  return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
+    return t.__proto__ || Object.getPrototypeOf(t);
+  }, _getPrototypeOf(t);
+}
+function _inherits(t, e) {
+  if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
+  t.prototype = Object.create(e && e.prototype, {
+    constructor: {
+      value: t,
+      writable: true,
+      configurable: true
+    }
+  }), Object.defineProperty(t, "prototype", {
+    writable: false
+  }), e && _setPrototypeOf(t, e);
+}
+function _isNativeReflectConstruct() {
+  try {
+    var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+  } catch (t) {}
+  return (_isNativeReflectConstruct = function () {
+    return !!t;
+  })();
+}
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = true,
+      o = false;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = true, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _possibleConstructorReturn(t, e) {
+  if (e && ("object" == typeof e || "function" == typeof e)) return e;
+  if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined");
+  return _assertThisInitialized(t);
+}
+function _regenerator() {
+  /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
+  var e,
+    t,
+    r = "function" == typeof Symbol ? Symbol : {},
+    n = r.iterator || "@@iterator",
+    o = r.toStringTag || "@@toStringTag";
+  function i(r, n, o, i) {
+    var c = n && n.prototype instanceof Generator ? n : Generator,
+      u = Object.create(c.prototype);
+    return _regeneratorDefine(u, "_invoke", function (r, n, o) {
+      var i,
+        c,
+        u,
+        f = 0,
+        p = o || [],
+        y = false,
+        G = {
+          p: 0,
+          n: 0,
+          v: e,
+          a: d,
+          f: d.bind(e, 4),
+          d: function (t, r) {
+            return i = t, c = 0, u = e, G.n = r, a;
+          }
+        };
+      function d(r, n) {
+        for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) {
+          var o,
+            i = p[t],
+            d = G.p,
+            l = i[2];
+          r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
+        }
+        if (o || r > 1) return a;
+        throw y = true, n;
+      }
+      return function (o, p, l) {
+        if (f > 1) throw TypeError("Generator is already running");
+        for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) {
+          i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u);
+          try {
+            if (f = 2, i) {
+              if (c || (o = "next"), t = i[o]) {
+                if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
+                if (!t.done) return t;
+                u = t.value, c < 2 && (c = 0);
+              } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
+              i = e;
+            } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
+          } catch (t) {
+            i = e, c = 1, u = t;
+          } finally {
+            f = 1;
+          }
+        }
+        return {
+          value: t,
+          done: y
+        };
+      };
+    }(r, o, i), true), u;
+  }
+  var a = {};
+  function Generator() {}
+  function GeneratorFunction() {}
+  function GeneratorFunctionPrototype() {}
+  t = Object.getPrototypeOf;
+  var c = [][n] ? t(t([][n]())) : (_regeneratorDefine(t = {}, n, function () {
+      return this;
+    }), t),
+    u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c);
+  function f(e) {
+    return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e;
+  }
+  return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine(u), _regeneratorDefine(u, o, "Generator"), _regeneratorDefine(u, n, function () {
+    return this;
+  }), _regeneratorDefine(u, "toString", function () {
+    return "[object Generator]";
+  }), (_regenerator = function () {
+    return {
+      w: i,
+      m: f
+    };
+  })();
+}
+function _regeneratorDefine(e, r, n, t) {
+  var i = Object.defineProperty;
+  try {
+    i({}, "", {});
+  } catch (e) {
+    i = 0;
+  }
+  _regeneratorDefine = function (e, r, n, t) {
+    function o(r, n) {
+      _regeneratorDefine(e, r, function (e) {
+        return this._invoke(r, n, e);
+      });
+    }
+    r ? i ? i(e, r, {
+      value: n,
+      enumerable: !t,
+      configurable: !t,
+      writable: !t
+    }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
+  }, _regeneratorDefine(e, r, n, t);
+}
+function _setPrototypeOf(t, e) {
+  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
+    return t.__proto__ = e, t;
+  }, _setPrototypeOf(t, e);
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _superPropBase(t, o) {
+  for (; !{}.hasOwnProperty.call(t, o) && null !== (t = _getPrototypeOf(t)););
+  return t;
+}
+function _superPropGet(t, o, e, r) {
+  var p = _get$1(_getPrototypeOf(t.prototype ), o, e);
+  return 2 & r && "function" == typeof p ? function (t) {
+    return p.apply(e, t);
+  } : p;
+}
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+var _AppEngineClient_brand = /*#__PURE__*/new WeakSet();
+var AppEngineClient = /*#__PURE__*/function () {
+  function AppEngineClient(_ref) {
+    var baseUrl = _ref.baseUrl,
+      _ref$timeout = _ref.timeout,
+      timeout = _ref$timeout === void 0 ? 30000 : _ref$timeout;
+    _classCallCheck(this, AppEngineClient);
+    // ─── HTTP helpers ────────────────────────────────────────
+    _classPrivateMethodInitSpec(this, _AppEngineClient_brand);
+    if (!baseUrl) {
+      throw new Error('AppEngineClient requires a baseUrl');
+    }
+    this._baseUrl = baseUrl.replace(/\/$/, '');
+    this._http = axios.create({
+      baseURL: this._baseUrl,
+      timeout: timeout,
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+  }
+
+  // ─── App Definition ──────────────────────────────────────
+  return _createClass(AppEngineClient, [{
+    key: "getAppDefinition",
+    value: function () {
+      var _getAppDefinition = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(_ref2) {
+        var queryselector, search, page, pageSize, exclude_status, params;
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.n) {
+            case 0:
+              queryselector = _ref2.queryselector, search = _ref2.search, page = _ref2.page, pageSize = _ref2.pageSize, exclude_status = _ref2.exclude_status;
+              params = {
+                search: search,
+                page: page,
+                pageSize: pageSize,
+                exclude_status: exclude_status
+              };
+              return _context.a(2, _assertClassBrand(_AppEngineClient_brand, this, _get).call(this, "/app/definition/".concat(queryselector), params));
+          }
+        }, _callee, this);
+      }));
+      function getAppDefinition(_x) {
+        return _getAppDefinition.apply(this, arguments);
+      }
+      return getAppDefinition;
+    }()
+  }, {
+    key: "getAppsCatalog",
+    value: function () {
+      var _getAppsCatalog = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+        var _ref3,
+          owning_product,
+          page,
+          pageSize,
+          params,
+          _args2 = arguments;
+        return _regenerator().w(function (_context2) {
+          while (1) switch (_context2.n) {
+            case 0:
+              _ref3 = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : {}, owning_product = _ref3.owning_product, page = _ref3.page, pageSize = _ref3.pageSize;
+              params = {
+                owning_product: owning_product,
+                page: page,
+                pageSize: pageSize
+              };
+              return _context2.a(2, _assertClassBrand(_AppEngineClient_brand, this, _get).call(this, '/app/definition/catalog/', params));
+          }
+        }, _callee2, this);
+      }));
+      function getAppsCatalog() {
+        return _getAppsCatalog.apply(this, arguments);
+      }
+      return getAppsCatalog;
+    }()
+  }, {
+    key: "getFullApp",
+    value: function () {
+      var _getFullApp = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(_ref4) {
+        var slug;
+        return _regenerator().w(function (_context3) {
+          while (1) switch (_context3.n) {
+            case 0:
+              slug = _ref4.slug;
+              return _context3.a(2, _assertClassBrand(_AppEngineClient_brand, this, _get).call(this, '/app/definition/full/', {
+                slug: slug
+              }));
+          }
+        }, _callee3, this);
+      }));
+      function getFullApp(_x2) {
+        return _getFullApp.apply(this, arguments);
+      }
+      return getFullApp;
+    }()
+  }, {
+    key: "getStudioPayload",
+    value: function () {
+      var _getStudioPayload = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(_ref5) {
+        var search;
+        return _regenerator().w(function (_context4) {
+          while (1) switch (_context4.n) {
+            case 0:
+              search = _ref5.search;
+              return _context4.a(2, _assertClassBrand(_AppEngineClient_brand, this, _get).call(this, '/app/definition/studio/', {
+                search: search
+              }));
+          }
+        }, _callee4, this);
+      }));
+      function getStudioPayload(_x3) {
+        return _getStudioPayload.apply(this, arguments);
+      }
+      return getStudioPayload;
+    }()
+  }, {
+    key: "createAppDefinition",
+    value: function () {
+      var _createAppDefinition = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(data) {
+        return _regenerator().w(function (_context5) {
+          while (1) switch (_context5.n) {
+            case 0:
+              return _context5.a(2, _assertClassBrand(_AppEngineClient_brand, this, _post).call(this, '/app/definition/', data));
+          }
+        }, _callee5, this);
+      }));
+      function createAppDefinition(_x4) {
+        return _createAppDefinition.apply(this, arguments);
+      }
+      return createAppDefinition;
+    }()
+  }, {
+    key: "createAppWithScaffold",
+    value: function () {
+      var _createAppWithScaffold = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(data) {
+        return _regenerator().w(function (_context6) {
+          while (1) switch (_context6.n) {
+            case 0:
+              return _context6.a(2, _assertClassBrand(_AppEngineClient_brand, this, _post).call(this, '/app/definition/scaffold/', data));
+          }
+        }, _callee6, this);
+      }));
+      function createAppWithScaffold(_x5) {
+        return _createAppWithScaffold.apply(this, arguments);
+      }
+      return createAppWithScaffold;
+    }()
+  }, {
+    key: "updateAppDefinition",
+    value: function () {
+      var _updateAppDefinition = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7(data) {
+        return _regenerator().w(function (_context7) {
+          while (1) switch (_context7.n) {
+            case 0:
+              return _context7.a(2, _assertClassBrand(_AppEngineClient_brand, this, _patch).call(this, '/app/definition/', data));
+          }
+        }, _callee7, this);
+      }));
+      function updateAppDefinition(_x6) {
+        return _updateAppDefinition.apply(this, arguments);
+      }
+      return updateAppDefinition;
+    }()
+  }, {
+    key: "deleteAppDefinition",
+    value: function () {
+      var _deleteAppDefinition = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8(_ref6) {
+        var id;
+        return _regenerator().w(function (_context8) {
+          while (1) switch (_context8.n) {
+            case 0:
+              id = _ref6.id;
+              return _context8.a(2, _assertClassBrand(_AppEngineClient_brand, this, _delete).call(this, '/app/definition/', {
+                id: id
+              }));
+          }
+        }, _callee8, this);
+      }));
+      function deleteAppDefinition(_x7) {
+        return _deleteAppDefinition.apply(this, arguments);
+      }
+      return deleteAppDefinition;
+    }() // ─── App Version ─────────────────────────────────────────
+  }, {
+    key: "getAppVersion",
+    value: function () {
+      var _getAppVersion = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9(_ref7) {
+        var queryselector, search, page, pageSize, params;
+        return _regenerator().w(function (_context9) {
+          while (1) switch (_context9.n) {
+            case 0:
+              queryselector = _ref7.queryselector, search = _ref7.search, page = _ref7.page, pageSize = _ref7.pageSize;
+              params = {
+                search: search,
+                page: page,
+                pageSize: pageSize
+              };
+              return _context9.a(2, _assertClassBrand(_AppEngineClient_brand, this, _get).call(this, "/app/version/".concat(queryselector), params));
+          }
+        }, _callee9, this);
+      }));
+      function getAppVersion(_x8) {
+        return _getAppVersion.apply(this, arguments);
+      }
+      return getAppVersion;
+    }()
+  }, {
+    key: "createAppVersion",
+    value: function () {
+      var _createAppVersion = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee0(data) {
+        return _regenerator().w(function (_context0) {
+          while (1) switch (_context0.n) {
+            case 0:
+              return _context0.a(2, _assertClassBrand(_AppEngineClient_brand, this, _post).call(this, '/app/version/', data));
+          }
+        }, _callee0, this);
+      }));
+      function createAppVersion(_x9) {
+        return _createAppVersion.apply(this, arguments);
+      }
+      return createAppVersion;
+    }()
+  }, {
+    key: "updateAppVersion",
+    value: function () {
+      var _updateAppVersion = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee1(data) {
+        return _regenerator().w(function (_context1) {
+          while (1) switch (_context1.n) {
+            case 0:
+              return _context1.a(2, _assertClassBrand(_AppEngineClient_brand, this, _patch).call(this, '/app/version/', data));
+          }
+        }, _callee1, this);
+      }));
+      function updateAppVersion(_x0) {
+        return _updateAppVersion.apply(this, arguments);
+      }
+      return updateAppVersion;
+    }()
+  }, {
+    key: "publishVersion",
+    value: function () {
+      var _publishVersion = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee10(_ref8) {
+        var app_definition_id, changelog, published_by;
+        return _regenerator().w(function (_context10) {
+          while (1) switch (_context10.n) {
+            case 0:
+              app_definition_id = _ref8.app_definition_id, changelog = _ref8.changelog, published_by = _ref8.published_by;
+              return _context10.a(2, _assertClassBrand(_AppEngineClient_brand, this, _post).call(this, '/app/version/publish/', {
+                app_definition_id: app_definition_id,
+                changelog: changelog,
+                published_by: published_by
+              }));
+          }
+        }, _callee10, this);
+      }));
+      function publishVersion(_x1) {
+        return _publishVersion.apply(this, arguments);
+      }
+      return publishVersion;
+    }()
+  }, {
+    key: "activateVersion",
+    value: function () {
+      var _activateVersion = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee11(_ref9) {
+        var id;
+        return _regenerator().w(function (_context11) {
+          while (1) switch (_context11.n) {
+            case 0:
+              id = _ref9.id;
+              return _context11.a(2, _assertClassBrand(_AppEngineClient_brand, this, _patch).call(this, '/app/version/activate/', {
+                id: id
+              }));
+          }
+        }, _callee11, this);
+      }));
+      function activateVersion(_x10) {
+        return _activateVersion.apply(this, arguments);
+      }
+      return activateVersion;
+    }()
+  }, {
+    key: "deleteAppVersion",
+    value: function () {
+      var _deleteAppVersion = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee12(_ref0) {
+        var id;
+        return _regenerator().w(function (_context12) {
+          while (1) switch (_context12.n) {
+            case 0:
+              id = _ref0.id;
+              return _context12.a(2, _assertClassBrand(_AppEngineClient_brand, this, _delete).call(this, '/app/version/', {
+                id: id
+              }));
+          }
+        }, _callee12, this);
+      }));
+      function deleteAppVersion(_x11) {
+        return _deleteAppVersion.apply(this, arguments);
+      }
+      return deleteAppVersion;
+    }() // ─── App File ────────────────────────────────────────────
+  }, {
+    key: "getAppFile",
+    value: function () {
+      var _getAppFile = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee13(_ref1) {
+        var queryselector, search, page, pageSize, params;
+        return _regenerator().w(function (_context13) {
+          while (1) switch (_context13.n) {
+            case 0:
+              queryselector = _ref1.queryselector, search = _ref1.search, page = _ref1.page, pageSize = _ref1.pageSize;
+              params = {
+                search: search,
+                page: page,
+                pageSize: pageSize
+              };
+              return _context13.a(2, _assertClassBrand(_AppEngineClient_brand, this, _get).call(this, "/app/file/".concat(queryselector), params));
+          }
+        }, _callee13, this);
+      }));
+      function getAppFile(_x12) {
+        return _getAppFile.apply(this, arguments);
+      }
+      return getAppFile;
+    }()
+  }, {
+    key: "getFileTree",
+    value: function () {
+      var _getFileTree = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee14(_ref10) {
+        var search;
+        return _regenerator().w(function (_context14) {
+          while (1) switch (_context14.n) {
+            case 0:
+              search = _ref10.search;
+              return _context14.a(2, _assertClassBrand(_AppEngineClient_brand, this, _get).call(this, '/app/file/tree/', {
+                search: search
+              }));
+          }
+        }, _callee14, this);
+      }));
+      function getFileTree(_x13) {
+        return _getFileTree.apply(this, arguments);
+      }
+      return getFileTree;
+    }()
+  }, {
+    key: "getFileContent",
+    value: function () {
+      var _getFileContent = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee15(_ref11) {
+        var search;
+        return _regenerator().w(function (_context15) {
+          while (1) switch (_context15.n) {
+            case 0:
+              search = _ref11.search;
+              return _context15.a(2, _assertClassBrand(_AppEngineClient_brand, this, _get).call(this, '/app/file/content/', {
+                search: search
+              }));
+          }
+        }, _callee15, this);
+      }));
+      function getFileContent(_x14) {
+        return _getFileContent.apply(this, arguments);
+      }
+      return getFileContent;
+    }()
+  }, {
+    key: "createAppFile",
+    value: function () {
+      var _createAppFile = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee16(data) {
+        return _regenerator().w(function (_context16) {
+          while (1) switch (_context16.n) {
+            case 0:
+              return _context16.a(2, _assertClassBrand(_AppEngineClient_brand, this, _post).call(this, '/app/file/', data));
+          }
+        }, _callee16, this);
+      }));
+      function createAppFile(_x15) {
+        return _createAppFile.apply(this, arguments);
+      }
+      return createAppFile;
+    }()
+  }, {
+    key: "updateAppFile",
+    value: function () {
+      var _updateAppFile = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee17(data) {
+        return _regenerator().w(function (_context17) {
+          while (1) switch (_context17.n) {
+            case 0:
+              return _context17.a(2, _assertClassBrand(_AppEngineClient_brand, this, _patch).call(this, '/app/file/', data));
+          }
+        }, _callee17, this);
+      }));
+      function updateAppFile(_x16) {
+        return _updateAppFile.apply(this, arguments);
+      }
+      return updateAppFile;
+    }()
+  }, {
+    key: "deleteAppFile",
+    value: function () {
+      var _deleteAppFile = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee18(_ref12) {
+        var id;
+        return _regenerator().w(function (_context18) {
+          while (1) switch (_context18.n) {
+            case 0:
+              id = _ref12.id;
+              return _context18.a(2, _assertClassBrand(_AppEngineClient_brand, this, _delete).call(this, '/app/file/', {
+                id: id
+              }));
+          }
+        }, _callee18, this);
+      }));
+      function deleteAppFile(_x17) {
+        return _deleteAppFile.apply(this, arguments);
+      }
+      return deleteAppFile;
+    }()
+  }, {
+    key: "applyFileChanges",
+    value: function () {
+      var _applyFileChanges = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee19(_ref13) {
+        var app_definition_id, organization_id, changes;
+        return _regenerator().w(function (_context19) {
+          while (1) switch (_context19.n) {
+            case 0:
+              app_definition_id = _ref13.app_definition_id, organization_id = _ref13.organization_id, changes = _ref13.changes;
+              return _context19.a(2, _assertClassBrand(_AppEngineClient_brand, this, _post).call(this, '/app/file/apply-changes/', {
+                app_definition_id: app_definition_id,
+                organization_id: organization_id,
+                changes: changes
+              }));
+          }
+        }, _callee19, this);
+      }));
+      function applyFileChanges(_x18) {
+        return _applyFileChanges.apply(this, arguments);
+      }
+      return applyFileChanges;
+    }() // ─── App Build ───────────────────────────────────────────
+  }, {
+    key: "buildApp",
+    value: function () {
+      var _buildApp = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee20(_ref14) {
+        var slug, app_definition_id;
+        return _regenerator().w(function (_context20) {
+          while (1) switch (_context20.n) {
+            case 0:
+              slug = _ref14.slug, app_definition_id = _ref14.app_definition_id;
+              return _context20.a(2, _assertClassBrand(_AppEngineClient_brand, this, _post).call(this, '/app/build/single/', {
+                slug: slug,
+                app_definition_id: app_definition_id
+              }));
+          }
+        }, _callee20, this);
+      }));
+      function buildApp(_x19) {
+        return _buildApp.apply(this, arguments);
+      }
+      return buildApp;
+    }()
+  }, {
+    key: "buildAllApps",
+    value: function () {
+      var _buildAllApps = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee21() {
+        var _ref15,
+          owning_product,
+          _args21 = arguments;
+        return _regenerator().w(function (_context21) {
+          while (1) switch (_context21.n) {
+            case 0:
+              _ref15 = _args21.length > 0 && _args21[0] !== undefined ? _args21[0] : {}, owning_product = _ref15.owning_product;
+              return _context21.a(2, _assertClassBrand(_AppEngineClient_brand, this, _post).call(this, '/app/build/all/', {
+                owning_product: owning_product
+              }));
+          }
+        }, _callee21, this);
+      }));
+      function buildAllApps() {
+        return _buildAllApps.apply(this, arguments);
+      }
+      return buildAllApps;
+    }()
+  }, {
+    key: "buildAndPublish",
+    value: function () {
+      var _buildAndPublish = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee22(_ref16) {
+        var slug, app_definition_id, changelog, published_by;
+        return _regenerator().w(function (_context22) {
+          while (1) switch (_context22.n) {
+            case 0:
+              slug = _ref16.slug, app_definition_id = _ref16.app_definition_id, changelog = _ref16.changelog, published_by = _ref16.published_by;
+              return _context22.a(2, _assertClassBrand(_AppEngineClient_brand, this, _post).call(this, '/app/build/publish/', {
+                slug: slug,
+                app_definition_id: app_definition_id,
+                changelog: changelog,
+                published_by: published_by
+              }));
+          }
+        }, _callee22, this);
+      }));
+      function buildAndPublish(_x20) {
+        return _buildAndPublish.apply(this, arguments);
+      }
+      return buildAndPublish;
+    }()
+  }]);
+}();
+function _get(_x21) {
+  return _get2.apply(this, arguments);
+}
+function _get2() {
+  _get2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee23(path) {
+    var params,
+      cleanParams,
+      response,
+      _args23 = arguments,
+      _t;
+    return _regenerator().w(function (_context23) {
+      while (1) switch (_context23.p = _context23.n) {
+        case 0:
+          params = _args23.length > 1 && _args23[1] !== undefined ? _args23[1] : {};
+          _context23.p = 1;
+          cleanParams = _assertClassBrand(_AppEngineClient_brand, this, _cleanParams).call(this, params);
+          _context23.n = 2;
+          return this._http.get(path, {
+            params: cleanParams
+          });
+        case 2:
+          response = _context23.v;
+          return _context23.a(2, response.data);
+        case 3:
+          _context23.p = 3;
+          _t = _context23.v;
+          return _context23.a(2, _assertClassBrand(_AppEngineClient_brand, this, _handleError).call(this, _t));
+      }
+    }, _callee23, this, [[1, 3]]);
+  }));
+  return _get2.apply(this, arguments);
+}
+function _post(_x22) {
+  return _post2.apply(this, arguments);
+}
+function _post2() {
+  _post2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee24(path) {
+    var data,
+      response,
+      _args24 = arguments,
+      _t2;
+    return _regenerator().w(function (_context24) {
+      while (1) switch (_context24.p = _context24.n) {
+        case 0:
+          data = _args24.length > 1 && _args24[1] !== undefined ? _args24[1] : {};
+          _context24.p = 1;
+          _context24.n = 2;
+          return this._http.post(path, data);
+        case 2:
+          response = _context24.v;
+          return _context24.a(2, response.data);
+        case 3:
+          _context24.p = 3;
+          _t2 = _context24.v;
+          return _context24.a(2, _assertClassBrand(_AppEngineClient_brand, this, _handleError).call(this, _t2));
+      }
+    }, _callee24, this, [[1, 3]]);
+  }));
+  return _post2.apply(this, arguments);
+}
+function _patch(_x23) {
+  return _patch2.apply(this, arguments);
+}
+function _patch2() {
+  _patch2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee25(path) {
+    var data,
+      response,
+      _args25 = arguments,
+      _t3;
+    return _regenerator().w(function (_context25) {
+      while (1) switch (_context25.p = _context25.n) {
+        case 0:
+          data = _args25.length > 1 && _args25[1] !== undefined ? _args25[1] : {};
+          _context25.p = 1;
+          _context25.n = 2;
+          return this._http.patch(path, data);
+        case 2:
+          response = _context25.v;
+          return _context25.a(2, response.data);
+        case 3:
+          _context25.p = 3;
+          _t3 = _context25.v;
+          return _context25.a(2, _assertClassBrand(_AppEngineClient_brand, this, _handleError).call(this, _t3));
+      }
+    }, _callee25, this, [[1, 3]]);
+  }));
+  return _patch2.apply(this, arguments);
+}
+function _delete(_x24) {
+  return _delete2.apply(this, arguments);
+}
+function _delete2() {
+  _delete2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee26(path) {
+    var data,
+      response,
+      _args26 = arguments,
+      _t4;
+    return _regenerator().w(function (_context26) {
+      while (1) switch (_context26.p = _context26.n) {
+        case 0:
+          data = _args26.length > 1 && _args26[1] !== undefined ? _args26[1] : {};
+          _context26.p = 1;
+          _context26.n = 2;
+          return this._http["delete"](path, {
+            data: data
+          });
+        case 2:
+          response = _context26.v;
+          return _context26.a(2, response.data);
+        case 3:
+          _context26.p = 3;
+          _t4 = _context26.v;
+          return _context26.a(2, _assertClassBrand(_AppEngineClient_brand, this, _handleError).call(this, _t4));
+      }
+    }, _callee26, this, [[1, 3]]);
+  }));
+  return _delete2.apply(this, arguments);
+}
+function _cleanParams(params) {
+  var clean = {};
+  for (var _i = 0, _Object$entries = Object.entries(params); _i < _Object$entries.length; _i++) {
+    var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+      key = _Object$entries$_i[0],
+      value = _Object$entries$_i[1];
+    if (value !== undefined && value !== null) {
+      clean[key] = value;
+    }
+  }
+  return clean;
+}
+function _handleError(error) {
+  if (error.response) {
+    return error.response.data || {
+      success: false,
+      status: error.response.status,
+      message: error.response.statusText
+    };
+  }
+  return {
+    success: false,
+    status: 500,
+    message: error.message || 'Network error'
+  };
+}
+
+var RuntimeContainer = styles.styled('div')(function (_ref) {
+  var $launchMode = _ref.$launchMode;
+  return {
+    width: '100%',
+    height: '100%',
+    flex: $launchMode === 'fullscreen' ? 1 : 'none',
+    minHeight: $launchMode === 'fullscreen' ? 0 : '400px',
+    backgroundColor: '#2B2A33',
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column'
+  };
+});
+var LoadingState = styles.styled('div')({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '100%',
+  minHeight: '400px',
+  gap: '16px',
+  color: '#9CA3AF'
+});
+var ErrorState = styles.styled('div')({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '100%',
+  minHeight: '400px',
+  gap: '12px',
+  color: '#EF4444',
+  padding: '24px'
+});
+var AppRuntimeHost = function AppRuntimeHost(_ref2) {
+  var appSlug = _ref2.appSlug,
+    routePath = _ref2.routePath,
+    _ref2$launchMode = _ref2.launchMode,
+    launchMode = _ref2$launchMode === void 0 ? 'fullscreen' : _ref2$launchMode,
+    _ref2$inputPayload = _ref2.inputPayload,
+    inputPayload = _ref2$inputPayload === void 0 ? {} : _ref2$inputPayload,
+    appSessionService = _ref2.appSessionService,
+    _ref2$apiBaseUrl = _ref2.apiBaseUrl,
+    apiBaseUrl = _ref2$apiBaseUrl === void 0 ? '' : _ref2$apiBaseUrl,
+    onClose = _ref2.onClose,
+    onSubmitOutput = _ref2.onSubmitOutput,
+    onNavigate = _ref2.onNavigate;
+  var _useState = React$1.useState('loading'),
+    _useState2 = _slicedToArray(_useState, 2),
+    status = _useState2[0],
+    setStatus = _useState2[1];
+  var _useState3 = React$1.useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    error = _useState4[0],
+    setError = _useState4[1];
+  var _useState5 = React$1.useState(null),
+    _useState6 = _slicedToArray(_useState5, 2);
+    _useState6[0];
+    var setSession = _useState6[1];
+  var mountRef = React$1.useRef(null);
+  var rootRef = React$1.useRef(null);
+  var blobUrlRef = React$1.useRef(null);
+  var openSession = React$1.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    var response, _response$result, sessionData, version, _t;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.p = _context.n) {
+        case 0:
+          if (!(!appSessionService || !appSlug)) {
+            _context.n = 1;
+            break;
+          }
+          return _context.a(2);
+        case 1:
+          setStatus('loading');
+          setError(null);
+          _context.p = 2;
+          _context.n = 3;
+          return appSessionService.open({
+            app_slug: appSlug,
+            route_path: routePath || '/',
+            launch_mode: launchMode,
+            input_payload: inputPayload
+          });
+        case 3:
+          response = _context.v;
+          if (response !== null && response !== void 0 && response.result) {
+            _context.n = 4;
+            break;
+          }
+          throw new Error((response === null || response === void 0 ? void 0 : response.message) || 'Failed to open session');
+        case 4:
+          _response$result = response.result, sessionData = _response$result.session, version = _response$result.app_version;
+          setSession(sessionData);
+          if (version !== null && version !== void 0 && version.build_artifact) {
+            _context.n = 5;
+            break;
+          }
+          throw new Error('No build artifact available. Build and publish the app first.');
+        case 5:
+          _context.n = 6;
+          return loadAndMount(version.build_artifact, sessionData, response.result);
+        case 6:
+          _context.n = 8;
+          break;
+        case 7:
+          _context.p = 7;
+          _t = _context.v;
+          setError(_t.message);
+          setStatus('error');
+        case 8:
+          return _context.a(2);
+      }
+    }, _callee, null, [[2, 7]]);
+  })), [appSessionService, appSlug, routePath, launchMode, inputPayload]);
+  var loadAndMount = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9(buildArtifact, sessionData, fullPayload) {
+      var _buildArtifact$entryF, entryFile, code, blob, blobUrl, module, AppComponent, inputData, sdk, _t2;
+      return _regenerator().w(function (_context9) {
+        while (1) switch (_context9.p = _context9.n) {
+          case 0:
+            _context9.p = 0;
+            entryFile = Object.keys(buildArtifact).find(function (key) {
+              return key.endsWith('.js') || key.endsWith('.mjs');
+            });
+            if (!(!entryFile || !((_buildArtifact$entryF = buildArtifact[entryFile]) !== null && _buildArtifact$entryF !== void 0 && _buildArtifact$entryF.content))) {
+              _context9.n = 1;
+              break;
+            }
+            throw new Error('No entry file found in build artifacts');
+          case 1:
+            code = buildArtifact[entryFile].content;
+            blob = new Blob([code], {
+              type: 'application/javascript'
+            });
+            blobUrl = URL.createObjectURL(blob);
+            blobUrlRef.current = blobUrl;
+            _context9.n = 2;
+            return import(/* @vite-ignore */blobUrl);
+          case 2:
+            module = _context9.v;
+            AppComponent = module["default"];
+            if (AppComponent) {
+              _context9.n = 3;
+              break;
+            }
+            throw new Error('App module does not export a default component');
+          case 3:
+            inputData = sessionData.input_payload || inputPayload;
+            sdk = {
+              session: {
+                id: sessionData.id,
+                appId: sessionData.app_definition_id,
+                appSlug: sessionData.app_slug,
+                appVersionId: sessionData.app_version_id,
+                launchMode: sessionData.launch_mode,
+                routePath: sessionData.route_path
+              },
+              input: inputData,
+              context: {
+                appDefinition: fullPayload.app_definition || {},
+                appVersion: fullPayload.app_version || {},
+                task: (inputData === null || inputData === void 0 ? void 0 : inputData.task) || null,
+                data: inputData
+              },
+              api: {
+                get: function () {
+                  var _get = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(path) {
+                    var params,
+                      qs,
+                      url,
+                      res,
+                      _args2 = arguments;
+                    return _regenerator().w(function (_context2) {
+                      while (1) switch (_context2.n) {
+                        case 0:
+                          params = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : {};
+                          qs = new URLSearchParams(params).toString();
+                          url = "".concat(apiBaseUrl).concat(path).concat(qs ? '?' + qs : '');
+                          _context2.n = 1;
+                          return fetch(url, {
+                            headers: {
+                              'Content-Type': 'application/json'
+                            }
+                          });
+                        case 1:
+                          res = _context2.v;
+                          return _context2.a(2, res.json());
+                      }
+                    }, _callee2);
+                  }));
+                  function get(_x4) {
+                    return _get.apply(this, arguments);
+                  }
+                  return get;
+                }(),
+                post: function () {
+                  var _post = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(path) {
+                    var body,
+                      res,
+                      _args3 = arguments;
+                    return _regenerator().w(function (_context3) {
+                      while (1) switch (_context3.n) {
+                        case 0:
+                          body = _args3.length > 1 && _args3[1] !== undefined ? _args3[1] : {};
+                          _context3.n = 1;
+                          return fetch("".concat(apiBaseUrl).concat(path), {
+                            method: 'POST',
+                            headers: {
+                              'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify(body)
+                          });
+                        case 1:
+                          res = _context3.v;
+                          return _context3.a(2, res.json());
+                      }
+                    }, _callee3);
+                  }));
+                  function post(_x5) {
+                    return _post.apply(this, arguments);
+                  }
+                  return post;
+                }(),
+                patch: function () {
+                  var _patch = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(path) {
+                    var body,
+                      res,
+                      _args4 = arguments;
+                    return _regenerator().w(function (_context4) {
+                      while (1) switch (_context4.n) {
+                        case 0:
+                          body = _args4.length > 1 && _args4[1] !== undefined ? _args4[1] : {};
+                          _context4.n = 1;
+                          return fetch("".concat(apiBaseUrl).concat(path), {
+                            method: 'PATCH',
+                            headers: {
+                              'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify(body)
+                          });
+                        case 1:
+                          res = _context4.v;
+                          return _context4.a(2, res.json());
+                      }
+                    }, _callee4);
+                  }));
+                  function patch(_x6) {
+                    return _patch.apply(this, arguments);
+                  }
+                  return patch;
+                }(),
+                "delete": function () {
+                  var _delete2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(path) {
+                    var res;
+                    return _regenerator().w(function (_context5) {
+                      while (1) switch (_context5.n) {
+                        case 0:
+                          _context5.n = 1;
+                          return fetch("".concat(apiBaseUrl).concat(path), {
+                            method: 'DELETE',
+                            headers: {
+                              'Content-Type': 'application/json'
+                            }
+                          });
+                        case 1:
+                          res = _context5.v;
+                          return _context5.a(2, res.json());
+                      }
+                    }, _callee5);
+                  }));
+                  function _delete(_x7) {
+                    return _delete2.apply(this, arguments);
+                  }
+                  return _delete;
+                }()
+              },
+              navigate: function navigate(path) {
+                if (onNavigate) onNavigate(path);
+              },
+              saveDraft: function () {
+                var _saveDraft = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(payload) {
+                  return _regenerator().w(function (_context6) {
+                    while (1) switch (_context6.n) {
+                      case 0:
+                        if (!appSessionService) {
+                          _context6.n = 1;
+                          break;
+                        }
+                        return _context6.a(2, appSessionService.saveDraft({
+                          id: sessionData.id,
+                          draft_payload: payload
+                        }));
+                      case 1:
+                        return _context6.a(2);
+                    }
+                  }, _callee6);
+                }));
+                function saveDraft(_x8) {
+                  return _saveDraft.apply(this, arguments);
+                }
+                return saveDraft;
+              }(),
+              submitOutput: function () {
+                var _submitOutput = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7(payload) {
+                  return _regenerator().w(function (_context7) {
+                    while (1) switch (_context7.n) {
+                      case 0:
+                        if (!appSessionService) {
+                          _context7.n = 1;
+                          break;
+                        }
+                        _context7.n = 1;
+                        return appSessionService.submitOutput({
+                          id: sessionData.id,
+                          output_payload: payload
+                        });
+                      case 1:
+                        if (onSubmitOutput) onSubmitOutput(payload);
+                      case 2:
+                        return _context7.a(2);
+                    }
+                  }, _callee7);
+                }));
+                function submitOutput(_x9) {
+                  return _submitOutput.apply(this, arguments);
+                }
+                return submitOutput;
+              }(),
+              close: function close() {
+                if (onClose) onClose();
+              },
+              cancel: function () {
+                var _cancel = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8(reason) {
+                  return _regenerator().w(function (_context8) {
+                    while (1) switch (_context8.n) {
+                      case 0:
+                        if (!appSessionService) {
+                          _context8.n = 1;
+                          break;
+                        }
+                        _context8.n = 1;
+                        return appSessionService.cancel({
+                          id: sessionData.id
+                        });
+                      case 1:
+                        if (onClose) onClose();
+                      case 2:
+                        return _context8.a(2);
+                    }
+                  }, _callee8);
+                }));
+                function cancel(_x0) {
+                  return _cancel.apply(this, arguments);
+                }
+                return cancel;
+              }()
+            };
+            if (mountRef.current) {
+              rootRef.current = client.createRoot(mountRef.current);
+              rootRef.current.render(/*#__PURE__*/React$1.createElement(AppComponent, {
+                sdk: sdk
+              }));
+              setStatus('running');
+            }
+            _context9.n = 5;
+            break;
+          case 4:
+            _context9.p = 4;
+            _t2 = _context9.v;
+            setError(_t2.message);
+            setStatus('error');
+          case 5:
+            return _context9.a(2);
+        }
+      }, _callee9, null, [[0, 4]]);
+    }));
+    return function loadAndMount(_x, _x2, _x3) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+  React$1.useEffect(function () {
+    openSession();
+    return function () {
+      if (rootRef.current) {
+        rootRef.current.unmount();
+        rootRef.current = null;
+      }
+      if (blobUrlRef.current) {
+        URL.revokeObjectURL(blobUrlRef.current);
+        blobUrlRef.current = null;
+      }
+    };
+  }, [openSession]);
+  if (status === 'loading') {
+    return /*#__PURE__*/React$1.createElement(RuntimeContainer, {
+      $launchMode: launchMode
+    }, /*#__PURE__*/React$1.createElement(LoadingState, null, /*#__PURE__*/React$1.createElement(CircularProgress, {
+      sx: {
+        color: '#7C3AED'
+      }
+    }), /*#__PURE__*/React$1.createElement(Typography, {
+      sx: {
+        fontSize: '14px'
+      }
+    }, "Loading app...")));
+  }
+  if (status === 'error') {
+    return /*#__PURE__*/React$1.createElement(RuntimeContainer, {
+      $launchMode: launchMode
+    }, /*#__PURE__*/React$1.createElement(ErrorState, null, /*#__PURE__*/React$1.createElement(Typography, {
+      sx: {
+        fontSize: '16px',
+        fontWeight: 500
+      }
+    }, "Failed to load app"), /*#__PURE__*/React$1.createElement(Typography, {
+      sx: {
+        fontSize: '13px',
+        color: '#9CA3AF',
+        textAlign: 'center',
+        maxWidth: '400px'
+      }
+    }, error)));
+  }
+  return /*#__PURE__*/React$1.createElement(RuntimeContainer, {
+    $launchMode: launchMode
+  }, /*#__PURE__*/React$1.createElement("div", {
+    ref: mountRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }));
+};
+
+var ToolbarContainer = styles.styled('div')({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '8px 16px',
+  backgroundColor: '#1F1E26',
+  borderBottom: '1px solid #6B728040',
+  minHeight: '48px',
+  gap: '12px'
+});
+var ActionButton = styles.styled(Button)({
+  textTransform: 'none',
+  fontSize: '12px',
+  borderRadius: '6px',
+  padding: '4px 12px',
+  minWidth: 'auto'
+});
+var StudioToolbar = function StudioToolbar(_ref) {
+  var appName = _ref.appName,
+    isSaving = _ref.isSaving,
+    isDirty = _ref.isDirty,
+    buildStatus = _ref.buildStatus,
+    onBack = _ref.onBack,
+    onSave = _ref.onSave,
+    onBuild = _ref.onBuild,
+    onPublish = _ref.onPublish,
+    onPreview = _ref.onPreview,
+    onRun = _ref.onRun,
+    onToggleProperties = _ref.onToggleProperties,
+    isPropertiesOpen = _ref.isPropertiesOpen;
+  return /*#__PURE__*/React$1.createElement(ToolbarContainer, null, /*#__PURE__*/React$1.createElement(Box, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '12px'
+    }
+  }, onBack && /*#__PURE__*/React$1.createElement(IconButton, {
+    size: "small",
+    onClick: onBack,
+    sx: {
+      color: '#9CA3AF'
+    }
+  }, /*#__PURE__*/React$1.createElement(ArrowBackIcon, {
+    fontSize: "small"
+  })), /*#__PURE__*/React$1.createElement(Typography, {
+    sx: {
+      color: '#EAEAF0',
+      fontSize: '14px',
+      fontWeight: 600
+    }
+  }, appName || 'Untitled App'), isDirty && /*#__PURE__*/React$1.createElement(Chip, {
+    label: "Unsaved",
+    size: "small",
+    sx: {
+      backgroundColor: '#F59E0B20',
+      color: '#F59E0B',
+      fontSize: '10px',
+      height: '20px'
+    }
+  }), buildStatus && /*#__PURE__*/React$1.createElement(Chip, {
+    label: buildStatus,
+    size: "small",
+    sx: {
+      backgroundColor: buildStatus === 'success' ? '#10B98120' : buildStatus === 'building' ? '#7C3AED20' : buildStatus === 'failed' ? '#EF444420' : '#6B728020',
+      color: buildStatus === 'success' ? '#10B981' : buildStatus === 'building' ? '#7C3AED' : buildStatus === 'failed' ? '#EF4444' : '#6B7280',
+      fontSize: '10px',
+      height: '20px'
+    }
+  })), /*#__PURE__*/React$1.createElement(Box, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8px'
+    }
+  }, onToggleProperties && /*#__PURE__*/React$1.createElement(IconButton, {
+    size: "small",
+    onClick: onToggleProperties,
+    sx: {
+      color: isPropertiesOpen ? '#7C3AED' : '#6B7280'
+    }
+  }, /*#__PURE__*/React$1.createElement(ViewSidebarIcon, {
+    fontSize: "small"
+  })), onSave && /*#__PURE__*/React$1.createElement(ActionButton, {
+    variant: "outlined",
+    startIcon: isSaving ? /*#__PURE__*/React$1.createElement(CircularProgress, {
+      size: 14,
+      sx: {
+        color: '#7C3AED'
+      }
+    }) : /*#__PURE__*/React$1.createElement(SaveIcon, {
+      sx: {
+        fontSize: 14
+      }
+    }),
+    onClick: onSave,
+    disabled: isSaving || !isDirty,
+    sx: {
+      borderColor: '#6B728040',
+      color: '#EAEAF0',
+      '&:hover': {
+        borderColor: '#7C3AED',
+        backgroundColor: '#7C3AED10'
+      },
+      '&.Mui-disabled': {
+        borderColor: '#6B728020',
+        color: '#6B7280'
+      }
+    }
+  }, "Save"), onBuild && /*#__PURE__*/React$1.createElement(ActionButton, {
+    variant: "outlined",
+    startIcon: buildStatus === 'building' ? /*#__PURE__*/React$1.createElement(CircularProgress, {
+      size: 14,
+      sx: {
+        color: '#7C3AED'
+      }
+    }) : /*#__PURE__*/React$1.createElement(BuildIcon, {
+      sx: {
+        fontSize: 14
+      }
+    }),
+    onClick: onBuild,
+    disabled: buildStatus === 'building',
+    sx: {
+      borderColor: '#6B728040',
+      color: '#EAEAF0',
+      '&:hover': {
+        borderColor: '#7C3AED',
+        backgroundColor: '#7C3AED10'
+      },
+      '&.Mui-disabled': {
+        borderColor: '#6B728020',
+        color: '#6B7280'
+      }
+    }
+  }, "Build"), onPreview && /*#__PURE__*/React$1.createElement(ActionButton, {
+    variant: "outlined",
+    startIcon: /*#__PURE__*/React$1.createElement(VisibilityIcon, {
+      sx: {
+        fontSize: 14
+      }
+    }),
+    onClick: onPreview,
+    sx: {
+      borderColor: '#6B728040',
+      color: '#EAEAF0',
+      '&:hover': {
+        borderColor: '#7C3AED',
+        backgroundColor: '#7C3AED10'
+      }
+    }
+  }, "Preview"), onPublish && /*#__PURE__*/React$1.createElement(ActionButton, {
+    variant: "contained",
+    startIcon: /*#__PURE__*/React$1.createElement(PublishIcon, {
+      sx: {
+        fontSize: 14
+      }
+    }),
+    onClick: onPublish,
+    sx: {
+      backgroundColor: '#7C3AED',
+      '&:hover': {
+        backgroundColor: '#6D28D9'
+      }
+    }
+  }, "Publish"), onRun && /*#__PURE__*/React$1.createElement(ActionButton, {
+    variant: "contained",
+    startIcon: /*#__PURE__*/React$1.createElement(PlayArrowIcon, {
+      sx: {
+        fontSize: 14
+      }
+    }),
+    onClick: onRun,
+    sx: {
+      backgroundColor: '#10B981',
+      '&:hover': {
+        backgroundColor: '#059669'
+      }
+    }
+  }, "Run")));
+};
+
+var PanelContainer$2 = styles.styled('div')({
+  height: '100%',
+  backgroundColor: '#1F1E26',
+  borderRight: '1px solid #6B728040',
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden'
+});
+var PanelHeader$2 = styles.styled('div')({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '8px 12px',
+  borderBottom: '1px solid #6B728040',
+  minHeight: '36px'
+});
+var TreeContainer = styles.styled('div')({
+  flex: 1,
+  overflowY: 'auto',
+  padding: '4px 0'
+});
+var TreeItem = styles.styled('div')(function (_ref) {
+  var $depth = _ref.$depth,
+    $isActive = _ref.$isActive;
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '4px',
+    padding: "3px 8px 3px ".concat(8 + $depth * 16, "px"),
+    cursor: 'pointer',
+    fontSize: '12px',
+    color: $isActive ? '#EAEAF0' : '#9CA3AF',
+    backgroundColor: $isActive ? '#7C3AED20' : 'transparent',
+    '&:hover': {
+      backgroundColor: $isActive ? '#7C3AED20' : '#2B2A33'
+    }
+  };
+});
+var FileExplorer = function FileExplorer(_ref2) {
+  var _ref2$fileTree = _ref2.fileTree,
+    fileTree = _ref2$fileTree === void 0 ? [] : _ref2$fileTree,
+    activeFilePath = _ref2.activeFilePath,
+    onFileSelect = _ref2.onFileSelect,
+    onCreateFile = _ref2.onCreateFile,
+    onCreateFolder = _ref2.onCreateFolder;
+  var _useState = React$1.useState(new Set(['/src', '/src/components', '/src/views'])),
+    _useState2 = _slicedToArray(_useState, 2),
+    expandedFolders = _useState2[0],
+    setExpandedFolders = _useState2[1];
+  var tree = React$1.useMemo(function () {
+    return buildTree(fileTree);
+  }, [fileTree]);
+  var toggleFolder = function toggleFolder(path) {
+    setExpandedFolders(function (prev) {
+      var next = new Set(prev);
+      if (next.has(path)) {
+        next["delete"](path);
+      } else {
+        next.add(path);
+      }
+      return next;
+    });
+  };
+  var handleItemClick = function handleItemClick(item) {
+    if (item.kind === 'folder') {
+      toggleFolder(item.path);
+    } else if (onFileSelect) {
+      onFileSelect(item);
+    }
+  };
+  var _renderTree = function renderTree(nodes) {
+    var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    return nodes.map(function (node) {
+      var _node$children;
+      var isFolder = node.kind === 'folder';
+      var isExpanded = expandedFolders.has(node.path);
+      var isActive = node.path === activeFilePath;
+      return /*#__PURE__*/React$1.createElement(React$1.Fragment, {
+        key: node.path
+      }, /*#__PURE__*/React$1.createElement(TreeItem, {
+        $depth: depth,
+        $isActive: isActive,
+        onClick: function onClick() {
+          return handleItemClick(node);
+        }
+      }, isFolder ? isExpanded ? /*#__PURE__*/React$1.createElement(ExpandMoreIcon, {
+        sx: {
+          fontSize: 14,
+          color: '#6B7280'
+        }
+      }) : /*#__PURE__*/React$1.createElement(ChevronRightIcon, {
+        sx: {
+          fontSize: 14,
+          color: '#6B7280'
+        }
+      }) : /*#__PURE__*/React$1.createElement("span", {
+        style: {
+          width: 14
+        }
+      }), isFolder ? isExpanded ? /*#__PURE__*/React$1.createElement(FolderOpenIcon, {
+        sx: {
+          fontSize: 14,
+          color: '#F59E0B'
+        }
+      }) : /*#__PURE__*/React$1.createElement(FolderIcon, {
+        sx: {
+          fontSize: 14,
+          color: '#F59E0B'
+        }
+      }) : /*#__PURE__*/React$1.createElement(InsertDriveFileIcon, {
+        sx: {
+          fontSize: 14,
+          color: getFileColor(node.language)
+        }
+      }), /*#__PURE__*/React$1.createElement(Typography, {
+        sx: {
+          fontSize: '12px',
+          color: 'inherit',
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis'
+        }
+      }, node.name)), isFolder && isExpanded && ((_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.length) > 0 && _renderTree(node.children, depth + 1));
+    });
+  };
+  return /*#__PURE__*/React$1.createElement(PanelContainer$2, null, /*#__PURE__*/React$1.createElement(PanelHeader$2, null, /*#__PURE__*/React$1.createElement(Typography, {
+    sx: {
+      color: '#9CA3AF',
+      fontSize: '11px',
+      fontWeight: 600,
+      textTransform: 'uppercase',
+      letterSpacing: '0.5px'
+    }
+  }, "Explorer"), /*#__PURE__*/React$1.createElement(Box, {
+    sx: {
+      display: 'flex',
+      gap: '2px'
+    }
+  }, onCreateFile && /*#__PURE__*/React$1.createElement(IconButton, {
+    size: "small",
+    onClick: onCreateFile,
+    sx: {
+      color: '#6B7280',
+      padding: '2px'
+    }
+  }, /*#__PURE__*/React$1.createElement(NoteAddIcon, {
+    sx: {
+      fontSize: 16
+    }
+  })), onCreateFolder && /*#__PURE__*/React$1.createElement(IconButton, {
+    size: "small",
+    onClick: onCreateFolder,
+    sx: {
+      color: '#6B7280',
+      padding: '2px'
+    }
+  }, /*#__PURE__*/React$1.createElement(CreateNewFolderIcon, {
+    sx: {
+      fontSize: 16
+    }
+  })))), /*#__PURE__*/React$1.createElement(TreeContainer, null, _renderTree(tree)));
+};
+function buildTree(files) {
+  var root = [];
+  var folderMap = {};
+  var folders = files.filter(function (f) {
+    return f.kind === 'folder';
+  }).sort(function (a, b) {
+    return a.path.localeCompare(b.path);
+  });
+  var fileItems = files.filter(function (f) {
+    return f.kind !== 'folder';
+  }).sort(function (a, b) {
+    return a.path.localeCompare(b.path);
+  });
+  var _iterator = _createForOfIteratorHelper(folders),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var folder = _step.value;
+      folderMap[folder.path] = _objectSpread2(_objectSpread2({}, folder), {}, {
+        children: []
+      });
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var _iterator2 = _createForOfIteratorHelper(fileItems),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var file = _step2.value;
+      var parentPath = file.parent_path || '/';
+      if (folderMap[parentPath]) {
+        folderMap[parentPath].children.push(file);
+      }
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  var _iterator3 = _createForOfIteratorHelper(folders),
+    _step3;
+  try {
+    for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+      var _folder = _step3.value;
+      var _parentPath = _folder.parent_path || null;
+      if (_parentPath && folderMap[_parentPath]) {
+        folderMap[_parentPath].children.unshift(folderMap[_folder.path]);
+      } else {
+        root.push(folderMap[_folder.path]);
+      }
+    }
+  } catch (err) {
+    _iterator3.e(err);
+  } finally {
+    _iterator3.f();
+  }
+  var orphanFiles = fileItems.filter(function (f) {
+    return !f.parent_path || f.parent_path === '/';
+  });
+  root.push.apply(root, _toConsumableArray(orphanFiles));
+  return root;
+}
+function getFileColor(language) {
+  var colors = {
+    jsx: '#61DAFB',
+    js: '#F7DF1E',
+    css: '#264DE4',
+    json: '#6B7280',
+    html: '#E34F26'
+  };
+  return colors[language] || '#6B7280';
+}
+
+var EditorContainer = styles.styled('div')({
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  backgroundColor: '#1E1E1E',
+  overflow: 'hidden'
+});
+var TabsContainer = styles.styled('div')({
+  backgroundColor: '#252526',
+  borderBottom: '1px solid #6B728040',
+  minHeight: '35px'
+});
+var EditorWrapper = styles.styled('div')({
+  flex: 1,
+  overflow: 'hidden'
+});
+var EmptyEditor = styles.styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '100%',
+  color: '#6B7280'
+});
+var StyledTab = styles.styled(Tab)(function (_ref) {
+  var $isDirty = _ref.$isDirty;
+  return {
+    minHeight: '35px',
+    padding: '0 12px',
+    textTransform: 'none',
+    fontSize: '12px',
+    color: '#9CA3AF',
+    '&.Mui-selected': {
+      color: '#EAEAF0',
+      backgroundColor: '#1E1E1E'
+    },
+    '& .tab-label': {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '4px'
+    },
+    '& .dirty-indicator': {
+      display: $isDirty ? 'inline-block' : 'none',
+      width: '6px',
+      height: '6px',
+      borderRadius: '50%',
+      backgroundColor: '#EAEAF0'
+    }
+  };
+});
+var EditorArea = function EditorArea(_ref2) {
+  var _ref2$openFiles = _ref2.openFiles,
+    openFiles = _ref2$openFiles === void 0 ? [] : _ref2$openFiles,
+    activeFilePath = _ref2.activeFilePath,
+    onTabChange = _ref2.onTabChange,
+    onTabClose = _ref2.onTabClose,
+    onContentChange = _ref2.onContentChange;
+  var activeFile = openFiles.find(function (f) {
+    return f.path === activeFilePath;
+  });
+  var activeIndex = openFiles.findIndex(function (f) {
+    return f.path === activeFilePath;
+  });
+  var handleTabChange = function handleTabChange(event, newIndex) {
+    if (onTabChange && openFiles[newIndex]) {
+      onTabChange(openFiles[newIndex].path);
+    }
+  };
+  var handleTabClose = function handleTabClose(event, filePath) {
+    event.stopPropagation();
+    if (onTabClose) {
+      onTabClose(filePath);
+    }
+  };
+  var handleEditorChange = React$1.useCallback(function (value) {
+    if (onContentChange && activeFilePath) {
+      onContentChange(activeFilePath, value);
+    }
+  }, [onContentChange, activeFilePath]);
+  var getLanguage = function getLanguage(filePath) {
+    if (!filePath) return 'javascript';
+    if (filePath.endsWith('.jsx') || filePath.endsWith('.tsx')) return 'javascript';
+    if (filePath.endsWith('.js') || filePath.endsWith('.ts')) return 'javascript';
+    if (filePath.endsWith('.css')) return 'css';
+    if (filePath.endsWith('.json')) return 'json';
+    if (filePath.endsWith('.html')) return 'html';
+    return 'plaintext';
+  };
+  return /*#__PURE__*/React$1.createElement(EditorContainer, null, openFiles.length > 0 ? /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(TabsContainer, null, /*#__PURE__*/React$1.createElement(Tabs, {
+    value: activeIndex >= 0 ? activeIndex : 0,
+    onChange: handleTabChange,
+    variant: "scrollable",
+    scrollButtons: "auto",
+    sx: {
+      minHeight: '35px',
+      '& .MuiTabs-indicator': {
+        backgroundColor: '#7C3AED',
+        height: '2px'
+      },
+      '& .MuiTabs-scrollButtons': {
+        color: '#6B7280'
+      }
+    }
+  }, openFiles.map(function (file) {
+    return /*#__PURE__*/React$1.createElement(StyledTab, {
+      key: file.path,
+      $isDirty: file.isDirty,
+      label: /*#__PURE__*/React$1.createElement("span", {
+        className: "tab-label"
+      }, /*#__PURE__*/React$1.createElement("span", {
+        className: "dirty-indicator"
+      }), file.name || file.path.split('/').pop(), /*#__PURE__*/React$1.createElement(IconButton, {
+        size: "small",
+        onClick: function onClick(e) {
+          return handleTabClose(e, file.path);
+        },
+        sx: {
+          color: '#6B7280',
+          padding: '1px',
+          ml: '4px',
+          '&:hover': {
+            color: '#EAEAF0'
+          }
+        }
+      }, /*#__PURE__*/React$1.createElement(CloseIcon, {
+        sx: {
+          fontSize: 12
+        }
+      })))
+    });
+  }))), /*#__PURE__*/React$1.createElement(EditorWrapper, null, activeFile && /*#__PURE__*/React$1.createElement(Editor, {
+    height: "100%",
+    language: getLanguage(activeFile.path),
+    value: activeFile.content || '',
+    onChange: handleEditorChange,
+    theme: "vs-dark",
+    options: {
+      minimap: {
+        enabled: true
+      },
+      fontSize: 13,
+      lineNumbers: 'on',
+      scrollBeyondLastLine: false,
+      wordWrap: 'on',
+      tabSize: 2,
+      automaticLayout: true,
+      padding: {
+        top: 8
+      }
+    }
+  }))) : /*#__PURE__*/React$1.createElement(EmptyEditor, null, /*#__PURE__*/React$1.createElement(Box, {
+    sx: {
+      textAlign: 'center'
+    }
+  }, /*#__PURE__*/React$1.createElement(Typography, {
+    sx: {
+      fontSize: '14px',
+      mb: 1
+    }
+  }, "No file open"), /*#__PURE__*/React$1.createElement(Typography, {
+    sx: {
+      fontSize: '12px'
+    }
+  }, "Select a file from the explorer to start editing"))));
+};
+
+var PanelContainer$1 = styles.styled('div')(function (_ref) {
+  var $isOpen = _ref.$isOpen;
+  return {
+    height: '100%',
+    width: $isOpen ? '300px' : '0px',
+    minWidth: $isOpen ? '300px' : '0px',
+    backgroundColor: '#1F1E26',
+    borderLeft: $isOpen ? '1px solid #6B728040' : 'none',
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+    transition: 'width 0.2s, min-width 0.2s'
+  };
+});
+var PanelHeader$1 = styles.styled('div')({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '8px 12px',
+  borderBottom: '1px solid #6B728040',
+  minHeight: '36px'
+});
+var PanelContent$1 = styles.styled('div')({
+  flex: 1,
+  overflowY: 'auto',
+  padding: '12px'
+});
+var FieldGroup = styles.styled('div')({
+  marginBottom: '16px'
+});
+var FieldLabel = styles.styled(Typography)({
+  color: '#9CA3AF',
+  fontSize: '11px',
+  fontWeight: 600,
+  textTransform: 'uppercase',
+  letterSpacing: '0.5px',
+  marginBottom: '6px'
+});
+var inputSx = {
+  '& .MuiOutlinedInput-root': {
+    backgroundColor: '#2B2A33',
+    color: '#EAEAF0',
+    fontSize: '13px',
+    '& fieldset': {
+      borderColor: '#6B728040'
+    },
+    '&:hover fieldset': {
+      borderColor: '#7C3AED'
+    },
+    '&.Mui-focused fieldset': {
+      borderColor: '#7C3AED'
+    }
+  }
+};
+var selectSx = {
+  backgroundColor: '#2B2A33',
+  color: '#EAEAF0',
+  fontSize: '13px',
+  '& fieldset': {
+    borderColor: '#6B728040'
+  },
+  '&:hover fieldset': {
+    borderColor: '#7C3AED'
+  },
+  '&.Mui-focused fieldset': {
+    borderColor: '#7C3AED'
+  },
+  '& .MuiSelect-icon': {
+    color: '#6B7280'
+  }
+};
+var PropertiesPanel = function PropertiesPanel(_ref2) {
+  var _appDefinition$tags, _appDefinition$manife, _appDefinition$manife2, _appDefinition$manife3, _appDefinition$manife4, _appDefinition$manife5, _appDefinition$manife6, _appDefinition$routes;
+  var _ref2$isOpen = _ref2.isOpen,
+    isOpen = _ref2$isOpen === void 0 ? true : _ref2$isOpen,
+    onClose = _ref2.onClose,
+    appDefinition = _ref2.appDefinition,
+    onUpdateDefinition = _ref2.onUpdateDefinition;
+  var _useState = React$1.useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeTab = _useState2[0],
+    setActiveTab = _useState2[1];
+  var handleFieldChange = function handleFieldChange(field, value) {
+    if (onUpdateDefinition) {
+      onUpdateDefinition(_objectSpread2(_objectSpread2({}, appDefinition), {}, _defineProperty({}, field, value)));
+    }
+  };
+  var handleManifestFieldChange = function handleManifestFieldChange(field, value) {
+    if (!onUpdateDefinition) return;
+    var updatedManifest = _objectSpread2(_objectSpread2({}, (appDefinition === null || appDefinition === void 0 ? void 0 : appDefinition.manifest) || {}), {}, _defineProperty({}, field, value));
+    if (field === 'launcher_visibility') {
+      updatedManifest.launcher_visible = value === 'visible';
+    }
+    onUpdateDefinition(_objectSpread2(_objectSpread2({}, appDefinition), {}, {
+      manifest: updatedManifest
+    }));
+  };
+  return /*#__PURE__*/React$1.createElement(PanelContainer$1, {
+    $isOpen: isOpen
+  }, /*#__PURE__*/React$1.createElement(PanelHeader$1, null, /*#__PURE__*/React$1.createElement(Typography, {
+    sx: {
+      color: '#9CA3AF',
+      fontSize: '11px',
+      fontWeight: 600,
+      textTransform: 'uppercase',
+      letterSpacing: '0.5px'
+    }
+  }, "Properties"), onClose && /*#__PURE__*/React$1.createElement(IconButton, {
+    size: "small",
+    onClick: onClose,
+    sx: {
+      color: '#6B7280',
+      padding: '2px'
+    }
+  }, /*#__PURE__*/React$1.createElement(ChevronLeftIcon, {
+    sx: {
+      fontSize: 16,
+      transform: 'rotate(180deg)'
+    }
+  }))), /*#__PURE__*/React$1.createElement(Tabs, {
+    value: activeTab,
+    onChange: function onChange(e, v) {
+      return setActiveTab(v);
+    },
+    variant: "fullWidth",
+    sx: {
+      minHeight: '32px',
+      borderBottom: '1px solid #6B728040',
+      '& .MuiTab-root': {
+        minHeight: '32px',
+        fontSize: '11px',
+        textTransform: 'none',
+        color: '#9CA3AF'
+      },
+      '& .Mui-selected': {
+        color: '#EAEAF0'
+      },
+      '& .MuiTabs-indicator': {
+        backgroundColor: '#7C3AED'
+      }
+    }
+  }, /*#__PURE__*/React$1.createElement(Tab, {
+    label: "General"
+  }), /*#__PURE__*/React$1.createElement(Tab, {
+    label: "Manifest"
+  }), /*#__PURE__*/React$1.createElement(Tab, {
+    label: "Routes"
+  })), /*#__PURE__*/React$1.createElement(PanelContent$1, null, activeTab === 0 && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(FieldGroup, null, /*#__PURE__*/React$1.createElement(FieldLabel, null, "Name"), /*#__PURE__*/React$1.createElement(TextField, {
+    fullWidth: true,
+    size: "small",
+    value: (appDefinition === null || appDefinition === void 0 ? void 0 : appDefinition.name) || '',
+    onChange: function onChange(e) {
+      return handleFieldChange('name', e.target.value);
+    },
+    sx: inputSx
+  })), /*#__PURE__*/React$1.createElement(FieldGroup, null, /*#__PURE__*/React$1.createElement(FieldLabel, null, "Slug"), /*#__PURE__*/React$1.createElement(TextField, {
+    fullWidth: true,
+    size: "small",
+    value: (appDefinition === null || appDefinition === void 0 ? void 0 : appDefinition.slug) || '',
+    onChange: function onChange(e) {
+      return handleFieldChange('slug', e.target.value);
+    },
+    sx: inputSx
+  })), /*#__PURE__*/React$1.createElement(FieldGroup, null, /*#__PURE__*/React$1.createElement(FieldLabel, null, "Description"), /*#__PURE__*/React$1.createElement(TextField, {
+    fullWidth: true,
+    size: "small",
+    multiline: true,
+    rows: 3,
+    value: (appDefinition === null || appDefinition === void 0 ? void 0 : appDefinition.description) || '',
+    onChange: function onChange(e) {
+      return handleFieldChange('description', e.target.value);
+    },
+    sx: inputSx
+  })), /*#__PURE__*/React$1.createElement(FieldGroup, null, /*#__PURE__*/React$1.createElement(FieldLabel, null, "Category"), /*#__PURE__*/React$1.createElement(TextField, {
+    fullWidth: true,
+    size: "small",
+    value: (appDefinition === null || appDefinition === void 0 ? void 0 : appDefinition.category) || '',
+    onChange: function onChange(e) {
+      return handleFieldChange('category', e.target.value);
+    },
+    sx: inputSx
+  })), /*#__PURE__*/React$1.createElement(FieldGroup, null, /*#__PURE__*/React$1.createElement(FieldLabel, null, "Icon"), /*#__PURE__*/React$1.createElement(TextField, {
+    fullWidth: true,
+    size: "small",
+    value: (appDefinition === null || appDefinition === void 0 ? void 0 : appDefinition.icon) || '',
+    onChange: function onChange(e) {
+      return handleFieldChange('icon', e.target.value);
+    },
+    sx: inputSx
+  })), (appDefinition === null || appDefinition === void 0 || (_appDefinition$tags = appDefinition.tags) === null || _appDefinition$tags === void 0 ? void 0 : _appDefinition$tags.length) > 0 && /*#__PURE__*/React$1.createElement(FieldGroup, null, /*#__PURE__*/React$1.createElement(FieldLabel, null, "Tags"), /*#__PURE__*/React$1.createElement(Box, {
+    sx: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      gap: '4px'
+    }
+  }, appDefinition.tags.map(function (tag, i) {
+    return /*#__PURE__*/React$1.createElement(Chip, {
+      key: i,
+      label: tag,
+      size: "small",
+      sx: {
+        backgroundColor: '#7C3AED20',
+        color: '#A78BFA',
+        fontSize: '11px',
+        height: '22px'
+      }
+    });
+  })))), activeTab === 1 && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement(FieldGroup, null, /*#__PURE__*/React$1.createElement(FieldLabel, null, "Kind"), /*#__PURE__*/React$1.createElement(Select, {
+    fullWidth: true,
+    size: "small",
+    value: (appDefinition === null || appDefinition === void 0 || (_appDefinition$manife = appDefinition.manifest) === null || _appDefinition$manife === void 0 ? void 0 : _appDefinition$manife.kind) || 'workspace',
+    onChange: function onChange(e) {
+      return handleManifestFieldChange('kind', e.target.value);
+    },
+    sx: selectSx
+  }, /*#__PURE__*/React$1.createElement(MenuItem, {
+    value: "workspace"
+  }, "Workspace"), /*#__PURE__*/React$1.createElement(MenuItem, {
+    value: "utility"
+  }, "Utility"))), /*#__PURE__*/React$1.createElement(FieldGroup, null, /*#__PURE__*/React$1.createElement(FieldLabel, null, "Launcher Visibility"), /*#__PURE__*/React$1.createElement(Select, {
+    fullWidth: true,
+    size: "small",
+    value: (appDefinition === null || appDefinition === void 0 || (_appDefinition$manife2 = appDefinition.manifest) === null || _appDefinition$manife2 === void 0 ? void 0 : _appDefinition$manife2.launcher_visibility) || 'visible',
+    onChange: function onChange(e) {
+      return handleManifestFieldChange('launcher_visibility', e.target.value);
+    },
+    sx: selectSx
+  }, /*#__PURE__*/React$1.createElement(MenuItem, {
+    value: "visible"
+  }, "Visible"), /*#__PURE__*/React$1.createElement(MenuItem, {
+    value: "hidden"
+  }, "Hidden"), /*#__PURE__*/React$1.createElement(MenuItem, {
+    value: "system"
+  }, "System"))), /*#__PURE__*/React$1.createElement(FieldGroup, null, /*#__PURE__*/React$1.createElement(FieldLabel, null, "Entry Behavior"), /*#__PURE__*/React$1.createElement(Select, {
+    fullWidth: true,
+    size: "small",
+    value: (appDefinition === null || appDefinition === void 0 || (_appDefinition$manife3 = appDefinition.manifest) === null || _appDefinition$manife3 === void 0 ? void 0 : _appDefinition$manife3.entry_behavior) || 'home',
+    onChange: function onChange(e) {
+      return handleManifestFieldChange('entry_behavior', e.target.value);
+    },
+    sx: selectSx
+  }, /*#__PURE__*/React$1.createElement(MenuItem, {
+    value: "home"
+  }, "Home"), /*#__PURE__*/React$1.createElement(MenuItem, {
+    value: "context-required"
+  }, "Context Required"), /*#__PURE__*/React$1.createElement(MenuItem, {
+    value: "route-only"
+  }, "Route Only"))), /*#__PURE__*/React$1.createElement(FieldGroup, null, /*#__PURE__*/React$1.createElement(FieldLabel, null, "Pinnable"), /*#__PURE__*/React$1.createElement(Switch, {
+    checked: (appDefinition === null || appDefinition === void 0 || (_appDefinition$manife4 = appDefinition.manifest) === null || _appDefinition$manife4 === void 0 ? void 0 : _appDefinition$manife4.pinnable) !== false,
+    onChange: function onChange(e) {
+      return handleManifestFieldChange('pinnable', e.target.checked);
+    },
+    size: "small",
+    sx: {
+      '& .Mui-checked': {
+        color: '#7C3AED'
+      },
+      '& .Mui-checked + .MuiSwitch-track': {
+        backgroundColor: '#7C3AED'
+      }
+    }
+  })), /*#__PURE__*/React$1.createElement(FieldGroup, null, /*#__PURE__*/React$1.createElement(FieldLabel, null, "Requires Context"), /*#__PURE__*/React$1.createElement(Switch, {
+    checked: (appDefinition === null || appDefinition === void 0 || (_appDefinition$manife5 = appDefinition.manifest) === null || _appDefinition$manife5 === void 0 ? void 0 : _appDefinition$manife5.requires_context) || false,
+    onChange: function onChange(e) {
+      return handleManifestFieldChange('requires_context', e.target.checked);
+    },
+    size: "small",
+    sx: {
+      '& .Mui-checked': {
+        color: '#7C3AED'
+      },
+      '& .Mui-checked + .MuiSwitch-track': {
+        backgroundColor: '#7C3AED'
+      }
+    }
+  })), /*#__PURE__*/React$1.createElement(FieldGroup, null, /*#__PURE__*/React$1.createElement(FieldLabel, null, "Entry Route"), /*#__PURE__*/React$1.createElement(TextField, {
+    fullWidth: true,
+    size: "small",
+    value: (appDefinition === null || appDefinition === void 0 || (_appDefinition$manife6 = appDefinition.manifest) === null || _appDefinition$manife6 === void 0 ? void 0 : _appDefinition$manife6.entry_route) || '/',
+    onChange: function onChange(e) {
+      return handleManifestFieldChange('entry_route', e.target.value);
+    },
+    sx: inputSx
+  })), /*#__PURE__*/React$1.createElement(FieldGroup, null, /*#__PURE__*/React$1.createElement(FieldLabel, null, "Advanced (JSON)"), /*#__PURE__*/React$1.createElement(TextField, {
+    fullWidth: true,
+    size: "small",
+    multiline: true,
+    rows: 6,
+    value: appDefinition !== null && appDefinition !== void 0 && appDefinition.manifest ? JSON.stringify(appDefinition.manifest, null, 2) : '{}',
+    onChange: function onChange(e) {
+      try {
+        handleFieldChange('manifest', JSON.parse(e.target.value));
+      } catch (_) {/* ignore parse errors during typing */}
+    },
+    sx: _objectSpread2(_objectSpread2({}, inputSx), {}, {
+      '& .MuiOutlinedInput-root': _objectSpread2(_objectSpread2({}, inputSx['& .MuiOutlinedInput-root']), {}, {
+        fontFamily: 'monospace',
+        fontSize: '12px'
+      })
+    })
+  }))), activeTab === 2 && /*#__PURE__*/React$1.createElement(FieldGroup, null, /*#__PURE__*/React$1.createElement(FieldLabel, null, "Routes"), (appDefinition === null || appDefinition === void 0 || (_appDefinition$routes = appDefinition.routes) === null || _appDefinition$routes === void 0 ? void 0 : _appDefinition$routes.length) > 0 ? appDefinition.routes.map(function (route, i) {
+    return /*#__PURE__*/React$1.createElement(Box, {
+      key: i,
+      sx: {
+        mb: 1,
+        p: 1,
+        backgroundColor: '#2B2A33',
+        borderRadius: '6px'
+      }
+    }, /*#__PURE__*/React$1.createElement(Typography, {
+      sx: {
+        color: '#EAEAF0',
+        fontSize: '12px',
+        fontWeight: 500
+      }
+    }, route.path || '/'), /*#__PURE__*/React$1.createElement(Typography, {
+      sx: {
+        color: '#9CA3AF',
+        fontSize: '11px'
+      }
+    }, route.name || 'Unnamed route'));
+  }) : /*#__PURE__*/React$1.createElement(Typography, {
+    sx: {
+      color: '#6B7280',
+      fontSize: '12px'
+    }
+  }, "No routes defined"))));
+};
+
+var PanelContainer = styles.styled('div')(function (_ref) {
+  var $isOpen = _ref.$isOpen,
+    $height = _ref.$height;
+  return {
+    height: $isOpen ? "".concat($height, "px") : '35px',
+    backgroundColor: '#1F1E26',
+    borderTop: '1px solid #6B728040',
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+    transition: 'height 0.2s'
+  };
+});
+var PanelHeader = styles.styled('div')({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  minHeight: '35px',
+  borderBottom: '1px solid #6B728040'
+});
+var PanelContent = styles.styled('div')({
+  flex: 1,
+  overflowY: 'auto',
+  padding: '8px 12px',
+  fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
+  fontSize: '12px',
+  lineHeight: 1.6
+});
+var LogLine = styles.styled('div')(function (_ref2) {
+  var $level = _ref2.$level;
+  return {
+    color: $level === 'error' ? '#EF4444' : $level === 'warning' ? '#F59E0B' : $level === 'success' ? '#10B981' : '#9CA3AF',
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-all'
+  };
+});
+var BottomPanel = function BottomPanel(_ref3) {
+  var _ref3$buildLog = _ref3.buildLog,
+    buildLog = _ref3$buildLog === void 0 ? '' : _ref3$buildLog,
+    _ref3$buildErrors = _ref3.buildErrors,
+    buildErrors = _ref3$buildErrors === void 0 ? [] : _ref3$buildErrors,
+    controlledIsOpen = _ref3.isOpen,
+    onToggle = _ref3.onToggle,
+    _ref3$height = _ref3.height,
+    height = _ref3$height === void 0 ? 200 : _ref3$height;
+  var _useState = React$1.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalIsOpen = _useState2[0],
+    setInternalIsOpen = _useState2[1];
+  var _useState3 = React$1.useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activeTab = _useState4[0],
+    setActiveTab = _useState4[1];
+  var isOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen;
+  var handleToggle = function handleToggle() {
+    if (onToggle) {
+      onToggle(!isOpen);
+    } else {
+      setInternalIsOpen(!internalIsOpen);
+    }
+  };
+  var logLines = buildLog ? buildLog.split('\n').filter(Boolean) : [];
+  return /*#__PURE__*/React$1.createElement(PanelContainer, {
+    $isOpen: isOpen,
+    $height: height
+  }, /*#__PURE__*/React$1.createElement(PanelHeader, null, /*#__PURE__*/React$1.createElement(Tabs, {
+    value: activeTab,
+    onChange: function onChange(e, v) {
+      return setActiveTab(v);
+    },
+    sx: {
+      minHeight: '35px',
+      '& .MuiTab-root': {
+        minHeight: '35px',
+        fontSize: '11px',
+        textTransform: 'none',
+        color: '#9CA3AF',
+        padding: '0 16px'
+      },
+      '& .Mui-selected': {
+        color: '#EAEAF0'
+      },
+      '& .MuiTabs-indicator': {
+        backgroundColor: '#7C3AED'
+      }
+    }
+  }, /*#__PURE__*/React$1.createElement(Tab, {
+    label: "Build Output".concat(logLines.length ? " (".concat(logLines.length, ")") : '')
+  }), /*#__PURE__*/React$1.createElement(Tab, {
+    label: "Problems".concat(buildErrors.length ? " (".concat(buildErrors.length, ")") : '')
+  })), /*#__PURE__*/React$1.createElement(IconButton, {
+    size: "small",
+    onClick: handleToggle,
+    sx: {
+      color: '#6B7280',
+      mr: 1
+    }
+  }, isOpen ? /*#__PURE__*/React$1.createElement(KeyboardArrowDownIcon, {
+    fontSize: "small"
+  }) : /*#__PURE__*/React$1.createElement(KeyboardArrowUpIcon, {
+    fontSize: "small"
+  }))), /*#__PURE__*/React$1.createElement(PanelContent, null, activeTab === 0 && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, logLines.length > 0 ? logLines.map(function (line, index) {
+    var level = 'info';
+    if (line.toLowerCase().includes('error')) level = 'error';else if (line.toLowerCase().includes('warn')) level = 'warning';else if (line.toLowerCase().includes('success') || line.toLowerCase().includes('built')) level = 'success';
+    return /*#__PURE__*/React$1.createElement(LogLine, {
+      key: index,
+      $level: level
+    }, line);
+  }) : /*#__PURE__*/React$1.createElement(LogLine, {
+    $level: "info"
+  }, "No build output yet. Click \"Build\" to compile the app.")), activeTab === 1 && /*#__PURE__*/React$1.createElement(React$1.Fragment, null, buildErrors.length > 0 ? buildErrors.map(function (error, index) {
+    return /*#__PURE__*/React$1.createElement(LogLine, {
+      key: index,
+      $level: "error"
+    }, error);
+  }) : /*#__PURE__*/React$1.createElement(LogLine, {
+    $level: "success"
+  }, "No problems detected."))));
+};
+
+var StudioContainer = styles.styled('div')({
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  backgroundColor: '#1E1E1E',
+  overflow: 'hidden'
+});
+var MainContent = styles.styled('div')({
+  flex: 1,
+  display: 'flex',
+  overflow: 'hidden'
+});
+var FileExplorerWrapper = styles.styled('div')({
+  width: '240px',
+  minWidth: '240px',
+  height: '100%'
+});
+var CenterArea = styles.styled('div')({
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden'
+});
+var AppStudio = function AppStudio(_ref) {
+  var appDefinitionId = _ref.appDefinitionId,
+    appDefinitionService = _ref.appDefinitionService,
+    appFileService = _ref.appFileService,
+    appVersionService = _ref.appVersionService,
+    appBuildService = _ref.appBuildService,
+    onBack = _ref.onBack,
+    onRun = _ref.onRun;
+    _ref.onNavigateToRuntime;
+  var _useState = React$1.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    appDefinition = _useState2[0],
+    setAppDefinition = _useState2[1];
+  var _useState3 = React$1.useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    fileTree = _useState4[0],
+    setFileTree = _useState4[1];
+  var _useState5 = React$1.useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    openFiles = _useState6[0],
+    setOpenFiles = _useState6[1];
+  var _useState7 = React$1.useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    activeFilePath = _useState8[0],
+    setActiveFilePath = _useState8[1];
+  var _useState9 = React$1.useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    isSaving = _useState0[0],
+    setIsSaving = _useState0[1];
+  var _useState1 = React$1.useState(null),
+    _useState10 = _slicedToArray(_useState1, 2),
+    buildStatus = _useState10[0],
+    setBuildStatus = _useState10[1];
+  var _useState11 = React$1.useState(''),
+    _useState12 = _slicedToArray(_useState11, 2),
+    buildLog = _useState12[0],
+    setBuildLog = _useState12[1];
+  var _useState13 = React$1.useState([]),
+    _useState14 = _slicedToArray(_useState13, 2),
+    buildErrors = _useState14[0],
+    setBuildErrors = _useState14[1];
+  var _useState15 = React$1.useState(true),
+    _useState16 = _slicedToArray(_useState15, 2),
+    isPropertiesOpen = _useState16[0],
+    setIsPropertiesOpen = _useState16[1];
+  var _useState17 = React$1.useState(false),
+    _useState18 = _slicedToArray(_useState17, 2),
+    isBottomPanelOpen = _useState18[0],
+    setIsBottomPanelOpen = _useState18[1];
+  var isDirty = openFiles.some(function (f) {
+    return f.isDirty;
+  });
+  var definitionDirtyRef = React$1.useRef(false);
+  var loadStudioPayload = React$1.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    var response, _t;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.p = _context.n) {
+        case 0:
+          if (!(!appDefinitionService || !appDefinitionId)) {
+            _context.n = 1;
+            break;
+          }
+          return _context.a(2);
+        case 1:
+          _context.p = 1;
+          _context.n = 2;
+          return appDefinitionService.getStudioPayload({
+            id: appDefinitionId
+          });
+        case 2:
+          response = _context.v;
+          if (response !== null && response !== void 0 && response.result) {
+            setAppDefinition(response.result.definition);
+            setFileTree(response.result.file_tree || []);
+          }
+          _context.n = 4;
+          break;
+        case 3:
+          _context.p = 3;
+          _t = _context.v;
+          console.error('Failed to load studio payload:', _t);
+        case 4:
+          return _context.a(2);
+      }
+    }, _callee, null, [[1, 3]]);
+  })), [appDefinitionService, appDefinitionId]);
+  React$1.useEffect(function () {
+    loadStudioPayload();
+  }, [loadStudioPayload]);
+  var handleFileSelect = React$1.useCallback(/*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(file) {
+      var existing, content, response, _t2;
+      return _regenerator().w(function (_context2) {
+        while (1) switch (_context2.p = _context2.n) {
+          case 0:
+            if (!(file.kind === 'folder')) {
+              _context2.n = 1;
+              break;
+            }
+            return _context2.a(2);
+          case 1:
+            existing = openFiles.find(function (f) {
+              return f.path === file.path;
+            });
+            if (!existing) {
+              _context2.n = 2;
+              break;
+            }
+            setActiveFilePath(file.path);
+            return _context2.a(2);
+          case 2:
+            content = file.content;
+            if (!(content === undefined || content === null)) {
+              _context2.n = 6;
+              break;
+            }
+            _context2.p = 3;
+            _context2.n = 4;
+            return appFileService.getFileContent({
+              search: file.id
+            });
+          case 4:
+            response = _context2.v;
+            if (response !== null && response !== void 0 && response.result) {
+              content = response.result.content || '';
+            }
+            _context2.n = 6;
+            break;
+          case 5:
+            _context2.p = 5;
+            _t2 = _context2.v;
+            console.error('Failed to load file content:', _t2);
+            content = '';
+          case 6:
+            setOpenFiles(function (prev) {
+              return [].concat(_toConsumableArray(prev), [_objectSpread2(_objectSpread2({}, file), {}, {
+                content: content,
+                isDirty: false,
+                originalContent: content
+              })]);
+            });
+            setActiveFilePath(file.path);
+          case 7:
+            return _context2.a(2);
+        }
+      }, _callee2, null, [[3, 5]]);
+    }));
+    return function (_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), [openFiles, appFileService]);
+  var handleContentChange = React$1.useCallback(function (filePath, newContent) {
+    setOpenFiles(function (prev) {
+      return prev.map(function (f) {
+        if (f.path !== filePath) return f;
+        return _objectSpread2(_objectSpread2({}, f), {}, {
+          content: newContent,
+          isDirty: newContent !== f.originalContent
+        });
+      });
+    });
+  }, []);
+  var handleTabChange = React$1.useCallback(function (filePath) {
+    setActiveFilePath(filePath);
+  }, []);
+  var handleTabClose = React$1.useCallback(function (filePath) {
+    setOpenFiles(function (prev) {
+      var next = prev.filter(function (f) {
+        return f.path !== filePath;
+      });
+      if (filePath === activeFilePath) {
+        var _next$Math$min;
+        var closedIndex = prev.findIndex(function (f) {
+          return f.path === filePath;
+        });
+        var newActive = ((_next$Math$min = next[Math.min(closedIndex, next.length - 1)]) === null || _next$Math$min === void 0 ? void 0 : _next$Math$min.path) || null;
+        setActiveFilePath(newActive);
+      }
+      return next;
+    });
+  }, [activeFilePath]);
+  var handleSave = React$1.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
+    var dirtyFiles, changes, _t3;
+    return _regenerator().w(function (_context3) {
+      while (1) switch (_context3.p = _context3.n) {
+        case 0:
+          if (appFileService) {
+            _context3.n = 1;
+            break;
+          }
+          return _context3.a(2);
+        case 1:
+          setIsSaving(true);
+          _context3.p = 2;
+          dirtyFiles = openFiles.filter(function (f) {
+            return f.isDirty;
+          });
+          changes = dirtyFiles.map(function (f) {
+            return {
+              operation: 'update',
+              id: f.id,
+              path: f.path,
+              content: f.content
+            };
+          });
+          if (!(changes.length > 0)) {
+            _context3.n = 4;
+            break;
+          }
+          _context3.n = 3;
+          return appFileService.applyChanges({
+            app_definition_id: appDefinitionId,
+            changes: changes
+          });
+        case 3:
+          setOpenFiles(function (prev) {
+            return prev.map(function (f) {
+              return f.isDirty ? _objectSpread2(_objectSpread2({}, f), {}, {
+                isDirty: false,
+                originalContent: f.content
+              }) : f;
+            });
+          });
+        case 4:
+          if (!(definitionDirtyRef.current && appDefinitionService)) {
+            _context3.n = 6;
+            break;
+          }
+          _context3.n = 5;
+          return appDefinitionService.update(appDefinition);
+        case 5:
+          definitionDirtyRef.current = false;
+        case 6:
+          _context3.n = 8;
+          break;
+        case 7:
+          _context3.p = 7;
+          _t3 = _context3.v;
+          console.error('Failed to save:', _t3);
+        case 8:
+          _context3.p = 8;
+          setIsSaving(false);
+          return _context3.f(8);
+        case 9:
+          return _context3.a(2);
+      }
+    }, _callee3, null, [[2, 7, 8, 9]]);
+  })), [openFiles, appFileService, appDefinitionId, appDefinitionService, appDefinition]);
+  var handleBuild = React$1.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+    var response, _t4;
+    return _regenerator().w(function (_context4) {
+      while (1) switch (_context4.p = _context4.n) {
+        case 0:
+          if (appBuildService) {
+            _context4.n = 1;
+            break;
+          }
+          return _context4.a(2);
+        case 1:
+          setBuildStatus('building');
+          setBuildLog('');
+          setBuildErrors([]);
+          setIsBottomPanelOpen(true);
+          _context4.p = 2;
+          _context4.n = 3;
+          return appBuildService.build({
+            app_definition_id: appDefinitionId,
+            organization_id: appDefinition === null || appDefinition === void 0 ? void 0 : appDefinition.organization_id
+          });
+        case 3:
+          response = _context4.v;
+          if (response !== null && response !== void 0 && response.result) {
+            setBuildStatus(response.result.build_status || 'success');
+            setBuildLog(response.result.build_log || 'Build completed successfully');
+          } else {
+            setBuildStatus('failed');
+            setBuildErrors([(response === null || response === void 0 ? void 0 : response.message) || 'Build failed']);
+          }
+          _context4.n = 5;
+          break;
+        case 4:
+          _context4.p = 4;
+          _t4 = _context4.v;
+          setBuildStatus('failed');
+          setBuildErrors([_t4.message || 'Build failed']);
+        case 5:
+          return _context4.a(2);
+      }
+    }, _callee4, null, [[2, 4]]);
+  })), [appBuildService, appDefinitionId, appDefinition]);
+  var handlePublish = React$1.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
+    var response, _t5;
+    return _regenerator().w(function (_context5) {
+      while (1) switch (_context5.p = _context5.n) {
+        case 0:
+          if (appVersionService) {
+            _context5.n = 1;
+            break;
+          }
+          return _context5.a(2);
+        case 1:
+          _context5.p = 1;
+          _context5.n = 2;
+          return appVersionService.publish({
+            app_definition_id: appDefinitionId
+          });
+        case 2:
+          response = _context5.v;
+          if (response !== null && response !== void 0 && response.result) {
+            setBuildLog(function (prev) {
+              return prev + '\nVersion published successfully: ' + (response.result.version || '');
+            });
+          }
+          _context5.n = 4;
+          break;
+        case 3:
+          _context5.p = 3;
+          _t5 = _context5.v;
+          console.error('Failed to publish:', _t5);
+        case 4:
+          return _context5.a(2);
+      }
+    }, _callee5, null, [[1, 3]]);
+  })), [appVersionService, appDefinitionId]);
+  var handleUpdateDefinition = React$1.useCallback(function (updated) {
+    setAppDefinition(updated);
+    definitionDirtyRef.current = true;
+  }, []);
+  return /*#__PURE__*/React$1.createElement(StudioContainer, null, /*#__PURE__*/React$1.createElement(StudioToolbar, {
+    appName: appDefinition === null || appDefinition === void 0 ? void 0 : appDefinition.name,
+    isSaving: isSaving,
+    isDirty: isDirty || definitionDirtyRef.current,
+    buildStatus: buildStatus,
+    onBack: onBack,
+    onSave: handleSave,
+    onBuild: handleBuild,
+    onPublish: handlePublish,
+    onRun: onRun,
+    onToggleProperties: function onToggleProperties() {
+      return setIsPropertiesOpen(!isPropertiesOpen);
+    },
+    isPropertiesOpen: isPropertiesOpen
+  }), /*#__PURE__*/React$1.createElement(MainContent, null, /*#__PURE__*/React$1.createElement(FileExplorerWrapper, null, /*#__PURE__*/React$1.createElement(FileExplorer, {
+    fileTree: fileTree,
+    activeFilePath: activeFilePath,
+    onFileSelect: handleFileSelect
+  })), /*#__PURE__*/React$1.createElement(CenterArea, null, /*#__PURE__*/React$1.createElement(Box, {
+    sx: {
+      flex: 1,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React$1.createElement(EditorArea, {
+    openFiles: openFiles,
+    activeFilePath: activeFilePath,
+    onTabChange: handleTabChange,
+    onTabClose: handleTabClose,
+    onContentChange: handleContentChange
+  })), /*#__PURE__*/React$1.createElement(BottomPanel, {
+    buildLog: buildLog,
+    buildErrors: buildErrors,
+    isOpen: isBottomPanelOpen,
+    onToggle: setIsBottomPanelOpen
+  })), /*#__PURE__*/React$1.createElement(PropertiesPanel, {
+    isOpen: isPropertiesOpen,
+    onClose: function onClose() {
+      return setIsPropertiesOpen(false);
+    },
+    appDefinition: appDefinition,
+    onUpdateDefinition: handleUpdateDefinition
+  })));
+};
+
+var CardContainer = styles.styled('div')(function (_ref) {
+  _ref.theme;
+  return {
+    backgroundColor: '#2B2A33',
+    border: '1px solid #6B728040',
+    borderRadius: '12px',
+    padding: '20px',
+    cursor: 'pointer',
+    transition: 'border-color 0.2s, box-shadow 0.2s',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '12px',
+    minHeight: '160px',
+    '&:hover': {
+      borderColor: '#7C3AED',
+      boxShadow: '0 0 0 1px #7C3AED40'
+    }
+  };
+});
+var AppIcon = styles.styled('div')(function (_ref2) {
+  var $color = _ref2.$color;
+  return {
+    width: '40px',
+    height: '40px',
+    borderRadius: '10px',
+    backgroundColor: $color || '#7C3AED20',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: '20px'
+  };
+});
+var AppCatalogCard = function AppCatalogCard(_ref3) {
+  var _app$manifest;
+  var app = _ref3.app,
+    onOpen = _ref3.onOpen,
+    onEdit = _ref3.onEdit,
+    onDelete = _ref3.onDelete,
+    onPin = _ref3.onPin,
+    onFavorite = _ref3.onFavorite,
+    preference = _ref3.preference;
+  var _useState = React$1.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    anchorEl = _useState2[0],
+    setAnchorEl = _useState2[1];
+  var handleMenuOpen = function handleMenuOpen(event) {
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+  };
+  var handleMenuClose = function handleMenuClose() {
+    setAnchorEl(null);
+  };
+  var handleOpen = function handleOpen() {
+    if (onOpen) {
+      onOpen(app);
+    }
+  };
+  var handleEdit = function handleEdit() {
+    handleMenuClose();
+    if (onEdit) {
+      onEdit(app);
+    }
+  };
+  var handleDelete = function handleDelete() {
+    handleMenuClose();
+    if (onDelete) {
+      onDelete(app);
+    }
+  };
+  var isPinnable = (app === null || app === void 0 || (_app$manifest = app.manifest) === null || _app$manifest === void 0 ? void 0 : _app$manifest.pinnable) !== false;
+  var handlePin = function handlePin(event) {
+    event.stopPropagation();
+    if (onPin && isPinnable) {
+      onPin(app, !(preference !== null && preference !== void 0 && preference.is_pinned));
+    }
+  };
+  var handleFavorite = function handleFavorite(event) {
+    event.stopPropagation();
+    if (onFavorite) {
+      onFavorite(app, !(preference !== null && preference !== void 0 && preference.is_favorite));
+    }
+  };
+  return /*#__PURE__*/React$1.createElement(CardContainer, {
+    onClick: handleOpen
+  }, /*#__PURE__*/React$1.createElement(Box, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'flex-start'
+    }
+  }, /*#__PURE__*/React$1.createElement(AppIcon, {
+    $color: app !== null && app !== void 0 && app.icon ? undefined : '#7C3AED20'
+  }, (app === null || app === void 0 ? void 0 : app.icon) || '📱'), /*#__PURE__*/React$1.createElement(Box, {
+    sx: {
+      display: 'flex',
+      gap: '4px'
+    }
+  }, onFavorite && /*#__PURE__*/React$1.createElement(IconButton, {
+    size: "small",
+    onClick: handleFavorite,
+    sx: {
+      color: preference !== null && preference !== void 0 && preference.is_favorite ? '#F59E0B' : '#6B7280'
+    }
+  }, /*#__PURE__*/React$1.createElement(StarIcon, {
+    fontSize: "small"
+  })), onPin && isPinnable && /*#__PURE__*/React$1.createElement(IconButton, {
+    size: "small",
+    onClick: handlePin,
+    sx: {
+      color: preference !== null && preference !== void 0 && preference.is_pinned ? '#7C3AED' : '#6B7280'
+    }
+  }, /*#__PURE__*/React$1.createElement(PushPinIcon, {
+    fontSize: "small"
+  })), /*#__PURE__*/React$1.createElement(IconButton, {
+    size: "small",
+    onClick: handleMenuOpen,
+    sx: {
+      color: '#6B7280'
+    }
+  }, /*#__PURE__*/React$1.createElement(MoreVertIcon, {
+    fontSize: "small"
+  })))), /*#__PURE__*/React$1.createElement(Box, {
+    sx: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React$1.createElement(Typography, {
+    sx: {
+      color: '#EAEAF0',
+      fontWeight: 600,
+      fontSize: '14px',
+      mb: '4px'
+    }
+  }, (app === null || app === void 0 ? void 0 : app.name) || 'Untitled App'), /*#__PURE__*/React$1.createElement(Typography, {
+    sx: {
+      color: '#9CA3AF',
+      fontSize: '12px',
+      lineHeight: 1.4,
+      display: '-webkit-box',
+      WebkitLineClamp: 2,
+      WebkitBoxOrient: 'vertical',
+      overflow: 'hidden'
+    }
+  }, (app === null || app === void 0 ? void 0 : app.description) || 'No description')), (app === null || app === void 0 ? void 0 : app.category) && /*#__PURE__*/React$1.createElement(Box, null, /*#__PURE__*/React$1.createElement(Chip, {
+    label: app.category,
+    size: "small",
+    sx: {
+      backgroundColor: '#7C3AED20',
+      color: '#A78BFA',
+      fontSize: '11px',
+      height: '22px'
+    }
+  })), /*#__PURE__*/React$1.createElement(Menu, {
+    anchorEl: anchorEl,
+    open: Boolean(anchorEl),
+    onClose: handleMenuClose
+  }, /*#__PURE__*/React$1.createElement(MenuItem, {
+    onClick: handleOpen
+  }, "Open"), /*#__PURE__*/React$1.createElement(MenuItem, {
+    onClick: handleEdit
+  }, "Edit in Studio"), /*#__PURE__*/React$1.createElement(MenuItem, {
+    onClick: handleDelete,
+    sx: {
+      color: '#EF4444'
+    }
+  }, "Delete")));
+};
+
+var GridContainer = styles.styled('div')({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))',
+  gap: '16px'
+});
+var EmptyState = styles.styled('div')({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '64px 24px',
+  color: '#9CA3AF',
+  gap: '16px'
+});
+var AppCatalogGrid = function AppCatalogGrid(_ref) {
+  var appDefinitionService = _ref.appDefinitionService,
+    appPreferenceService = _ref.appPreferenceService,
+    onOpenApp = _ref.onOpenApp,
+    onEditApp = _ref.onEditApp,
+    onCreateApp = _ref.onCreateApp,
+    onDeleteApp = _ref.onDeleteApp,
+    onPinApp = _ref.onPinApp,
+    onFavoriteApp = _ref.onFavoriteApp,
+    onPreferencesLoaded = _ref.onPreferencesLoaded,
+    organizationId = _ref.organizationId;
+  var _useState = React$1.useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    apps = _useState2[0],
+    setApps = _useState2[1];
+  var _useState3 = React$1.useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    preferences = _useState4[0],
+    setPreferences = _useState4[1];
+  var _useState5 = React$1.useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    searchQuery = _useState6[0],
+    setSearchQuery = _useState6[1];
+  var _useState7 = React$1.useState('all'),
+    _useState8 = _slicedToArray(_useState7, 2),
+    kindFilter = _useState8[0],
+    setKindFilter = _useState8[1];
+  var _useState9 = React$1.useState(true),
+    _useState0 = _slicedToArray(_useState9, 2),
+    isLoading = _useState0[0],
+    setIsLoading = _useState0[1];
+  var loadApps = React$1.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    var _response$result, queryParams, response, _t;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.p = _context.n) {
+        case 0:
+          if (appDefinitionService) {
+            _context.n = 1;
+            break;
+          }
+          return _context.a(2);
+        case 1:
+          setIsLoading(true);
+          _context.p = 2;
+          queryParams = {
+            queryselector: 'all',
+            exclude_status: 'deleted'
+          };
+          if (organizationId) {
+            queryParams.queryselector = 'organization-id';
+            queryParams.search = organizationId;
+          }
+          _context.n = 3;
+          return appDefinitionService.get(queryParams);
+        case 3:
+          response = _context.v;
+          if (response !== null && response !== void 0 && (_response$result = response.result) !== null && _response$result !== void 0 && _response$result.items) {
+            setApps(response.result.items);
+          }
+          _context.n = 5;
+          break;
+        case 4:
+          _context.p = 4;
+          _t = _context.v;
+          console.error('Failed to load apps:', _t);
+        case 5:
+          _context.p = 5;
+          setIsLoading(false);
+          return _context.f(5);
+        case 6:
+          return _context.a(2);
+      }
+    }, _callee, null, [[2, 4, 5, 6]]);
+  })), [appDefinitionService, organizationId]);
+  var loadPreferences = React$1.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+    var _response$result2, response, prefsMap, _iterator, _step, pref, _t2;
+    return _regenerator().w(function (_context2) {
+      while (1) switch (_context2.p = _context2.n) {
+        case 0:
+          if (appPreferenceService) {
+            _context2.n = 1;
+            break;
+          }
+          return _context2.a(2);
+        case 1:
+          _context2.p = 1;
+          _context2.n = 2;
+          return appPreferenceService.get({
+            queryselector: 'all',
+            exclude_status: 'deleted'
+          });
+        case 2:
+          response = _context2.v;
+          if (response !== null && response !== void 0 && (_response$result2 = response.result) !== null && _response$result2 !== void 0 && _response$result2.items) {
+            prefsMap = {};
+            _iterator = _createForOfIteratorHelper(response.result.items);
+            try {
+              for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                pref = _step.value;
+                prefsMap[pref.app_definition_id] = pref;
+              }
+            } catch (err) {
+              _iterator.e(err);
+            } finally {
+              _iterator.f();
+            }
+            setPreferences(prefsMap);
+            if (onPreferencesLoaded) {
+              onPreferencesLoaded(prefsMap);
+            }
+          }
+          _context2.n = 4;
+          break;
+        case 3:
+          _context2.p = 3;
+          _t2 = _context2.v;
+          console.error('Failed to load preferences:', _t2);
+        case 4:
+          return _context2.a(2);
+      }
+    }, _callee2, null, [[1, 3]]);
+  })), [appPreferenceService, onPreferencesLoaded]);
+  React$1.useEffect(function () {
+    loadApps();
+    loadPreferences();
+  }, [loadApps, loadPreferences]);
+  var filteredApps = apps.filter(function (app) {
+    var _app$manifest, _app$manifest2, _app$name, _app$description, _app$category, _app$slug;
+    var appKind = ((_app$manifest = app.manifest) === null || _app$manifest === void 0 ? void 0 : _app$manifest.kind) || 'workspace';
+    var launcherVisibility = ((_app$manifest2 = app.manifest) === null || _app$manifest2 === void 0 ? void 0 : _app$manifest2.launcher_visibility) || 'visible';
+    if (kindFilter === 'workspace' && appKind !== 'workspace') return false;
+    if (kindFilter === 'utility' && appKind !== 'utility') return false;
+    if (kindFilter === 'all' && launcherVisibility === 'system') return false;
+    if (!searchQuery) return true;
+    var query = searchQuery.toLowerCase();
+    return ((_app$name = app.name) === null || _app$name === void 0 ? void 0 : _app$name.toLowerCase().includes(query)) || ((_app$description = app.description) === null || _app$description === void 0 ? void 0 : _app$description.toLowerCase().includes(query)) || ((_app$category = app.category) === null || _app$category === void 0 ? void 0 : _app$category.toLowerCase().includes(query)) || ((_app$slug = app.slug) === null || _app$slug === void 0 ? void 0 : _app$slug.toLowerCase().includes(query));
+  });
+  var handleCreateApp = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
+      return _regenerator().w(function (_context3) {
+        while (1) switch (_context3.n) {
+          case 0:
+            if (!onCreateApp) {
+              _context3.n = 2;
+              break;
+            }
+            _context3.n = 1;
+            return onCreateApp();
+          case 1:
+            loadApps();
+          case 2:
+            return _context3.a(2);
+        }
+      }, _callee3);
+    }));
+    return function handleCreateApp() {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+  var handleDeleteApp = /*#__PURE__*/function () {
+    var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(app) {
+      return _regenerator().w(function (_context4) {
+        while (1) switch (_context4.n) {
+          case 0:
+            if (!onDeleteApp) {
+              _context4.n = 2;
+              break;
+            }
+            _context4.n = 1;
+            return onDeleteApp(app);
+          case 1:
+            loadApps();
+          case 2:
+            return _context4.a(2);
+        }
+      }, _callee4);
+    }));
+    return function handleDeleteApp(_x) {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+  var handlePinApp = /*#__PURE__*/function () {
+    var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(app, isPinned) {
+      return _regenerator().w(function (_context5) {
+        while (1) switch (_context5.n) {
+          case 0:
+            if (!onPinApp) {
+              _context5.n = 2;
+              break;
+            }
+            _context5.n = 1;
+            return onPinApp(app, isPinned);
+          case 1:
+            loadPreferences();
+          case 2:
+            return _context5.a(2);
+        }
+      }, _callee5);
+    }));
+    return function handlePinApp(_x2, _x3) {
+      return _ref6.apply(this, arguments);
+    };
+  }();
+  var handleFavoriteApp = /*#__PURE__*/function () {
+    var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(app, isFavorite) {
+      return _regenerator().w(function (_context6) {
+        while (1) switch (_context6.n) {
+          case 0:
+            if (!onFavoriteApp) {
+              _context6.n = 2;
+              break;
+            }
+            _context6.n = 1;
+            return onFavoriteApp(app, isFavorite);
+          case 1:
+            loadPreferences();
+          case 2:
+            return _context6.a(2);
+        }
+      }, _callee6);
+    }));
+    return function handleFavoriteApp(_x4, _x5) {
+      return _ref7.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/React$1.createElement(Box, null, /*#__PURE__*/React$1.createElement(Tabs, {
+    value: kindFilter,
+    onChange: function onChange(e, value) {
+      return setKindFilter(value);
+    },
+    sx: {
+      mb: 2,
+      minHeight: '36px',
+      '& .MuiTab-root': {
+        minHeight: '36px',
+        textTransform: 'none',
+        color: '#9CA3AF',
+        fontSize: '13px',
+        '&.Mui-selected': {
+          color: '#A78BFA'
+        }
+      },
+      '& .MuiTabs-indicator': {
+        backgroundColor: '#7C3AED'
+      }
+    }
+  }, /*#__PURE__*/React$1.createElement(Tab, {
+    label: "All Apps",
+    value: "all"
+  }), /*#__PURE__*/React$1.createElement(Tab, {
+    label: "Workspaces",
+    value: "workspace"
+  }), /*#__PURE__*/React$1.createElement(Tab, {
+    label: "Utilities",
+    value: "utility"
+  })), /*#__PURE__*/React$1.createElement(Box, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      mb: 3
+    }
+  }, /*#__PURE__*/React$1.createElement(TextField, {
+    placeholder: "Search apps...",
+    size: "small",
+    value: searchQuery,
+    onChange: function onChange(e) {
+      return setSearchQuery(e.target.value);
+    },
+    InputProps: {
+      startAdornment: /*#__PURE__*/React$1.createElement(InputAdornment, {
+        position: "start"
+      }, /*#__PURE__*/React$1.createElement(SearchIcon, {
+        sx: {
+          color: '#6B7280'
+        }
+      }))
+    },
+    sx: {
+      width: '320px',
+      '& .MuiOutlinedInput-root': {
+        backgroundColor: '#1F1E26',
+        color: '#EAEAF0',
+        borderRadius: '8px',
+        '& fieldset': {
+          borderColor: '#6B728040'
+        },
+        '&:hover fieldset': {
+          borderColor: '#7C3AED'
+        },
+        '&.Mui-focused fieldset': {
+          borderColor: '#7C3AED'
+        }
+      }
+    }
+  }), onCreateApp && /*#__PURE__*/React$1.createElement(Button, {
+    variant: "contained",
+    startIcon: /*#__PURE__*/React$1.createElement(AddIcon, null),
+    onClick: handleCreateApp,
+    sx: {
+      backgroundColor: '#7C3AED',
+      '&:hover': {
+        backgroundColor: '#6D28D9'
+      },
+      textTransform: 'none',
+      borderRadius: '8px'
+    }
+  }, "New App")), isLoading ? /*#__PURE__*/React$1.createElement(Box, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'center',
+      py: 8
+    }
+  }, /*#__PURE__*/React$1.createElement(CircularProgress, {
+    sx: {
+      color: '#7C3AED'
+    }
+  })) : filteredApps.length === 0 ? /*#__PURE__*/React$1.createElement(EmptyState, null, /*#__PURE__*/React$1.createElement(Typography, {
+    sx: {
+      fontSize: '16px',
+      fontWeight: 500
+    }
+  }, searchQuery ? 'No apps match your search' : 'No apps yet'), /*#__PURE__*/React$1.createElement(Typography, {
+    sx: {
+      fontSize: '13px'
+    }
+  }, searchQuery ? 'Try a different search term' : 'Create your first app to get started'), !searchQuery && onCreateApp && /*#__PURE__*/React$1.createElement(Button, {
+    variant: "outlined",
+    startIcon: /*#__PURE__*/React$1.createElement(AddIcon, null),
+    onClick: handleCreateApp,
+    sx: {
+      borderColor: '#7C3AED',
+      color: '#7C3AED',
+      '&:hover': {
+        borderColor: '#6D28D9',
+        backgroundColor: '#7C3AED10'
+      },
+      textTransform: 'none',
+      mt: 1
+    }
+  }, "Create App")) : /*#__PURE__*/React$1.createElement(GridContainer, null, filteredApps.map(function (app) {
+    return /*#__PURE__*/React$1.createElement(AppCatalogCard, {
+      key: app.id,
+      app: app,
+      preference: preferences[app.id],
+      onOpen: onOpenApp,
+      onEdit: onEditApp,
+      onDelete: handleDeleteApp,
+      onPin: onPinApp ? handlePinApp : undefined,
+      onFavorite: onFavoriteApp ? handleFavoriteApp : undefined
+    });
+  })));
+};
+
+var BaseApi = /*#__PURE__*/function () {
+  function BaseApi() {
+    _classCallCheck(this, BaseApi);
+    this.api_key = null;
+    this.client = null;
+    this.serviceEndpoints = {
+      baseUrlProduction: process.env.VERIPASS_PRODUCTION_SERVICE_URL,
+      baseUrlDevelopment: process.env.VERIPASS_DEVELOPMENT_SERVICE_URL,
+      baseUrlLocal: process.env.VERIPASS_LOCAL_SERVICE_URL,
+      get: '',
+      create: '',
+      update: '',
+      "delete": '',
+      patch: '',
+      put: ''
+    };
+    this.settings = {};
+  }
+
+  /**
+   * Initializes and returns an Axios client instance with the necessary headers and configurations.
+   *
+   * @returns {Object} Axios client instance.
+   */
+  return _createClass(BaseApi, [{
+    key: "request",
+    value: function request() {
+      var headers = {
+        Accept: 'application/json'
+      };
+      if (this.api_key) {
+        headers['api-key'] = this.api_key;
+      }
+      this.client = axios.create({
+        baseURL: this.api_url,
+        timeout: 31000,
+        headers: headers
+      });
+      return this.client;
+    }
+  }, {
+    key: "urlBuilder",
+    value: function urlBuilder(_ref) {
+      var _this$settings;
+      var endpoint = _ref.endpoint;
+      var environment = ((_this$settings = this.settings) === null || _this$settings === void 0 ? void 0 : _this$settings.environment) || 'production';
+      var baseUrl = '';
+      switch (environment) {
+        case 'local':
+          baseUrl = this.serviceEndpoints.baseUrlLocal;
+          break;
+        case 'development':
+          baseUrl = this.serviceEndpoints.baseUrlDevelopment;
+          break;
+        case 'production':
+        default:
+          baseUrl = this.serviceEndpoints.baseUrlProduction;
+          break;
+      }
+      return "".concat(baseUrl).concat(endpoint);
+    }
+
+    /**
+     * Serializes a nested object into a query string format.
+     *
+     * @param {Object} obj The object to be serialized.
+     * @param {string} [prefix] Prefix for nested properties in the object.
+     * @returns {string} Serialized query string.
+     */
+  }, {
+    key: "serializerOjectToQueryString",
+    value: function serializerOjectToQueryString(obj, prefix) {
+      if (obj && _typeof(obj) === 'object') {
+        var serializedArr = [];
+        var key = {};
+        for (key in obj) {
+          if (Object.prototype.hasOwnProperty.call(obj, key)) {
+            var k = prefix ? prefix + '[' + key + ']' : key;
+            var value = obj[key] || null;
+            serializedArr.push(value !== null && _typeof(value) === 'object' ? this.serializerOjectToQueryString(value, k) : encodeURIComponent(k) + '=' + encodeURIComponent(value));
+          }
+        }
+        return serializedArr.join('&');
+      }
+    }
+
+    /**
+     * Converts an object into a query string format.
+     *
+     * @param {Object} obj The object to be converted.
+     * @returns {string} Query string starting with '?' or an empty string if the object is not valid.
+     */
+  }, {
+    key: "objectToQueryString",
+    value: function objectToQueryString(obj) {
+      if (obj && _typeof(obj) === 'object') {
+        var result = this.serializerOjectToQueryString(obj);
+        return "?".concat(result);
+      } else {
+        return '';
+      }
+    }
+
+    /**
+     * Execute a query to filter by parameters
+     * @param {Object} payload Provides all information to get an entity by parameters
+     * @param {string} payload.queryselector Is the selector of filter
+     * @param {*} settings Configuration settings for the request
+     * @returns an object to be processed
+     */
+  }, {
+    key: "getByParameters",
+    value: (function () {
+      var _getByParameters = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(payload, settings) {
+        var parameters, endpoint, url, result, _t;
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.p = _context.n) {
+            case 0:
+              _context.p = 0;
+              if (payload) {
+                _context.n = 1;
+                break;
+              }
+              return _context.a(2, null);
+            case 1:
+              if (payload.queryselector) {
+                _context.n = 2;
+                break;
+              }
+              console.error('Provide a query selector to query');
+              return _context.a(2, null);
+            case 2:
+              parameters = this.objectToQueryString(payload);
+              endpoint = this.urlBuilder({
+                endpoint: (settings === null || settings === void 0 ? void 0 : settings.endpoint) || this.serviceEndpoints.get
+              });
+              url = "".concat(endpoint).concat(payload.queryselector).concat(parameters);
+              _context.n = 3;
+              return this.request().get(url);
+            case 3:
+              result = _context.v;
+              return _context.a(2, result.data);
+            case 4:
+              _context.p = 4;
+              _t = _context.v;
+              console.error(_t);
+              return _context.a(2, _t === null || _t === void 0 ? void 0 : _t.body);
+          }
+        }, _callee, this, [[0, 4]]);
+      }));
+      function getByParameters(_x, _x2) {
+        return _getByParameters.apply(this, arguments);
+      }
+      return getByParameters;
+    }()
+    /**
+     * Execute a create query into backend service
+     * @param {*} payload
+     * @param {*} settings Configuration settings for the request
+     * @returns
+     */
+    )
+  }, {
+    key: "create",
+    value: (function () {
+      var _create = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(payload, settings) {
+        var endpoint, result, _error$response, _t2;
+        return _regenerator().w(function (_context2) {
+          while (1) switch (_context2.p = _context2.n) {
+            case 0:
+              _context2.p = 0;
+              if (payload) {
+                _context2.n = 1;
+                break;
+              }
+              return _context2.a(2, null);
+            case 1:
+              endpoint = this.urlBuilder({
+                endpoint: (settings === null || settings === void 0 ? void 0 : settings.endpoint) || this.serviceEndpoints.create
+              });
+              _context2.n = 2;
+              return this.request().post(endpoint, payload);
+            case 2:
+              result = _context2.v;
+              return _context2.a(2, result.data);
+            case 3:
+              _context2.p = 3;
+              _t2 = _context2.v;
+              console.error(_t2);
+              return _context2.a(2, (_t2 === null || _t2 === void 0 || (_error$response = _t2.response) === null || _error$response === void 0 ? void 0 : _error$response.data) || null);
+          }
+        }, _callee2, this, [[0, 3]]);
+      }));
+      function create(_x3, _x4) {
+        return _create.apply(this, arguments);
+      }
+      return create;
+    }()
+    /**
+     * Execute an update query into backend service
+     * @param {*} payload
+     * @param {*} settings Configuration settings for the request
+     * @returns
+     */
+    )
+  }, {
+    key: "update",
+    value: (function () {
+      var _update = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(payload, settings) {
+        var endpoint, result, _t3;
+        return _regenerator().w(function (_context3) {
+          while (1) switch (_context3.p = _context3.n) {
+            case 0:
+              _context3.p = 0;
+              if (payload) {
+                _context3.n = 1;
+                break;
+              }
+              return _context3.a(2, null);
+            case 1:
+              endpoint = this.urlBuilder({
+                endpoint: (settings === null || settings === void 0 ? void 0 : settings.endpoint) || this.serviceEndpoints.update
+              });
+              _context3.n = 2;
+              return this.request().patch(endpoint, payload);
+            case 2:
+              result = _context3.v;
+              return _context3.a(2, result.data);
+            case 3:
+              _context3.p = 3;
+              _t3 = _context3.v;
+              console.error(_t3);
+              return _context3.a(2, _t3 === null || _t3 === void 0 ? void 0 : _t3.body);
+          }
+        }, _callee3, this, [[0, 3]]);
+      }));
+      function update(_x5, _x6) {
+        return _update.apply(this, arguments);
+      }
+      return update;
+    }()
+    /**
+     * Execute a delete query into backend service
+     * @param {*} payload
+     * @param {*} settings Configuration settings for the request
+     * @returns
+     */
+    )
+  }, {
+    key: "delete",
+    value: (function () {
+      var _delete2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(payload, settings) {
+        var endpoint, result, _t4;
+        return _regenerator().w(function (_context4) {
+          while (1) switch (_context4.p = _context4.n) {
+            case 0:
+              _context4.p = 0;
+              if (payload) {
+                _context4.n = 1;
+                break;
+              }
+              return _context4.a(2, null);
+            case 1:
+              endpoint = this.urlBuilder({
+                endpoint: (settings === null || settings === void 0 ? void 0 : settings.endpoint) || this.serviceEndpoints["delete"]
+              });
+              _context4.n = 2;
+              return this.request()["delete"](endpoint, {
+                data: payload
+              });
+            case 2:
+              result = _context4.v;
+              return _context4.a(2, result.data);
+            case 3:
+              _context4.p = 3;
+              _t4 = _context4.v;
+              console.error(_t4);
+              return _context4.a(2, _t4 === null || _t4 === void 0 ? void 0 : _t4.body);
+          }
+        }, _callee4, this, [[0, 3]]);
+      }));
+      function _delete(_x7, _x8) {
+        return _delete2.apply(this, arguments);
+      }
+      return _delete;
+    }()
+    /**
+     * Execute a post query
+     * @param {*} payload Define what data need to be posted
+     * @param {*} settings Configuration settings for the request
+     * @returns
+     */
+    )
+  }, {
+    key: "post",
+    value: (function () {
+      var _post = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(payload, settings) {
+        var endpoint, result, _error$response2, _t5;
+        return _regenerator().w(function (_context5) {
+          while (1) switch (_context5.p = _context5.n) {
+            case 0:
+              _context5.p = 0;
+              if (payload) {
+                _context5.n = 1;
+                break;
+              }
+              return _context5.a(2, null);
+            case 1:
+              endpoint = this.urlBuilder({
+                endpoint: (settings === null || settings === void 0 ? void 0 : settings.endpoint) || this.serviceEndpoints.post
+              });
+              _context5.n = 2;
+              return this.request().post(endpoint, payload);
+            case 2:
+              result = _context5.v;
+              return _context5.a(2, result.data);
+            case 3:
+              _context5.p = 3;
+              _t5 = _context5.v;
+              console.error(_t5);
+              return _context5.a(2, _t5 === null || _t5 === void 0 || (_error$response2 = _t5.response) === null || _error$response2 === void 0 ? void 0 : _error$response2.data);
+          }
+        }, _callee5, this, [[0, 3]]);
+      }));
+      function post(_x9, _x0) {
+        return _post.apply(this, arguments);
+      }
+      return post;
+    }()
+    /**
+     * Execute a put query
+     * @param {*} payload Define what data need to be posted
+     * @param {*} settings Configuration settings for the request
+     * @returns
+     */
+    )
+  }, {
+    key: "put",
+    value: (function () {
+      var _put = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(payload, settings) {
+        var endpoint, result, _error$response3, _t6;
+        return _regenerator().w(function (_context6) {
+          while (1) switch (_context6.p = _context6.n) {
+            case 0:
+              _context6.p = 0;
+              if (payload) {
+                _context6.n = 1;
+                break;
+              }
+              return _context6.a(2, null);
+            case 1:
+              endpoint = this.urlBuilder({
+                endpoint: (settings === null || settings === void 0 ? void 0 : settings.endpoint) || this.serviceEndpoints.put
+              });
+              _context6.n = 2;
+              return this.request().put(endpoint, payload);
+            case 2:
+              result = _context6.v;
+              return _context6.a(2, result.data);
+            case 3:
+              _context6.p = 3;
+              _t6 = _context6.v;
+              console.error(_t6);
+              return _context6.a(2, _t6 === null || _t6 === void 0 || (_error$response3 = _t6.response) === null || _error$response3 === void 0 ? void 0 : _error$response3.data);
+          }
+        }, _callee6, this, [[0, 3]]);
+      }));
+      function put(_x1, _x10) {
+        return _put.apply(this, arguments);
+      }
+      return put;
+    }()
+    /**
+     * Execute a patch query
+     * @param {*} payload Define what data need to be posted
+     * @param {*} settings Configuration settings for the request
+     * @returns
+     */
+    )
+  }, {
+    key: "patch",
+    value: (function () {
+      var _patch = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7(payload, settings) {
+        var endpoint, result, _error$response4, _t7;
+        return _regenerator().w(function (_context7) {
+          while (1) switch (_context7.p = _context7.n) {
+            case 0:
+              _context7.p = 0;
+              if (payload) {
+                _context7.n = 1;
+                break;
+              }
+              return _context7.a(2, null);
+            case 1:
+              endpoint = this.urlBuilder({
+                endpoint: (settings === null || settings === void 0 ? void 0 : settings.endpoint) || this.serviceEndpoints.patch
+              });
+              _context7.n = 2;
+              return this.request().patch(endpoint, payload);
+            case 2:
+              result = _context7.v;
+              return _context7.a(2, result.data);
+            case 3:
+              _context7.p = 3;
+              _t7 = _context7.v;
+              console.error(_t7);
+              return _context7.a(2, _t7 === null || _t7 === void 0 || (_error$response4 = _t7.response) === null || _error$response4 === void 0 ? void 0 : _error$response4.data);
+          }
+        }, _callee7, this, [[0, 3]]);
+      }));
+      function patch(_x11, _x12) {
+        return _patch.apply(this, arguments);
+      }
+      return patch;
+    }()
+    /**
+     * Execute a query get query
+     * @param {*} payload
+     * @param {*} endpoint
+     * @returns
+     */
+    )
+  }, {
+    key: "get",
+    value: (function () {
+      var _get = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8(payload, settings) {
+        var parameters, endpoint, result, _t8;
+        return _regenerator().w(function (_context8) {
+          while (1) switch (_context8.p = _context8.n) {
+            case 0:
+              _context8.p = 0;
+              if (payload) {
+                _context8.n = 1;
+                break;
+              }
+              return _context8.a(2, null);
+            case 1:
+              parameters = this.objectToQueryString(payload);
+              endpoint = this.urlBuilder({
+                endpoint: (settings === null || settings === void 0 ? void 0 : settings.endpoint) || this.serviceEndpoints.post
+              });
+              _context8.n = 2;
+              return this.request().get("".concat(endpoint).concat(parameters));
+            case 2:
+              result = _context8.v;
+              return _context8.a(2, result.data);
+            case 3:
+              _context8.p = 3;
+              _t8 = _context8.v;
+              console.error(_t8);
+              return _context8.a(2, _t8 === null || _t8 === void 0 ? void 0 : _t8.body);
+          }
+        }, _callee8, this, [[0, 3]]);
+      }));
+      function get(_x13, _x14) {
+        return _get.apply(this, arguments);
+      }
+      return get;
+    }())
+  }]);
+}();
+
+var AppEngineAppDefinitionService = /*#__PURE__*/function (_BaseApi) {
+  function AppEngineAppDefinitionService(args) {
+    var _this;
+    _classCallCheck(this, AppEngineAppDefinitionService);
+    _this = _callSuper(this, AppEngineAppDefinitionService, [args]);
+    _this.api_key = (args === null || args === void 0 ? void 0 : args.apiKey) || '';
+    _this.service_uri = {
+      get: '/app-engine/definition',
+      create: '/app-engine/definition',
+      update: '/app-engine/definition',
+      "delete": '/app-engine/definition',
+      createWithScaffold: '/app-engine/definition/scaffold',
+      studioPayload: '/app-engine/definition/studio',
+      catalog: '/app-engine/definition/catalog',
+      fullApp: '/app-engine/definition/full',
+      provision: '/app-engine/definition/provision'
+    };
+    _this.settings = (args === null || args === void 0 ? void 0 : args.settings) || {};
+    var baseUrl = (args === null || args === void 0 ? void 0 : args.baseUrl) || undefined.VITE_LOOM_CLOUD_BACKEND_URL || '';
+    if (baseUrl) {
+      _this.serviceEndpoints.baseUrlProduction = baseUrl;
+      _this.serviceEndpoints.baseUrlDevelopment = baseUrl;
+      _this.serviceEndpoints.baseUrlLocal = baseUrl;
+    }
+    return _this;
+  }
+  _inherits(AppEngineAppDefinitionService, _BaseApi);
+  return _createClass(AppEngineAppDefinitionService, [{
+    key: "createWithScaffold",
+    value: function () {
+      var _createWithScaffold = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(payload) {
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.n) {
+            case 0:
+              return _context.a(2, _superPropGet(AppEngineAppDefinitionService, "post", this, 3)([payload, {
+                endpoint: this.service_uri.createWithScaffold
+              }]));
+          }
+        }, _callee, this);
+      }));
+      function createWithScaffold(_x) {
+        return _createWithScaffold.apply(this, arguments);
+      }
+      return createWithScaffold;
+    }()
+  }, {
+    key: "getStudioPayload",
+    value: function () {
+      var _getStudioPayload = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(payload) {
+        return _regenerator().w(function (_context2) {
+          while (1) switch (_context2.n) {
+            case 0:
+              return _context2.a(2, _superPropGet(AppEngineAppDefinitionService, "get", this, 3)([payload, {
+                endpoint: this.service_uri.studioPayload
+              }]));
+          }
+        }, _callee2, this);
+      }));
+      function getStudioPayload(_x2) {
+        return _getStudioPayload.apply(this, arguments);
+      }
+      return getStudioPayload;
+    }()
+  }, {
+    key: "getCatalog",
+    value: function () {
+      var _getCatalog = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(payload) {
+        return _regenerator().w(function (_context3) {
+          while (1) switch (_context3.n) {
+            case 0:
+              return _context3.a(2, _superPropGet(AppEngineAppDefinitionService, "get", this, 3)([payload, {
+                endpoint: this.service_uri.catalog
+              }]));
+          }
+        }, _callee3, this);
+      }));
+      function getCatalog(_x3) {
+        return _getCatalog.apply(this, arguments);
+      }
+      return getCatalog;
+    }()
+  }, {
+    key: "getFullApp",
+    value: function () {
+      var _getFullApp = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(payload) {
+        return _regenerator().w(function (_context4) {
+          while (1) switch (_context4.n) {
+            case 0:
+              return _context4.a(2, _superPropGet(AppEngineAppDefinitionService, "get", this, 3)([payload, {
+                endpoint: this.service_uri.fullApp
+              }]));
+          }
+        }, _callee4, this);
+      }));
+      function getFullApp(_x4) {
+        return _getFullApp.apply(this, arguments);
+      }
+      return getFullApp;
+    }()
+  }, {
+    key: "provision",
+    value: function () {
+      var _provision = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(payload) {
+        return _regenerator().w(function (_context5) {
+          while (1) switch (_context5.n) {
+            case 0:
+              return _context5.a(2, _superPropGet(AppEngineAppDefinitionService, "post", this, 3)([payload, {
+                endpoint: this.service_uri.provision
+              }]));
+          }
+        }, _callee5, this);
+      }));
+      function provision(_x5) {
+        return _provision.apply(this, arguments);
+      }
+      return provision;
+    }()
+  }]);
+}(BaseApi);
+
+var AppEngineAppVersionService = /*#__PURE__*/function (_BaseApi) {
+  function AppEngineAppVersionService(args) {
+    var _this;
+    _classCallCheck(this, AppEngineAppVersionService);
+    _this = _callSuper(this, AppEngineAppVersionService, [args]);
+    _this.api_key = (args === null || args === void 0 ? void 0 : args.apiKey) || '';
+    _this.service_uri = {
+      get: '/app-engine/version',
+      create: '/app-engine/version',
+      update: '/app-engine/version',
+      "delete": '/app-engine/version',
+      publish: '/app-engine/version/publish',
+      activate: '/app-engine/version/activate'
+    };
+    _this.settings = (args === null || args === void 0 ? void 0 : args.settings) || {};
+    var baseUrl = (args === null || args === void 0 ? void 0 : args.baseUrl) || undefined.VITE_LOOM_CLOUD_BACKEND_URL || '';
+    if (baseUrl) {
+      _this.serviceEndpoints.baseUrlProduction = baseUrl;
+      _this.serviceEndpoints.baseUrlDevelopment = baseUrl;
+      _this.serviceEndpoints.baseUrlLocal = baseUrl;
+    }
+    return _this;
+  }
+  _inherits(AppEngineAppVersionService, _BaseApi);
+  return _createClass(AppEngineAppVersionService, [{
+    key: "publish",
+    value: function () {
+      var _publish = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(payload) {
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.n) {
+            case 0:
+              return _context.a(2, _superPropGet(AppEngineAppVersionService, "post", this, 3)([payload, {
+                endpoint: this.service_uri.publish
+              }]));
+          }
+        }, _callee, this);
+      }));
+      function publish(_x) {
+        return _publish.apply(this, arguments);
+      }
+      return publish;
+    }()
+  }, {
+    key: "activate",
+    value: function () {
+      var _activate = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(payload) {
+        return _regenerator().w(function (_context2) {
+          while (1) switch (_context2.n) {
+            case 0:
+              return _context2.a(2, _superPropGet(AppEngineAppVersionService, "patch", this, 3)([payload, {
+                endpoint: this.service_uri.activate
+              }]));
+          }
+        }, _callee2, this);
+      }));
+      function activate(_x2) {
+        return _activate.apply(this, arguments);
+      }
+      return activate;
+    }()
+  }]);
+}(BaseApi);
+
+var AppEngineAppFileService = /*#__PURE__*/function (_BaseApi) {
+  function AppEngineAppFileService(args) {
+    var _this;
+    _classCallCheck(this, AppEngineAppFileService);
+    _this = _callSuper(this, AppEngineAppFileService, [args]);
+    _this.api_key = (args === null || args === void 0 ? void 0 : args.apiKey) || '';
+    _this.service_uri = {
+      get: '/app-engine/file',
+      create: '/app-engine/file',
+      update: '/app-engine/file',
+      "delete": '/app-engine/file',
+      content: '/app-engine/file/content',
+      tree: '/app-engine/file/tree',
+      applyChanges: '/app-engine/file/apply-changes'
+    };
+    _this.settings = (args === null || args === void 0 ? void 0 : args.settings) || {};
+    var baseUrl = (args === null || args === void 0 ? void 0 : args.baseUrl) || undefined.VITE_LOOM_CLOUD_BACKEND_URL || '';
+    if (baseUrl) {
+      _this.serviceEndpoints.baseUrlProduction = baseUrl;
+      _this.serviceEndpoints.baseUrlDevelopment = baseUrl;
+      _this.serviceEndpoints.baseUrlLocal = baseUrl;
+    }
+    return _this;
+  }
+  _inherits(AppEngineAppFileService, _BaseApi);
+  return _createClass(AppEngineAppFileService, [{
+    key: "getFileContent",
+    value: function () {
+      var _getFileContent = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(payload) {
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.n) {
+            case 0:
+              return _context.a(2, _superPropGet(AppEngineAppFileService, "get", this, 3)([payload, {
+                endpoint: this.service_uri.content
+              }]));
+          }
+        }, _callee, this);
+      }));
+      function getFileContent(_x) {
+        return _getFileContent.apply(this, arguments);
+      }
+      return getFileContent;
+    }()
+  }, {
+    key: "getFileTree",
+    value: function () {
+      var _getFileTree = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(payload) {
+        return _regenerator().w(function (_context2) {
+          while (1) switch (_context2.n) {
+            case 0:
+              return _context2.a(2, _superPropGet(AppEngineAppFileService, "get", this, 3)([payload, {
+                endpoint: this.service_uri.tree
+              }]));
+          }
+        }, _callee2, this);
+      }));
+      function getFileTree(_x2) {
+        return _getFileTree.apply(this, arguments);
+      }
+      return getFileTree;
+    }()
+  }, {
+    key: "applyChanges",
+    value: function () {
+      var _applyChanges = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(payload) {
+        return _regenerator().w(function (_context3) {
+          while (1) switch (_context3.n) {
+            case 0:
+              return _context3.a(2, _superPropGet(AppEngineAppFileService, "post", this, 3)([payload, {
+                endpoint: this.service_uri.applyChanges
+              }]));
+          }
+        }, _callee3, this);
+      }));
+      function applyChanges(_x3) {
+        return _applyChanges.apply(this, arguments);
+      }
+      return applyChanges;
+    }()
+  }]);
+}(BaseApi);
+
+var AppEngineAppBuildService = /*#__PURE__*/function (_BaseApi) {
+  function AppEngineAppBuildService(args) {
+    var _this;
+    _classCallCheck(this, AppEngineAppBuildService);
+    _this = _callSuper(this, AppEngineAppBuildService, [args]);
+    _this.api_key = (args === null || args === void 0 ? void 0 : args.apiKey) || '';
+    _this.service_uri = {
+      buildSingle: '/app-engine/build/single',
+      buildAll: '/app-engine/build/all',
+      buildAndPublish: '/app-engine/build/publish'
+    };
+    _this.settings = (args === null || args === void 0 ? void 0 : args.settings) || {};
+    var baseUrl = (args === null || args === void 0 ? void 0 : args.baseUrl) || undefined.VITE_LOOM_CLOUD_BACKEND_URL || '';
+    if (baseUrl) {
+      _this.serviceEndpoints.baseUrlProduction = baseUrl;
+      _this.serviceEndpoints.baseUrlDevelopment = baseUrl;
+      _this.serviceEndpoints.baseUrlLocal = baseUrl;
+    }
+    return _this;
+  }
+  _inherits(AppEngineAppBuildService, _BaseApi);
+  return _createClass(AppEngineAppBuildService, [{
+    key: "buildSingle",
+    value: function () {
+      var _buildSingle = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(payload) {
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.n) {
+            case 0:
+              return _context.a(2, _superPropGet(AppEngineAppBuildService, "post", this, 3)([payload, {
+                endpoint: this.service_uri.buildSingle
+              }]));
+          }
+        }, _callee, this);
+      }));
+      function buildSingle(_x) {
+        return _buildSingle.apply(this, arguments);
+      }
+      return buildSingle;
+    }()
+  }, {
+    key: "buildAll",
+    value: function () {
+      var _buildAll = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(payload) {
+        return _regenerator().w(function (_context2) {
+          while (1) switch (_context2.n) {
+            case 0:
+              return _context2.a(2, _superPropGet(AppEngineAppBuildService, "post", this, 3)([payload, {
+                endpoint: this.service_uri.buildAll
+              }]));
+          }
+        }, _callee2, this);
+      }));
+      function buildAll(_x2) {
+        return _buildAll.apply(this, arguments);
+      }
+      return buildAll;
+    }()
+  }, {
+    key: "buildAndPublish",
+    value: function () {
+      var _buildAndPublish = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(payload) {
+        return _regenerator().w(function (_context3) {
+          while (1) switch (_context3.n) {
+            case 0:
+              return _context3.a(2, _superPropGet(AppEngineAppBuildService, "post", this, 3)([payload, {
+                endpoint: this.service_uri.buildAndPublish
+              }]));
+          }
+        }, _callee3, this);
+      }));
+      function buildAndPublish(_x3) {
+        return _buildAndPublish.apply(this, arguments);
+      }
+      return buildAndPublish;
+    }()
+  }]);
+}(BaseApi);
+
+var AppEngineAppSessionService = /*#__PURE__*/function (_BaseApi) {
+  function AppEngineAppSessionService(args) {
+    var _this;
+    _classCallCheck(this, AppEngineAppSessionService);
+    _this = _callSuper(this, AppEngineAppSessionService, [args]);
+    _this.api_key = (args === null || args === void 0 ? void 0 : args.apiKey) || '';
+    _this.service_uri = {
+      get: '/app-engine/session',
+      create: '/app-engine/session',
+      update: '/app-engine/session',
+      "delete": '/app-engine/session',
+      open: '/app-engine/session/open',
+      saveDraft: '/app-engine/session/save-draft',
+      submitOutput: '/app-engine/session/submit-output',
+      cancel: '/app-engine/session/cancel'
+    };
+    _this.settings = (args === null || args === void 0 ? void 0 : args.settings) || {};
+    var baseUrl = (args === null || args === void 0 ? void 0 : args.baseUrl) || undefined.VITE_LOOM_CLOUD_BACKEND_URL || '';
+    if (baseUrl) {
+      _this.serviceEndpoints.baseUrlProduction = baseUrl;
+      _this.serviceEndpoints.baseUrlDevelopment = baseUrl;
+      _this.serviceEndpoints.baseUrlLocal = baseUrl;
+    }
+    return _this;
+  }
+  _inherits(AppEngineAppSessionService, _BaseApi);
+  return _createClass(AppEngineAppSessionService, [{
+    key: "open",
+    value: function () {
+      var _open = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(payload) {
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.n) {
+            case 0:
+              return _context.a(2, _superPropGet(AppEngineAppSessionService, "post", this, 3)([payload, {
+                endpoint: this.service_uri.open
+              }]));
+          }
+        }, _callee, this);
+      }));
+      function open(_x) {
+        return _open.apply(this, arguments);
+      }
+      return open;
+    }()
+  }, {
+    key: "saveDraft",
+    value: function () {
+      var _saveDraft = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(payload) {
+        return _regenerator().w(function (_context2) {
+          while (1) switch (_context2.n) {
+            case 0:
+              return _context2.a(2, _superPropGet(AppEngineAppSessionService, "patch", this, 3)([payload, {
+                endpoint: this.service_uri.saveDraft
+              }]));
+          }
+        }, _callee2, this);
+      }));
+      function saveDraft(_x2) {
+        return _saveDraft.apply(this, arguments);
+      }
+      return saveDraft;
+    }()
+  }, {
+    key: "submitOutput",
+    value: function () {
+      var _submitOutput = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(payload) {
+        return _regenerator().w(function (_context3) {
+          while (1) switch (_context3.n) {
+            case 0:
+              return _context3.a(2, _superPropGet(AppEngineAppSessionService, "patch", this, 3)([payload, {
+                endpoint: this.service_uri.submitOutput
+              }]));
+          }
+        }, _callee3, this);
+      }));
+      function submitOutput(_x3) {
+        return _submitOutput.apply(this, arguments);
+      }
+      return submitOutput;
+    }()
+  }, {
+    key: "cancel",
+    value: function () {
+      var _cancel = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(payload) {
+        return _regenerator().w(function (_context4) {
+          while (1) switch (_context4.n) {
+            case 0:
+              return _context4.a(2, _superPropGet(AppEngineAppSessionService, "patch", this, 3)([payload, {
+                endpoint: this.service_uri.cancel
+              }]));
+          }
+        }, _callee4, this);
+      }));
+      function cancel(_x4) {
+        return _cancel.apply(this, arguments);
+      }
+      return cancel;
+    }()
+  }]);
+}(BaseApi);
+
+var AppEngineAppPreferenceService = /*#__PURE__*/function (_BaseApi) {
+  function AppEngineAppPreferenceService(args) {
+    var _this;
+    _classCallCheck(this, AppEngineAppPreferenceService);
+    _this = _callSuper(this, AppEngineAppPreferenceService, [args]);
+    _this.api_key = (args === null || args === void 0 ? void 0 : args.apiKey) || '';
+    _this.service_uri = {
+      get: '/app-engine/preference',
+      create: '/app-engine/preference',
+      update: '/app-engine/preference',
+      "delete": '/app-engine/preference'
+    };
+    _this.settings = (args === null || args === void 0 ? void 0 : args.settings) || {};
+    var baseUrl = (args === null || args === void 0 ? void 0 : args.baseUrl) || undefined.VITE_LOOM_CLOUD_BACKEND_URL || '';
+    if (baseUrl) {
+      _this.serviceEndpoints.baseUrlProduction = baseUrl;
+      _this.serviceEndpoints.baseUrlDevelopment = baseUrl;
+      _this.serviceEndpoints.baseUrlLocal = baseUrl;
+    }
+    return _this;
+  }
+  _inherits(AppEngineAppPreferenceService, _BaseApi);
+  return _createClass(AppEngineAppPreferenceService);
+}(BaseApi);
+
+var AppEngineSDKContext = /*#__PURE__*/React$1.createContext(null);
+var AppEngineSDKProvider = function AppEngineSDKProvider(_ref) {
+  var baseUrl = _ref.baseUrl,
+    children = _ref.children;
+  var services = React$1.useMemo(function () {
+    var config = baseUrl ? {
+      baseUrl: baseUrl
+    } : {};
+    return {
+      appDefinitionService: new AppEngineAppDefinitionService(config),
+      appVersionService: new AppEngineAppVersionService(config),
+      appFileService: new AppEngineAppFileService(config),
+      appBuildService: new AppEngineAppBuildService(config),
+      appSessionService: new AppEngineAppSessionService(config),
+      appPreferenceService: new AppEngineAppPreferenceService(config)
+    };
+  }, [baseUrl]);
+  return /*#__PURE__*/React$1.createElement(AppEngineSDKContext.Provider, {
+    value: services
+  }, children);
+};
+var useAppEngineSDK = function useAppEngineSDK() {
+  var context = React$1.useContext(AppEngineSDKContext);
+  if (!context) {
+    throw new Error('useAppEngineSDK must be used within an AppEngineSDKProvider');
+  }
+  return context;
+};
+
+function useAppStudio(_ref) {
+  var appDefinitionService = _ref.appDefinitionService,
+    appFileService = _ref.appFileService,
+    appVersionService = _ref.appVersionService,
+    appBuildService = _ref.appBuildService;
+  var _useState = React$1.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    appDefinition = _useState2[0],
+    setAppDefinition = _useState2[1];
+  var _useState3 = React$1.useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    fileTree = _useState4[0],
+    setFileTree = _useState4[1];
+  var _useState5 = React$1.useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    openFiles = _useState6[0],
+    setOpenFiles = _useState6[1];
+  var _useState7 = React$1.useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    activeFilePath = _useState8[0],
+    setActiveFilePath = _useState8[1];
+  var _useState9 = React$1.useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    isSaving = _useState0[0],
+    setIsSaving = _useState0[1];
+  var _useState1 = React$1.useState(null),
+    _useState10 = _slicedToArray(_useState1, 2),
+    buildStatus = _useState10[0],
+    setBuildStatus = _useState10[1];
+  var _useState11 = React$1.useState(''),
+    _useState12 = _slicedToArray(_useState11, 2),
+    buildLog = _useState12[0],
+    setBuildLog = _useState12[1];
+  var _useState13 = React$1.useState([]),
+    _useState14 = _slicedToArray(_useState13, 2),
+    buildErrors = _useState14[0],
+    setBuildErrors = _useState14[1];
+  var definitionDirtyRef = React$1.useRef(false);
+  var isDirty = openFiles.some(function (f) {
+    return f.isDirty;
+  }) || definitionDirtyRef.current;
+  var loadStudioPayload = React$1.useCallback(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(appDefinitionId) {
+      var response, _t;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.p = _context.n) {
+          case 0:
+            if (!(!appDefinitionService || !appDefinitionId)) {
+              _context.n = 1;
+              break;
+            }
+            return _context.a(2);
+          case 1:
+            _context.p = 1;
+            _context.n = 2;
+            return appDefinitionService.getStudioPayload({
+              id: appDefinitionId
+            });
+          case 2:
+            response = _context.v;
+            if (response !== null && response !== void 0 && response.result) {
+              setAppDefinition(response.result.definition);
+              setFileTree(response.result.file_tree || []);
+            }
+            _context.n = 4;
+            break;
+          case 3:
+            _context.p = 3;
+            _t = _context.v;
+            console.error('Failed to load studio payload:', _t);
+          case 4:
+            return _context.a(2);
+        }
+      }, _callee, null, [[1, 3]]);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [appDefinitionService]);
+  var openFile = React$1.useCallback(/*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(file) {
+      var existing, content, _response$result, response, _t2;
+      return _regenerator().w(function (_context2) {
+        while (1) switch (_context2.p = _context2.n) {
+          case 0:
+            if (!(file.kind === 'folder')) {
+              _context2.n = 1;
+              break;
+            }
+            return _context2.a(2);
+          case 1:
+            existing = openFiles.find(function (f) {
+              return f.path === file.path;
+            });
+            if (!existing) {
+              _context2.n = 2;
+              break;
+            }
+            setActiveFilePath(file.path);
+            return _context2.a(2);
+          case 2:
+            content = file.content;
+            if (!(content === undefined || content === null)) {
+              _context2.n = 6;
+              break;
+            }
+            _context2.p = 3;
+            _context2.n = 4;
+            return appFileService === null || appFileService === void 0 ? void 0 : appFileService.getFileContent({
+              search: file.id
+            });
+          case 4:
+            response = _context2.v;
+            content = (response === null || response === void 0 || (_response$result = response.result) === null || _response$result === void 0 ? void 0 : _response$result.content) || '';
+            _context2.n = 6;
+            break;
+          case 5:
+            _context2.p = 5;
+            _t2 = _context2.v;
+            console.error('Failed to load file content:', _t2);
+            content = '';
+          case 6:
+            setOpenFiles(function (prev) {
+              return [].concat(_toConsumableArray(prev), [_objectSpread2(_objectSpread2({}, file), {}, {
+                content: content,
+                isDirty: false,
+                originalContent: content
+              })]);
+            });
+            setActiveFilePath(file.path);
+          case 7:
+            return _context2.a(2);
+        }
+      }, _callee2, null, [[3, 5]]);
+    }));
+    return function (_x2) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), [openFiles, appFileService]);
+  var updateFileContent = React$1.useCallback(function (filePath, newContent) {
+    setOpenFiles(function (prev) {
+      return prev.map(function (f) {
+        if (f.path !== filePath) return f;
+        return _objectSpread2(_objectSpread2({}, f), {}, {
+          content: newContent,
+          isDirty: newContent !== f.originalContent
+        });
+      });
+    });
+  }, []);
+  var closeFile = React$1.useCallback(function (filePath) {
+    setOpenFiles(function (prev) {
+      var next = prev.filter(function (f) {
+        return f.path !== filePath;
+      });
+      if (filePath === activeFilePath) {
+        var _next$Math$min;
+        var closedIndex = prev.findIndex(function (f) {
+          return f.path === filePath;
+        });
+        setActiveFilePath(((_next$Math$min = next[Math.min(closedIndex, next.length - 1)]) === null || _next$Math$min === void 0 ? void 0 : _next$Math$min.path) || null);
+      }
+      return next;
+    });
+  }, [activeFilePath]);
+  var save = React$1.useCallback(/*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(appDefinitionId) {
+      var dirtyFiles, _t3;
+      return _regenerator().w(function (_context3) {
+        while (1) switch (_context3.p = _context3.n) {
+          case 0:
+            if (appFileService) {
+              _context3.n = 1;
+              break;
+            }
+            return _context3.a(2);
+          case 1:
+            setIsSaving(true);
+            _context3.p = 2;
+            dirtyFiles = openFiles.filter(function (f) {
+              return f.isDirty;
+            });
+            if (!(dirtyFiles.length > 0)) {
+              _context3.n = 4;
+              break;
+            }
+            _context3.n = 3;
+            return appFileService.applyChanges({
+              app_definition_id: appDefinitionId,
+              changes: dirtyFiles.map(function (f) {
+                return {
+                  operation: 'update',
+                  id: f.id,
+                  path: f.path,
+                  content: f.content
+                };
+              })
+            });
+          case 3:
+            setOpenFiles(function (prev) {
+              return prev.map(function (f) {
+                return f.isDirty ? _objectSpread2(_objectSpread2({}, f), {}, {
+                  isDirty: false,
+                  originalContent: f.content
+                }) : f;
+              });
+            });
+          case 4:
+            if (!(definitionDirtyRef.current && appDefinitionService)) {
+              _context3.n = 6;
+              break;
+            }
+            _context3.n = 5;
+            return appDefinitionService.update(appDefinition);
+          case 5:
+            definitionDirtyRef.current = false;
+          case 6:
+            _context3.n = 8;
+            break;
+          case 7:
+            _context3.p = 7;
+            _t3 = _context3.v;
+            console.error('Failed to save:', _t3);
+          case 8:
+            _context3.p = 8;
+            setIsSaving(false);
+            return _context3.f(8);
+          case 9:
+            return _context3.a(2);
+        }
+      }, _callee3, null, [[2, 7, 8, 9]]);
+    }));
+    return function (_x3) {
+      return _ref4.apply(this, arguments);
+    };
+  }(), [openFiles, appFileService, appDefinitionService, appDefinition]);
+  var build = React$1.useCallback(/*#__PURE__*/function () {
+    var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(appDefinitionId) {
+      var _response$result2, response, _t4;
+      return _regenerator().w(function (_context4) {
+        while (1) switch (_context4.p = _context4.n) {
+          case 0:
+            if (appBuildService) {
+              _context4.n = 1;
+              break;
+            }
+            return _context4.a(2);
+          case 1:
+            setBuildStatus('building');
+            setBuildLog('');
+            setBuildErrors([]);
+            _context4.p = 2;
+            _context4.n = 3;
+            return appBuildService.build({
+              app_definition_id: appDefinitionId,
+              organization_id: appDefinition === null || appDefinition === void 0 ? void 0 : appDefinition.organization_id
+            });
+          case 3:
+            response = _context4.v;
+            setBuildStatus(response !== null && response !== void 0 && response.result ? 'success' : 'failed');
+            setBuildLog((response === null || response === void 0 || (_response$result2 = response.result) === null || _response$result2 === void 0 ? void 0 : _response$result2.build_log) || '');
+            _context4.n = 5;
+            break;
+          case 4:
+            _context4.p = 4;
+            _t4 = _context4.v;
+            setBuildStatus('failed');
+            setBuildErrors([_t4.message]);
+          case 5:
+            return _context4.a(2);
+        }
+      }, _callee4, null, [[2, 4]]);
+    }));
+    return function (_x4) {
+      return _ref5.apply(this, arguments);
+    };
+  }(), [appBuildService, appDefinition]);
+  var publish = React$1.useCallback(/*#__PURE__*/function () {
+    var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(appDefinitionId) {
+      var _t5;
+      return _regenerator().w(function (_context5) {
+        while (1) switch (_context5.p = _context5.n) {
+          case 0:
+            if (appVersionService) {
+              _context5.n = 1;
+              break;
+            }
+            return _context5.a(2);
+          case 1:
+            _context5.p = 1;
+            _context5.n = 2;
+            return appVersionService.publish({
+              app_definition_id: appDefinitionId
+            });
+          case 2:
+            _context5.n = 4;
+            break;
+          case 3:
+            _context5.p = 3;
+            _t5 = _context5.v;
+            console.error('Failed to publish:', _t5);
+          case 4:
+            return _context5.a(2);
+        }
+      }, _callee5, null, [[1, 3]]);
+    }));
+    return function (_x5) {
+      return _ref6.apply(this, arguments);
+    };
+  }(), [appVersionService]);
+  var updateDefinition = React$1.useCallback(function (updated) {
+    setAppDefinition(updated);
+    definitionDirtyRef.current = true;
+  }, []);
+  return {
+    appDefinition: appDefinition,
+    fileTree: fileTree,
+    openFiles: openFiles,
+    activeFilePath: activeFilePath,
+    isSaving: isSaving,
+    isDirty: isDirty,
+    buildStatus: buildStatus,
+    buildLog: buildLog,
+    buildErrors: buildErrors,
+    setActiveFilePath: setActiveFilePath,
+    loadStudioPayload: loadStudioPayload,
+    openFile: openFile,
+    updateFileContent: updateFileContent,
+    closeFile: closeFile,
+    save: save,
+    build: build,
+    publish: publish,
+    updateDefinition: updateDefinition
+  };
+}
+
+function useAppRuntime(_ref) {
+  var appSessionService = _ref.appSessionService;
+  var _useState = React$1.useState('idle'),
+    _useState2 = _slicedToArray(_useState, 2),
+    status = _useState2[0],
+    setStatus = _useState2[1];
+  var _useState3 = React$1.useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    error = _useState4[0],
+    setError = _useState4[1];
+  var _useState5 = React$1.useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    session = _useState6[0],
+    setSession = _useState6[1];
+  var mountRef = React$1.useRef(null);
+  var rootRef = React$1.useRef(null);
+  var blobUrlRef = React$1.useRef(null);
+  var cleanup = React$1.useCallback(function () {
+    if (rootRef.current) {
+      rootRef.current.unmount();
+      rootRef.current = null;
+    }
+    if (blobUrlRef.current) {
+      URL.revokeObjectURL(blobUrlRef.current);
+      blobUrlRef.current = null;
+    }
+  }, []);
+  var openApp = React$1.useCallback(/*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(_ref2) {
+      var appSlug, routePath, launchMode, inputPayload, onSubmitOutput, onClose, onNavigate, _version$build_artifa, response, _response$result, sessionData, version, entryFile, blob, module, AppComponent, sdk, _t;
+      return _regenerator().w(function (_context3) {
+        while (1) switch (_context3.p = _context3.n) {
+          case 0:
+            appSlug = _ref2.appSlug, routePath = _ref2.routePath, launchMode = _ref2.launchMode, inputPayload = _ref2.inputPayload, onSubmitOutput = _ref2.onSubmitOutput, onClose = _ref2.onClose, onNavigate = _ref2.onNavigate;
+            if (!(!appSessionService || !appSlug)) {
+              _context3.n = 1;
+              break;
+            }
+            return _context3.a(2);
+          case 1:
+            cleanup();
+            setStatus('loading');
+            setError(null);
+            _context3.p = 2;
+            _context3.n = 3;
+            return appSessionService.open({
+              app_slug: appSlug,
+              route_path: routePath || '/',
+              launch_mode: launchMode || 'fullscreen',
+              input_payload: inputPayload || {}
+            });
+          case 3:
+            response = _context3.v;
+            if (response !== null && response !== void 0 && response.result) {
+              _context3.n = 4;
+              break;
+            }
+            throw new Error((response === null || response === void 0 ? void 0 : response.message) || 'Failed to open session');
+          case 4:
+            _response$result = response.result, sessionData = _response$result.session, version = _response$result.app_version;
+            setSession(sessionData);
+            if (version !== null && version !== void 0 && version.build_artifact) {
+              _context3.n = 5;
+              break;
+            }
+            throw new Error('No build artifact available');
+          case 5:
+            entryFile = Object.keys(version.build_artifact).find(function (key) {
+              return key.endsWith('.js') || key.endsWith('.mjs');
+            });
+            if (!(!entryFile || !((_version$build_artifa = version.build_artifact[entryFile]) !== null && _version$build_artifa !== void 0 && _version$build_artifa.content))) {
+              _context3.n = 6;
+              break;
+            }
+            throw new Error('No entry file found in build artifacts');
+          case 6:
+            blob = new Blob([version.build_artifact[entryFile].content], {
+              type: 'application/javascript'
+            });
+            blobUrlRef.current = URL.createObjectURL(blob);
+            _context3.n = 7;
+            return import(/* @vite-ignore */blobUrlRef.current);
+          case 7:
+            module = _context3.v;
+            AppComponent = module["default"];
+            if (AppComponent) {
+              _context3.n = 8;
+              break;
+            }
+            throw new Error('App module does not export a default component');
+          case 8:
+            sdk = {
+              session: {
+                id: sessionData.id,
+                appId: sessionData.app_definition_id,
+                appSlug: sessionData.app_slug,
+                appVersionId: sessionData.app_version_id,
+                launchMode: sessionData.launch_mode,
+                routePath: sessionData.route_path
+              },
+              input: sessionData.input_payload || inputPayload || {},
+              navigate: function navigate(path) {
+                return onNavigate === null || onNavigate === void 0 ? void 0 : onNavigate(path);
+              },
+              saveDraft: function saveDraft(payload) {
+                return appSessionService === null || appSessionService === void 0 ? void 0 : appSessionService.saveDraft({
+                  id: sessionData.id,
+                  draft_payload: payload
+                });
+              },
+              submitOutput: function () {
+                var _submitOutput = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(payload) {
+                  return _regenerator().w(function (_context) {
+                    while (1) switch (_context.n) {
+                      case 0:
+                        _context.n = 1;
+                        return appSessionService === null || appSessionService === void 0 ? void 0 : appSessionService.submitOutput({
+                          id: sessionData.id,
+                          output_payload: payload
+                        });
+                      case 1:
+                        onSubmitOutput === null || onSubmitOutput === void 0 || onSubmitOutput(payload);
+                      case 2:
+                        return _context.a(2);
+                    }
+                  }, _callee);
+                }));
+                function submitOutput(_x2) {
+                  return _submitOutput.apply(this, arguments);
+                }
+                return submitOutput;
+              }(),
+              close: function close() {
+                return onClose === null || onClose === void 0 ? void 0 : onClose();
+              },
+              cancel: function () {
+                var _cancel = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+                  return _regenerator().w(function (_context2) {
+                    while (1) switch (_context2.n) {
+                      case 0:
+                        _context2.n = 1;
+                        return appSessionService === null || appSessionService === void 0 ? void 0 : appSessionService.cancel({
+                          id: sessionData.id
+                        });
+                      case 1:
+                        onClose === null || onClose === void 0 || onClose();
+                      case 2:
+                        return _context2.a(2);
+                    }
+                  }, _callee2);
+                }));
+                function cancel() {
+                  return _cancel.apply(this, arguments);
+                }
+                return cancel;
+              }()
+            };
+            return _context3.a(2, {
+              AppComponent: AppComponent,
+              sdk: sdk
+            });
+          case 9:
+            _context3.p = 9;
+            _t = _context3.v;
+            setError(_t.message);
+            setStatus('error');
+            return _context3.a(2, null);
+        }
+      }, _callee3, null, [[2, 9]]);
+    }));
+    return function (_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), [appSessionService, cleanup]);
+  var mountApp = React$1.useCallback(function (containerRef, AppComponent, sdk) {
+    if (!(containerRef !== null && containerRef !== void 0 && containerRef.current) || !AppComponent) return;
+    cleanup();
+    mountRef.current = containerRef.current;
+    rootRef.current = client.createRoot(containerRef.current);
+    rootRef.current.render(/*#__PURE__*/React.createElement(AppComponent, {
+      sdk: sdk
+    }));
+    setStatus('running');
+  }, [cleanup]);
+  React$1.useEffect(function () {
+    return cleanup;
+  }, [cleanup]);
+  return {
+    status: status,
+    error: error,
+    session: session,
+    openApp: openApp,
+    mountApp: mountApp,
+    cleanup: cleanup
+  };
+}
+
+exports.AppCatalogCardComponent = AppCatalogCard;
+exports.AppCatalogGridComponent = AppCatalogGrid;
+exports.AppEngineAppBuildService = AppEngineAppBuildService;
+exports.AppEngineAppDefinitionService = AppEngineAppDefinitionService;
+exports.AppEngineAppFileService = AppEngineAppFileService;
+exports.AppEngineAppPreferenceService = AppEngineAppPreferenceService;
+exports.AppEngineAppSessionService = AppEngineAppSessionService;
+exports.AppEngineAppVersionService = AppEngineAppVersionService;
+exports.AppEngineClient = AppEngineClient;
+exports.AppEngineSDKProvider = AppEngineSDKProvider;
+exports.AppRuntimeHostComponent = AppRuntimeHost;
+exports.AppStudioComponent = AppStudio;
+exports.useAppEngineSDK = useAppEngineSDK;
+exports.useAppRuntime = useAppRuntime;
+exports.useAppStudio = useAppStudio;
+//# sourceMappingURL=cloud-sdk.cjs.cjs.map