@difizen/libro-jupyter 0.1.33 → 0.1.35

package/es/widget/widget-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget-view.d.ts","sourceRoot":"","sources":["../../src/widget/widget-view.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAuB,MAAM,uBAAuB,CAAC;AACxF,OAAO,KAAK,EAAE,QAAQ,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAE7E,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAKL,QAAQ,EAGT,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAMnE,OAAO,KAAK,EACV,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,WAAW,EACZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzD,eAAO,MAAM,oBAAoB,0FAIhC,CAAC;AAEF,qBAEa,UAAW,SAAQ,QAAS,YAAW,WAAW;IACpD,IAAI,EAAE,aAAa,CAAwB;IACpD,eAAe,EAAE,eAAe,CAAC;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,QAAQ,EAAE,CAAC,GAAG,EAAE,aAAa,CAAC,aAAa,KAAK,OAAO,CAAC;IAEtC,kBAAkB,EAAE,kBAAkB,CAAC;IAGnE,KAAK,EAAE,UAAU,GAAG,WAAW,CAAsB;IAErD,IAAI,CAAC,EAAE,uBAAuB,CAAC;IAE/B,IAAI,OAAO,6DAKV;IAED,kBAAkB,UAAQ;IAE1B,qBAAqB,CAAC,EAAE,UAAU,CAAC;gBAGb,KAAK,EAAE,gBAAgB,EAClB,eAAe,EAAE,eAAe;IAqC3D,OAAO,CAAC,IAAI,EAAE,QAAQ;IAiBtB;;OAEG;IACH,mBAAmB,QAAO,IAAI,CAE5B;IAEF;;OAEG;IACH,UAAU,IAAI,IAAI;IAelB,cAAc,CAAC,GAAG,EAAE,aAAa,CAAC,aAAa;IAoB/C,WAAW,CAAC,IAAI,UAAQ,GAAG,IAAI;IAItB,WAAW;IAiBpB;;OAEG;IACH,aAAa,CAAC,GAAG,EAAE,aAAa,CAAC,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;IAW5D,gBAAgB,aAEd;IACF;;;;OAIG;IACH,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI;IAUhC;;;OAGG;IACH,MAAM,IAAI,MAAM;IAIhB,UAAU,IAAI,MAAM;IAIpB;;OAEG;IACH,IAAI,SACI,SAAS,cACH,UAAU,YACZ,WAAW,EAAE,GAAG,eAAe,EAAE,wBAM3C;IAEF,IAAI,EAAE,YAAY,CAAC;IACX,OAAO,CAAC,EAAE,QAAQ,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,UAAS;IAErB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B"}

package/es/widget/widget-view.js

@@ -0,0 +1,273 @@
+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); }
+var _dec, _dec2, _dec3, _dec4, _dec5, _class, _class2, _descriptor, _descriptor2, _descriptor3;
+function _initializerDefineProperty(target, property, descriptor, context) { if (!descriptor) return; Object.defineProperty(target, property, { enumerable: descriptor.enumerable, configurable: descriptor.configurable, writable: descriptor.writable, value: descriptor.initializer ? descriptor.initializer.call(context) : void 0 }); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+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 || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) { var desc = {}; Object.keys(descriptor).forEach(function (key) { desc[key] = descriptor[key]; }); desc.enumerable = !!desc.enumerable; desc.configurable = !!desc.configurable; if ('value' in desc || desc.initializer) { desc.writable = true; } desc = decorators.slice().reverse().reduce(function (desc, decorator) { return decorator(target, property, desc) || desc; }, desc); if (context && desc.initializer !== void 0) { desc.value = desc.initializer ? desc.initializer.call(context) : void 0; desc.initializer = undefined; } if (desc.initializer === void 0) { Object.defineProperty(target, property, desc); desc = null; } return desc; }
+function _initializerWarningHelper(descriptor, context) { throw new Error('Decorating class property failed. Please ensure that ' + 'transform-class-properties is enabled and runs after the decorators transform.'); }
+import { ExecutableCellView } from '@difizen/libro-core';
+import { LibroContextKey } from '@difizen/libro-core';
+import { inject, transient, ViewOption, view, BaseView, prop, watch } from '@difizen/mana-app';
+import { forwardRef } from 'react';
+import { LibroJupyterModel } from "../libro-jupyter-model.js";
+import { defaultWidgetState } from "./protocol.js";
+import { LibroWidgetManager } from "./widget-manager.js";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var LibroWidgetComponent = /*#__PURE__*/forwardRef(function LibroWidgetComponent() {
+  return /*#__PURE__*/_jsx(_Fragment, {});
+});
+export var WidgetView = (_dec = transient(), _dec2 = view('libro-widget-view'), _dec3 = inject(LibroWidgetManager), _dec4 = prop(), _dec5 = prop(), _dec(_class = _dec2(_class = (_class2 = /*#__PURE__*/function (_BaseView) {
+  _inherits(WidgetView, _BaseView);
+  var _super = _createSuper(WidgetView);
+  function WidgetView(props, libroContextKey) {
+    var _this;
+    _classCallCheck(this, WidgetView);
+    _this = _super.call(this);
+    _this.view = LibroWidgetComponent;
+    _this.libroContextKey = void 0;
+    _this.widgetsId = void 0;
+    _this._msgHook = void 0;
+    _initializerDefineProperty(_this, "libroWidgetManager", _descriptor, _assertThisInitialized(_this));
+    _initializerDefineProperty(_this, "state", _descriptor2, _assertThisInitialized(_this));
+    _this.cell = void 0;
+    _this.disableCommandMode = true;
+    _this.toDisposeOnMsgChanged = void 0;
+    /**
+     * Register a new kernel
+     */
+    _this.handleKernelChanged = function () {
+      _this.setState({
+        msg_id: undefined
+      });
+    };
+    _this.handleCommClosed = function () {
+      _this.isCommClosed = true;
+    };
+    /**
+     * Send a custom msg over the comm.
+     */
+    _this.send = function (data, callbacks, buffers) {
+      if (_this.comm !== undefined) {
+        return _this.comm.send(data, callbacks, {}, buffers);
+      }
+      return undefined;
+    };
+    _this.comm = void 0;
+    _initializerDefineProperty(_this, "widgets", _descriptor3, _assertThisInitialized(_this));
+    _this.model_id = void 0;
+    _this.state_change = void 0;
+    _this.name = void 0;
+    _this.module = void 0;
+    _this.isCommClosed = false;
+    _this.model_module = void 0;
+    _this.model_name = void 0;
+    _this.model_module_version = void 0;
+    _this.view_module = void 0;
+    _this.view_name = void 0;
+    _this.view_module_version = void 0;
+    _this.view_count = void 0;
+    _this.widgetsId = props.widgetsId;
+    var attributes = props.attributes;
+    _this.model_module = attributes._model_module;
+    _this.model_name = attributes._model_name;
+    _this.model_module_version = attributes._model_module_version;
+    _this.view_module = attributes._view_module;
+    _this.view_name = attributes._view_name;
+    _this.view_module_version = attributes._view_module_version;
+    _this.view_count = attributes._view_count;
+    _this._msgHook = function (msg) {
+      _this.addFromMessage(msg);
+      return false;
+    };
+
+    // Attributes should be initialized here, since user initialization may depend on it
+    var comm = props.options.comm;
+    if (comm) {
+      // Remember comm associated with the model.
+      _this.comm = comm;
+
+      // Hook comm messages up to model.
+      comm.onClose(_this.handleCommClosed.bind(_assertThisInitialized(_this)));
+      comm.onMsg(_this.handleCommMsg.bind(_assertThisInitialized(_this)));
+    } else {
+      _this.isCommClosed = false;
+    }
+    _this.model_id = props.options.model_id;
+    _this.state_change = Promise.resolve();
+    _this.setState(attributes);
+    _this.libroContextKey = libroContextKey;
+    return _this;
+  }
+  WidgetView = inject(LibroContextKey)(WidgetView, undefined, 1) || WidgetView;
+  WidgetView = inject(ViewOption)(WidgetView, undefined, 0) || WidgetView;
+  _createClass(WidgetView, [{
+    key: "outputs",
+    get: function get() {
+      if (this.cell) {
+        return this.cell.outputArea;
+      }
+      return undefined;
+    }
+  }, {
+    key: "setCell",
+    value: function setCell(cell) {
+      var _this2 = this;
+      if (ExecutableCellView.is(cell)) {
+        this.cell = cell;
+        if (this.cell) {
+          this.cell.parentReady.then(function () {
+            var _this2$cell;
+            var notebookModel = (_this2$cell = _this2.cell) === null || _this2$cell === void 0 ? void 0 : _this2$cell.parent.model;
+            if (notebookModel instanceof LibroJupyterModel) {
+              watch(notebookModel, 'kernelConnection', _this2.handleKernelChanged);
+            }
+            return;
+          }).catch(console.error);
+        }
+      }
+    }
+  }, {
+    key: "resetMsgId",
+    value:
+    /**
+     * Reset the message id.
+     */
+    function resetMsgId() {
+      var _this$toDisposeOnMsgC, _this$cell;
+      (_this$toDisposeOnMsgC = this.toDisposeOnMsgChanged) === null || _this$toDisposeOnMsgC === void 0 || _this$toDisposeOnMsgC.dispose();
+      var notebookModel = (_this$cell = this.cell) === null || _this$cell === void 0 || (_this$cell = _this$cell.parent) === null || _this$cell === void 0 ? void 0 : _this$cell.model;
+      if (notebookModel instanceof LibroJupyterModel) {
+        var kernel = notebookModel.kernelConnection;
+        if (kernel && this.state['msg_id']) {
+          this.toDisposeOnMsgChanged = kernel.registerMessageHook(this.state['msg_id'], this._msgHook);
+        }
+      }
+    }
+  }, {
+    key: "addFromMessage",
+    value: function addFromMessage(msg) {
+      var msgType = msg.header.msg_type;
+      switch (msgType) {
+        case 'execute_result':
+        case 'display_data':
+        case 'stream':
+        case 'error':
+          {
+            var _this$outputs;
+            var model = msg.content;
+            model.output_type = msgType;
+            (_this$outputs = this.outputs) === null || _this$outputs === void 0 || _this$outputs.add(model);
+            break;
+          }
+        case 'clear_output':
+          this.clearOutput(msg.content.wait);
+          break;
+        default:
+          break;
+      }
+    }
+  }, {
+    key: "clearOutput",
+    value: function clearOutput() {
+      var _this$outputs2;
+      var wait = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      (_this$outputs2 = this.outputs) === null || _this$outputs2 === void 0 || _this$outputs2.clear(wait);
+    }
+  }, {
+    key: "onViewMount",
+    value: function onViewMount() {
+      var _this3 = this;
+      this.widgets = this.libroWidgetManager.getWidgets(this.widgetsId);
+      if (this.container && this.container.current && this.disableCommandMode) {
+        this.container.current.addEventListener('focusin', function () {
+          _this3.libroContextKey.disableCommandMode();
+        });
+        this.container.current.addEventListener('blur', function (e) {
+          var _this3$container;
+          if ((_this3$container = _this3.container) !== null && _this3$container !== void 0 && (_this3$container = _this3$container.current) !== null && _this3$container !== void 0 && _this3$container.contains(e.relatedTarget)) {
+            _this3.libroContextKey.disableCommandMode();
+          } else {
+            _this3.libroContextKey.enableCommandMode();
+          }
+        });
+      }
+    }
+
+    /**
+     * Handle incoming comm msg.
+     */
+  }, {
+    key: "handleCommMsg",
+    value: function handleCommMsg(msg) {
+      var data = msg.content.data;
+      var method = data.method;
+      switch (method) {
+        case 'update':
+        case 'echo_update':
+          this.setState(data.state);
+      }
+      return Promise.resolve();
+    }
+  }, {
+    key: "setState",
+    value:
+    /**
+     * Handle when a widget is updated from the backend.
+     *
+     * This function is meant for internal use only. Values set here will not be propagated on a sync.
+     */
+    function setState(state) {
+      for (var key in state) {
+        var oldMsgId = this.state['msg_id'];
+        this.state[key] = state[key];
+        if (key === 'msg_id' && oldMsgId !== state['msg_id']) {
+          this.resetMsgId();
+        }
+      }
+    }
+
+    /**
+     * Serialize the model.  See the deserialization function at the top of this file
+     * and the kernel-side serializer/deserializer.
+     */
+  }, {
+    key: "toJSON",
+    value: function toJSON() {
+      return this.toModelKey();
+    }
+  }, {
+    key: "toModelKey",
+    value: function toModelKey() {
+      return "IPY_MODEL_".concat(this.model_id);
+    }
+  }]);
+  return WidgetView;
+}(BaseView), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, "libroWidgetManager", [_dec3], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+}), _descriptor2 = _applyDecoratedDescriptor(_class2.prototype, "state", [_dec4], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function initializer() {
+    return defaultWidgetState;
+  }
+}), _descriptor3 = _applyDecoratedDescriptor(_class2.prototype, "widgets", [_dec5], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+})), _class2)) || _class) || _class);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@difizen/libro-jupyter",
-  "version": "0.1.33",
+  "version": "0.1.35",
   "description": "",
   "keywords": [
     "libro"
@@ -31,23 +31,22 @@
     "src"
   ],
   "dependencies": {
-    "@difizen/libro-cofine-editor": "^0.1.33",
-    "@difizen/libro-code-editor": "^0.1.33",
-    "@difizen/libro-code-cell": "^0.1.33",
-    "@difizen/libro-codemirror": "^0.1.33",
-    "@difizen/libro-rendermime": "^0.1.33",
-    "@difizen/libro-common": "^0.1.33",
-    "@difizen/libro-core": "^0.1.33",
-    "@difizen/libro-kernel": "^0.1.33",
-    "@difizen/libro-l10n": "^0.1.33",
-    "@difizen/libro-output": "^0.1.33",
-    "@difizen/libro-search": "^0.1.33",
-    "@difizen/libro-search-code-cell": "^0.1.33",
-    "@difizen/libro-lsp": "^0.1.33",
-    "@difizen/libro-markdown-cell": "^0.1.33",
-    "@difizen/libro-raw-cell": "^0.1.33",
-    "@difizen/libro-language-client": "^0.1.33",
-    "@difizen/libro-widget": "^0.1.33",
+    "@difizen/libro-cofine-editor": "^0.1.35",
+    "@difizen/libro-code-editor": "^0.1.35",
+    "@difizen/libro-code-cell": "^0.1.35",
+    "@difizen/libro-codemirror": "^0.1.35",
+    "@difizen/libro-rendermime": "^0.1.35",
+    "@difizen/libro-common": "^0.1.35",
+    "@difizen/libro-core": "^0.1.35",
+    "@difizen/libro-kernel": "^0.1.35",
+    "@difizen/libro-l10n": "^0.1.35",
+    "@difizen/libro-output": "^0.1.35",
+    "@difizen/libro-search": "^0.1.35",
+    "@difizen/libro-search-code-cell": "^0.1.35",
+    "@difizen/libro-lsp": "^0.1.35",
+    "@difizen/libro-markdown-cell": "^0.1.35",
+    "@difizen/libro-raw-cell": "^0.1.35",
+    "@difizen/libro-language-client": "^0.1.35",
     "@difizen/mana-app": "latest",
     "@difizen/mana-l10n": "latest",
     "@ant-design/colors": "^7.0.0",

package/src/cell/jupyter-code-cell-view.tsx

@@ -39,7 +39,16 @@ const JupyterCodeCellComponent = forwardRef<HTMLDivElement>(
 @transient()
 @view('jupyter-code-cell-view')
 export class JupyterCodeCellView extends LibroCodeCellView {
-  declare parent: LibroJupyterView;
+  protected declare _parent: LibroJupyterView;
+
+  override get parent() {
+    return this._parent;
+  }
+  override set parent(value: LibroJupyterView) {
+    this._parent = value;
+    this.parentDefer.resolve(this.parent);
+  }
+
   override view = JupyterCodeCellComponent;
   declare model: JupyterCodeCellModel;
 

package/src/index.ts

@@ -32,3 +32,4 @@ export * from './toolbar/index.js';
 export * from './file/index.js';
 export * from './libro-jupyter-view.js';
 export * from './config/index.js';
+export * from './widget/index.js';

package/src/module.ts

@@ -25,7 +25,6 @@ import {
 import { RawCellModule } from '@difizen/libro-raw-cell';
 import { LibroSearchModule } from '@difizen/libro-search';
 import { SearchCodeCellModule } from '@difizen/libro-search-code-cell';
-import { WidgetModule } from '@difizen/libro-widget';
 import { ManaModule } from '@difizen/mana-app';
 
 import { LibroBetweenCellModule } from './add-between-cell/index.js';
@@ -57,7 +56,7 @@ import {
   LibroJupyterToolbarContribution,
   SaveFileErrorContribution,
 } from './toolbar/index.js';
-import { LibroWidgetMimeContribution } from './widget/index.js';
+import { WidgetModule } from './widget/index.js';
 
 export const LibroJupyterModule = ManaModule.create()
   .register(
@@ -76,7 +75,6 @@ export const LibroJupyterModule = ManaModule.create()
     LibroJupyterSettingContribution,
     JupyterServerLaunchManager,
     LibroJupyterView,
-    LibroWidgetMimeContribution,
     {
       token: CellExecutionTimeProvider,
       useValue: CellExecutionTip,

package/src/output/libro-jupyter-outputarea.tsx

@@ -6,8 +6,10 @@ import type {
 } from '@difizen/libro-core';
 import { LibroOutputArea } from '@difizen/libro-core';
 import {
+  isClearOutputMsg,
   isDisplayDataMsg,
   isErrorMsg,
+  isExecuteInputMsg,
   isExecuteReplyMsg,
   isExecuteResultMsg,
   isStreamMsg,
@@ -31,58 +33,61 @@ export class LibroJupyterOutputArea extends LibroOutputArea {
     cellModel.msgChangeEmitter.event((msg) => {
       const transientMsg = (msg.content.transient || {}) as nbformat.JSONObject;
       const displayId = transientMsg['display_id'] as string;
-      if (msg.header.msg_type !== 'status') {
-        if (msg.header.msg_type === 'execute_input') {
-          cellModel.executeCount = msg.content.execution_count;
-        }
-        if (
-          isDisplayDataMsg(msg) ||
-          isStreamMsg(msg) ||
-          isErrorMsg(msg) ||
-          isExecuteResultMsg(msg)
-        ) {
-          const output: nbformat.IOutput = {
-            ...msg.content,
-            output_type: msg.header.msg_type,
-          };
-          this.add(output);
-        }
-        if (isUpdateDisplayDataMsg(msg)) {
-          const output = { ...msg.content, output_type: 'display_data' };
-          const targets = this.displayIdMap.get(displayId);
-          if (targets) {
-            for (const index of targets) {
-              this.set(index, output);
-            }
+      if (isExecuteInputMsg(msg)) {
+        cellModel.executeCount = msg.content.execution_count;
+      }
+      if (
+        isDisplayDataMsg(msg) ||
+        isStreamMsg(msg) ||
+        isErrorMsg(msg) ||
+        isExecuteResultMsg(msg)
+      ) {
+        const output: nbformat.IOutput = {
+          ...msg.content,
+          output_type: msg.header.msg_type,
+        };
+        this.add(output);
+      }
+      if (isUpdateDisplayDataMsg(msg)) {
+        const output = { ...msg.content, output_type: 'display_data' };
+        const targets = this.displayIdMap.get(displayId);
+        if (targets) {
+          for (const index of targets) {
+            this.set(index, output);
           }
         }
-        if (displayId && isDisplayDataMsg(msg)) {
-          const targets = this.displayIdMap.get(displayId) || [];
-          targets.push(this.outputs.length);
-          this.displayIdMap.set(displayId, targets);
+      }
+      if (displayId && isDisplayDataMsg(msg)) {
+        const targets = this.displayIdMap.get(displayId) || [];
+        targets.push(this.outputs.length);
+        this.displayIdMap.set(displayId, targets);
+      }
+      //Handle an execute reply message.
+      if (isExecuteReplyMsg(msg)) {
+        const content = msg.content;
+        if (content.status !== 'ok') {
+          return;
         }
-        //Handle an execute reply message.
-        if (isExecuteReplyMsg(msg)) {
-          const content = msg.content;
-          if (content.status !== 'ok') {
-            return;
-          }
-          const payload = content && content.payload;
-          if (!payload || !payload.length) {
-            return;
-          }
-          const pages = payload.filter((i: any) => i.source === 'page');
-          if (!pages.length) {
-            return;
-          }
-          const page = JSON.parse(JSON.stringify(pages[0]));
-          const output: nbformat.IOutput = {
-            output_type: 'display_data',
-            data: page.data as nbformat.IMimeBundle,
-            metadata: {},
-          };
-          this.add(output);
+        const payload = content && content.payload;
+        if (!payload || !payload.length) {
+          return;
+        }
+        const pages = payload.filter((i: any) => i.source === 'page');
+        if (!pages.length) {
+          return;
         }
+        const page = JSON.parse(JSON.stringify(pages[0]));
+        const output: nbformat.IOutput = {
+          output_type: 'display_data',
+          data: page.data as nbformat.IMimeBundle,
+          metadata: {},
+        };
+        this.add(output);
+      }
+
+      if (isClearOutputMsg(msg)) {
+        const wait = msg.content.wait;
+        this.clear(wait);
       }
     });
   }
@@ -94,6 +99,8 @@ export class LibroJupyterOutputArea extends LibroOutputArea {
 
   override clear(wait?: boolean | undefined): void {
     super.clear(wait);
-    this.displayIdMap.clear();
+    if (!wait) {
+      this.displayIdMap.clear();
+    }
   }
 }

package/src/widget/box/contribution.ts

@@ -0,0 +1,29 @@
+import { ViewManager, inject, singleton } from '@difizen/mana-app';
+
+import type { IWidgetViewProps } from '../protocol.js';
+import { WidgetViewContribution } from '../protocol.js';
+
+import { VBoxWidget } from './view.js';
+
+@singleton({ contrib: WidgetViewContribution })
+export class VBoxWidgetContribution implements WidgetViewContribution {
+  @inject(ViewManager) viewManager: ViewManager;
+  canHandle = (attributes: any) => {
+    if (attributes._model_name === 'VBoxModel') {
+      return 100;
+    }
+    if (attributes.__view_name === 'VBoxView') {
+      return 100;
+    }
+    if (attributes._model_name === 'HBoxModel') {
+      return 100;
+    }
+    if (attributes.__view_name === 'HBoxView') {
+      return 100;
+    }
+    return 1;
+  };
+  factory(props: IWidgetViewProps) {
+    return this.viewManager.getOrCreateView(VBoxWidget, props);
+  }
+}

package/src/widget/box/index.less

@@ -0,0 +1,3 @@
+.libro-widget-hbox {
+  display: flex;
+}

package/src/widget/box/index.ts

@@ -0,0 +1,2 @@
+export * from './contribution.js';
+export * from './view.js';

package/src/widget/box/view.tsx

@@ -0,0 +1,112 @@
+import type { CellView } from '@difizen/libro-core';
+import { LibroContextKey } from '@difizen/libro-core';
+import {
+  view,
+  transient,
+  useInject,
+  ViewInstance,
+  prop,
+  inject,
+  ViewOption,
+  ViewRender,
+  getOrigin,
+} from '@difizen/mana-app';
+import { forwardRef } from 'react';
+
+import type { IWidgets, IWidgetViewProps, WidgetState } from '../protocol.js';
+import { defaultWidgetState } from '../protocol.js';
+import { WidgetView } from '../widget-view.js';
+
+import './index.less';
+
+const WidgetRender = (props: {
+  cell?: CellView;
+  widgets: IWidgets | undefined;
+  modelId: string;
+}) => {
+  const { widgets, modelId, cell } = props;
+  if (!widgets) {
+    return null;
+  }
+  let widgetView;
+  try {
+    widgetView = widgets.getModel(modelId);
+  } catch (ex) {
+    //
+  }
+  if (!widgetView) {
+    return null;
+  }
+  if (cell) {
+    widgetView.setCell(getOrigin(cell));
+  }
+  if (widgetView.isCommClosed) {
+    return null;
+  }
+  return (
+    <div className="libro-widget-render-container">
+      <div className="libro-widget-render">
+        <ViewRender view={widgetView} />
+      </div>
+    </div>
+  );
+};
+
+export const LibroWidgetBoxComponent = forwardRef<HTMLDivElement>(
+  function LibroWidgetBoxComponent(props, ref) {
+    const widget = useInject<VBoxWidget>(ViewInstance);
+
+    return (
+      <div className={`libro-widget-box ${widget.getCls()}`} ref={ref}>
+        {widget.state.children.map((modelId) => (
+          <WidgetRender
+            key={modelId}
+            cell={widget.cell}
+            widgets={widget.widgets}
+            modelId={modelId}
+          />
+        ))}
+      </div>
+    );
+  },
+);
+
+interface BoxState extends WidgetState {
+  children: string[];
+  box_style?: string;
+}
+
+@transient()
+@view('libro-widget-box-view')
+export class VBoxWidget extends WidgetView {
+  override view = LibroWidgetBoxComponent;
+
+  @prop()
+  override state: BoxState = {
+    ...defaultWidgetState,
+    children: [],
+  };
+
+  constructor(
+    @inject(ViewOption) props: IWidgetViewProps,
+    @inject(LibroContextKey) libroContextKey: LibroContextKey,
+  ) {
+    super(props, libroContextKey);
+    this.initialize(props);
+  }
+
+  protected initialize(props: IWidgetViewProps): void {
+    const attributes = props.attributes;
+    this.setState(attributes);
+  }
+
+  getCls = () => {
+    if (this.model_name === 'HBoxModel') {
+      return 'libro-widget-hbox';
+    }
+    if (this.model_name === 'VBoxModel') {
+      return 'libro-widget-vbox';
+    }
+    return '';
+  };
+}