@difizen/libro-jupyter 0.1.29 → 0.1.31

package/es/keybind-instructions/index.less

@@ -7,6 +7,13 @@
   .@{ant-prefix}-input-group-wrapper {
     background-color: var(--mana-libro-filtered-background-color) !important;
     border-radius: 6px;
+    .@{ant-prefix}-input {
+      color: var(--mana-libro-drawer-title-color);
+
+      &::placeholder {
+        color: var(--mana-libro-keybind-tag-text-color);
+      }
+    }
   }
 
   .@{ant-prefix}-input-group-addon {
@@ -19,6 +26,7 @@
 }
 
 .libro-keybind-instructions-drawer {
+  background: var(--mana-libro-popover-background-color) !important;
   .@{ant-prefix}-drawer-content-wrapper {
     box-shadow:
       0 0 16px -8px rgba(0, 0, 0, 8%),
@@ -42,9 +50,6 @@
   .@{ant-prefix}-drawer-mask {
     opacity: 0;
   }
-  .@{ant-prefix}-drawer-content {
-    background: var(--mana-libro-popover-background-color);
-  }
   .@{ant-prefix}-drawer-close {
     color: var(--mana-libro-drawer-close-color);
   }
@@ -135,6 +140,7 @@
 .libro-magic-table {
   .@{ant-prefix}-table-thead > tr > th {
     background: var(--mana-libro-popover-background-color);
+    color: var(--mana-libro-table-title-color);
   }
 
   .@{ant-prefix}-table-tbody > tr.@{ant-prefix}-table-row:hover > td {
@@ -148,7 +154,6 @@
 
   thead tr th {
     height: 30px;
-    color: var(--mana-libro-table-title-color);
     font-weight: 600;
     font-size: 14px;
     font-family: PingFangSC;

package/es/keybind-instructions/keybind-instructions-view.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" resolution-mode="require"/>
-import { LirboContextKey } from '@difizen/libro-core';
+import { LibroContextKey } from '@difizen/libro-core';
 import type { ModalItem, ModalItemProps } from '@difizen/mana-app';
 import type { Disposable } from '@difizen/mana-app';
 import type { DataType } from './keybind-instructions-items.js';
 import './index.less';
 export declare class KeybindInstrutionsService implements Disposable {
-    contextKey: LirboContextKey;
+    contextKey: LibroContextKey;
     isKeybindInstructionsMask: boolean;
     searchCommandModeData: DataType[];
     searchEditModeData: DataType[];

package/es/keybind-instructions/keybind-instructions-view.js

@@ -14,7 +14,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 _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 { LirboContextKey } from '@difizen/libro-core';
+import { LibroContextKey } from '@difizen/libro-core';
 import { inject, singleton } from '@difizen/mana-app';
 import { getOrigin, prop, useInject } from '@difizen/mana-app';
 import { l10n } from '@difizen/mana-l10n';
@@ -47,7 +47,7 @@ var getSearchResult = function getSearchResult(value, sourceData, targetData) {
     }
   });
 };
-export var KeybindInstrutionsService = (_dec = singleton(), _dec2 = inject(LirboContextKey), _dec3 = prop(), _dec4 = prop(), _dec(_class = (_class2 = /*#__PURE__*/function () {
+export var KeybindInstrutionsService = (_dec = singleton(), _dec2 = inject(LibroContextKey), _dec3 = prop(), _dec4 = prop(), _dec(_class = (_class2 = /*#__PURE__*/function () {
   function KeybindInstrutionsService() {
     _classCallCheck(this, KeybindInstrutionsService);
     _initializerDefineProperty(this, "contextKey", _descriptor, this);

package/es/module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../src/module.ts"],"names":[],"mappings":"AA2BA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAgC/C,eAAO,MAAM,kBAAkB,YAyD5B,CAAC"}
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../src/module.ts"],"names":[],"mappings":"AA4BA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAiC/C,eAAO,MAAM,kBAAkB,YA2D5B,CAAC"}

package/es/module.js

@@ -9,6 +9,7 @@ import { DisplayDataOutputModule, ErrorOutputModule, StreamOutputModule } from '
 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";
 import { JupyterCodeCellModel, JupyterCodeCellView } from "./cell/index.js";
@@ -29,7 +30,8 @@ import { LibroJupyterOutputArea } from "./output/index.js";
 import { PlotlyModule } from "./rendermime/index.js";
 import { LibroJupyterColorContribution } from "./theme/index.js";
 import { KernelStatusSelector, LibroJupyterToolbarContribution, SaveFileErrorContribution } from "./toolbar/index.js";
-export var LibroJupyterModule = ManaModule.create().register(JupyterWorkspaceService, LibroJupyterFileService, LibroJupyterCommandContribution, LibroJupyterKeybindingContribution, LibroJupyterToolbarContribution, ConfigAppContribution, SaveFileErrorContribution, LibroKeybindRegistry, LibroJupyterContentContribution, LibroJupyterContentSaveContribution, LibroJupyterOutputArea, LibroJupyterColorContribution, LibroJupyterSettingContribution, JupyterServerLaunchManager, LibroJupyterView, {
+import { LibroWidgetMimeContribution } from "./widget/index.js";
+export var LibroJupyterModule = ManaModule.create().register(JupyterWorkspaceService, LibroJupyterFileService, LibroJupyterCommandContribution, LibroJupyterKeybindingContribution, LibroJupyterToolbarContribution, ConfigAppContribution, SaveFileErrorContribution, LibroKeybindRegistry, LibroJupyterContentContribution, LibroJupyterContentSaveContribution, LibroJupyterOutputArea, LibroJupyterColorContribution, LibroJupyterSettingContribution, JupyterServerLaunchManager, LibroJupyterView, LibroWidgetMimeContribution, {
   token: CellExecutionTimeProvider,
   useValue: CellExecutionTip
 }, {
@@ -49,4 +51,4 @@ export var LibroJupyterModule = ManaModule.create().register(JupyterWorkspaceSer
   useClass: JupyterCodeCellView
 }).dependOn(LibroModule, CodeCellModule, MarkdownCellModule, RawCellModule, StreamOutputModule, ErrorOutputModule, DisplayDataOutputModule, LibroToolbarModule, LibroKernelManageModule, LibroSearchModule, SearchCodeCellModule, LibroAddCellModule, LibroE2EditorModule, CodeMirrorEditorModule,
 // custom module
-LibroBetweenCellModule, KeybindInstructionsModule, PlotlyModule, LibroJupyterFileModule, LibroLanguageClientModule);
+LibroBetweenCellModule, KeybindInstructionsModule, PlotlyModule, LibroJupyterFileModule, LibroLanguageClientModule, WidgetModule);

package/es/widget/index.d.ts

@@ -0,0 +1,3 @@
+export * from './widget-render.js';
+export * from './widget-rendermime-contribution.js';
+//# sourceMappingURL=index.d.ts.map

package/es/widget/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/widget/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,qCAAqC,CAAC"}

package/es/widget/index.js

@@ -0,0 +1,2 @@
+export * from "./widget-render.js";
+export * from "./widget-rendermime-contribution.js";

package/es/widget/index.less

@@ -0,0 +1,7 @@
+.libro-widget-render {
+  margin: 10px 24px;
+}
+
+.libro-widget-render:empty {
+  margin: unset;
+}

package/es/widget/widget-render.d.ts

@@ -0,0 +1,7 @@
+import type { BaseOutputView } from '@difizen/libro-core';
+import React from 'react';
+import './index.less';
+export declare const WidgetRender: React.FC<{
+    model: BaseOutputView;
+}>;
+//# sourceMappingURL=widget-render.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"widget-render.d.ts","sourceRoot":"","sources":["../../src/widget/widget-render.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAK1D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,cAAc,CAAC;AAItB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,KAAK,EAAE,cAAc,CAAA;CAAE,CAoC5D,CAAC"}

package/es/widget/widget-render.js

@@ -0,0 +1,42 @@
+import { RenderMimeRegistry } from '@difizen/libro-rendermime';
+import { LibroWidgetManager } from '@difizen/libro-widget';
+import { getOrigin, useInject, ViewRender } from '@difizen/mana-app';
+import React from 'react';
+import "./index.less";
+import { LibroJupyterModel } from "../libro-jupyter-model.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var WidgetRender = function WidgetRender(props) {
+  var model = props.model;
+  var widgetManager = useInject(LibroWidgetManager);
+  var defaultRenderMime = useInject(RenderMimeRegistry);
+  var libro = model.cell.parent;
+  if (!(libro.model instanceof LibroJupyterModel) || !libro.model.kernelConnection) {
+    return null;
+  }
+  var widgets = widgetManager.getOrCreateWidgets(getOrigin(libro.model.kernelConnection));
+  var mimeType = defaultRenderMime.preferredMimeType(model);
+  if (mimeType) {
+    var model_id = JSON.parse(JSON.stringify(model.data[mimeType])).model_id;
+    if (model_id) {
+      var widgetView = widgets.getModel(model_id);
+      if (widgetView.isCommClosed) {
+        return null;
+      }
+      return /*#__PURE__*/_jsx("div", {
+        className: "libro-widget-render-container",
+        children: /*#__PURE__*/_jsx("div", {
+          className: "libro-widget-render",
+          children: /*#__PURE__*/_jsx(ViewRender, {
+            view: widgetView
+          })
+        })
+      });
+    }
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: "libro-widget-render-container",
+    children: /*#__PURE__*/_jsx("div", {
+      className: "libro-widget-render"
+    })
+  });
+};

package/es/widget/widget-rendermime-contribution.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" resolution-mode="require"/>
+import type { BaseOutputView } from '@difizen/libro-core';
+import { RenderMimeContribution } from '@difizen/libro-rendermime';
+import { LibroWidgetManager } from '@difizen/libro-widget';
+export declare class LibroWidgetMimeContribution implements RenderMimeContribution {
+    libroWidgetManager: LibroWidgetManager;
+    canHandle: (model: BaseOutputView) => number;
+    renderType: string;
+    safe: boolean;
+    mimeTypes: string[];
+    render: import("react").FC<{
+        model: BaseOutputView;
+    }>;
+}
+//# sourceMappingURL=widget-rendermime-contribution.d.ts.map

package/es/widget/widget-rendermime-contribution.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget-rendermime-contribution.d.ts","sourceRoot":"","sources":["../../src/widget/widget-rendermime-contribution.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAO3D,qBACa,2BAA4B,YAAW,sBAAsB;IAC5C,kBAAkB,EAAE,kBAAkB,CAAC;IACnE,SAAS,UAAW,cAAc,YAiBhC;IACF,UAAU,SAAoB;IAC9B,IAAI,UAAQ;IACZ,SAAS,WAAgD;IACzD,MAAM;;OAAgB;CACvB"}

package/es/widget/widget-rendermime-contribution.js

@@ -0,0 +1,49 @@
+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, _class, _class2, _descriptor;
+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 _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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+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 { RenderMimeContribution } from '@difizen/libro-rendermime';
+import { LibroWidgetManager } from '@difizen/libro-widget';
+import { inject, singleton } from '@difizen/mana-app';
+import { LibroJupyterModel } from "../libro-jupyter-model.js";
+import { WidgetRender } from "./widget-render.js";
+export var LibroWidgetMimeContribution = (_dec = singleton({
+  contrib: RenderMimeContribution
+}), _dec2 = inject(LibroWidgetManager), _dec(_class = (_class2 = /*#__PURE__*/_createClass(function LibroWidgetMimeContribution() {
+  var _this = this;
+  _classCallCheck(this, LibroWidgetMimeContribution);
+  _initializerDefineProperty(this, "libroWidgetManager", _descriptor, this);
+  this.canHandle = function (model) {
+    var libroModel = model.cell.parent.model;
+    var rank = 0;
+    if (libroModel instanceof LibroJupyterModel && libroModel.kernelConnection) {
+      var kc = libroModel.kernelConnection;
+      var widget = _this.libroWidgetManager.getOrCreateWidgets(kc);
+      _this.mimeTypes.forEach(function (mimeType) {
+        var mimeData = model.data[mimeType];
+        if (mimeData && mimeData !== null) {
+          var data = JSON.parse(JSON.stringify(mimeData)).model_id;
+          if (Object.keys(model.data).includes(mimeType) && widget.hasModel(data)) {
+            rank = 100;
+          }
+        }
+      });
+    }
+    return rank;
+  };
+  this.renderType = 'widgetRenderer';
+  this.safe = true;
+  this.mimeTypes = ['application/vnd.jupyter.widget-view+json'];
+  this.render = WidgetRender;
+}), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, "libroWidgetManager", [_dec2], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+})), _class2)) || _class);

package/package.json

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

package/src/keybind-instructions/index.less

@@ -7,6 +7,13 @@
   .@{ant-prefix}-input-group-wrapper {
     background-color: var(--mana-libro-filtered-background-color) !important;
     border-radius: 6px;
+    .@{ant-prefix}-input {
+      color: var(--mana-libro-drawer-title-color);
+
+      &::placeholder {
+        color: var(--mana-libro-keybind-tag-text-color);
+      }
+    }
   }
 
   .@{ant-prefix}-input-group-addon {
@@ -19,6 +26,7 @@
 }
 
 .libro-keybind-instructions-drawer {
+  background: var(--mana-libro-popover-background-color) !important;
   .@{ant-prefix}-drawer-content-wrapper {
     box-shadow:
       0 0 16px -8px rgba(0, 0, 0, 8%),
@@ -42,9 +50,6 @@
   .@{ant-prefix}-drawer-mask {
     opacity: 0;
   }
-  .@{ant-prefix}-drawer-content {
-    background: var(--mana-libro-popover-background-color);
-  }
   .@{ant-prefix}-drawer-close {
     color: var(--mana-libro-drawer-close-color);
   }
@@ -135,6 +140,7 @@
 .libro-magic-table {
   .@{ant-prefix}-table-thead > tr > th {
     background: var(--mana-libro-popover-background-color);
+    color: var(--mana-libro-table-title-color);
   }
 
   .@{ant-prefix}-table-tbody > tr.@{ant-prefix}-table-row:hover > td {
@@ -148,7 +154,6 @@
 
   thead tr th {
     height: 30px;
-    color: var(--mana-libro-table-title-color);
     font-weight: 600;
     font-size: 14px;
     font-family: PingFangSC;

package/src/keybind-instructions/keybind-instructions-view.tsx

@@ -1,4 +1,4 @@
-import { LirboContextKey } from '@difizen/libro-core';
+import { LibroContextKey } from '@difizen/libro-core';
 import { inject, singleton } from '@difizen/mana-app';
 import { getOrigin, prop, useInject } from '@difizen/mana-app';
 import type { ModalItem, ModalItemProps } from '@difizen/mana-app';
@@ -49,7 +49,7 @@ const getSearchResult = (
 
 @singleton()
 export class KeybindInstrutionsService implements Disposable {
-  @inject(LirboContextKey) contextKey: LirboContextKey;
+  @inject(LibroContextKey) contextKey: LibroContextKey;
   isKeybindInstructionsMask = false;
   @prop() searchCommandModeData: DataType[] = [];
   @prop() searchEditModeData: DataType[] = [];

package/src/module.ts

@@ -25,6 +25,7 @@ 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';
@@ -56,6 +57,7 @@ import {
   LibroJupyterToolbarContribution,
   SaveFileErrorContribution,
 } from './toolbar/index.js';
+import { LibroWidgetMimeContribution } from './widget/index.js';
 
 export const LibroJupyterModule = ManaModule.create()
   .register(
@@ -74,6 +76,7 @@ export const LibroJupyterModule = ManaModule.create()
     LibroJupyterSettingContribution,
     JupyterServerLaunchManager,
     LibroJupyterView,
+    LibroWidgetMimeContribution,
     {
       token: CellExecutionTimeProvider,
       useValue: CellExecutionTip,
@@ -114,4 +117,5 @@ export const LibroJupyterModule = ManaModule.create()
     PlotlyModule,
     LibroJupyterFileModule,
     LibroLanguageClientModule,
+    WidgetModule,
   );

package/src/widget/index.less

@@ -0,0 +1,7 @@
+.libro-widget-render {
+  margin: 10px 24px;
+}
+
+.libro-widget-render:empty {
+  margin: unset;
+}

package/src/widget/index.ts

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

package/src/widget/widget-render.tsx

@@ -0,0 +1,47 @@
+import type { BaseOutputView } from '@difizen/libro-core';
+import { RenderMimeRegistry } from '@difizen/libro-rendermime';
+import type { IRenderMimeRegistry } from '@difizen/libro-rendermime';
+import { LibroWidgetManager } from '@difizen/libro-widget';
+import { getOrigin, useInject, ViewRender } from '@difizen/mana-app';
+import React from 'react';
+import './index.less';
+
+import { LibroJupyterModel } from '../libro-jupyter-model.js';
+
+export const WidgetRender: React.FC<{ model: BaseOutputView }> = (props: {
+  model: BaseOutputView;
+}) => {
+  const { model } = props;
+
+  const widgetManager = useInject(LibroWidgetManager);
+  const defaultRenderMime = useInject<IRenderMimeRegistry>(RenderMimeRegistry);
+  const libro = model.cell.parent;
+  if (!(libro.model instanceof LibroJupyterModel) || !libro.model.kernelConnection) {
+    return null;
+  }
+  const widgets = widgetManager.getOrCreateWidgets(
+    getOrigin(libro.model.kernelConnection),
+  );
+  const mimeType = defaultRenderMime.preferredMimeType(model);
+  if (mimeType) {
+    const model_id = JSON.parse(JSON.stringify(model.data[mimeType])).model_id;
+    if (model_id) {
+      const widgetView = widgets.getModel(model_id);
+      if (widgetView.isCommClosed) {
+        return null;
+      }
+      return (
+        <div className="libro-widget-render-container">
+          <div className="libro-widget-render">
+            <ViewRender view={widgetView} />
+          </div>
+        </div>
+      );
+    }
+  }
+  return (
+    <div className="libro-widget-render-container">
+      <div className="libro-widget-render" />
+    </div>
+  );
+};

package/src/widget/widget-rendermime-contribution.ts

@@ -0,0 +1,35 @@
+import type { BaseOutputView } from '@difizen/libro-core';
+import { RenderMimeContribution } from '@difizen/libro-rendermime';
+import { LibroWidgetManager } from '@difizen/libro-widget';
+import { inject, singleton } from '@difizen/mana-app';
+
+import { LibroJupyterModel } from '../libro-jupyter-model.js';
+
+import { WidgetRender } from './widget-render.js';
+
+@singleton({ contrib: RenderMimeContribution })
+export class LibroWidgetMimeContribution implements RenderMimeContribution {
+  @inject(LibroWidgetManager) libroWidgetManager: LibroWidgetManager;
+  canHandle = (model: BaseOutputView) => {
+    const libroModel = model.cell.parent.model;
+    let rank = 0;
+    if (libroModel instanceof LibroJupyterModel && libroModel.kernelConnection) {
+      const kc = libroModel.kernelConnection;
+      const widget = this.libroWidgetManager.getOrCreateWidgets(kc);
+      this.mimeTypes.forEach((mimeType) => {
+        const mimeData = model.data[mimeType];
+        if (mimeData && mimeData !== null) {
+          const data = JSON.parse(JSON.stringify(mimeData)).model_id;
+          if (Object.keys(model.data).includes(mimeType) && widget.hasModel(data)) {
+            rank = 100;
+          }
+        }
+      });
+    }
+    return rank;
+  };
+  renderType = 'widgetRenderer';
+  safe = true;
+  mimeTypes = ['application/vnd.jupyter.widget-view+json'];
+  render = WidgetRender;
+}