@difizen/libro-output 0.0.2-alpha.0

package/es/output-utils.d.ts

@@ -0,0 +1,21 @@
+import type { IOutput, PartialJSONObject, PartialJSONValue, ReadonlyPartialJSONObject } from '@difizen/libro-common';
+/**
+ * Get the data from a notebook output.
+ */
+export declare function getData(output: IOutput): PartialJSONObject;
+/**
+ * Get the metadata from an output message.
+ */
+export declare function getMetadata(output: IOutput): PartialJSONObject;
+/**
+ * Get the bundle options given output model options.
+ */
+export declare function getBundleOptions(options: IOutput): {
+    data: IOutput;
+    metadata: PartialJSONObject;
+};
+/**
+ * Extract a value from a JSONObject.
+ */
+export declare function extract(value: ReadonlyPartialJSONObject, key: string): PartialJSONValue | undefined;
+//# sourceMappingURL=output-utils.d.ts.map

package/es/output-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"output-utils.d.ts","sourceRoot":"","sources":["../src/output-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAGV,OAAO,EACP,iBAAiB,EACjB,gBAAgB,EAChB,yBAAyB,EAC1B,MAAM,uBAAuB,CAAC;AAU/B;;GAEG;AACH,wBAAgB,OAAO,CAAC,MAAM,EAAE,OAAO,GAAG,iBAAiB,CAiB1D;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,OAAO,GAAG,iBAAiB,CAQ9D;AACD;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,OAAO;;;EAIhD;AAED;;GAEG;AACH,wBAAgB,OAAO,CACrB,KAAK,EAAE,yBAAyB,EAChC,GAAG,EAAE,MAAM,GACV,gBAAgB,GAAG,SAAS,CAM9B"}

package/es/output-utils.js

@@ -0,0 +1,68 @@
+import { isDisplayData, isDisplayUpdate, isError, isExecuteResult, isPrimitive, isStream } from '@difizen/libro-common';
+
+/**
+ * Get the data from a notebook output.
+ */
+export function getData(output) {
+  var bundle = {};
+  if (isExecuteResult(output) || isDisplayData(output) || isDisplayUpdate(output)) {
+    bundle = output.data;
+  } else if (isStream(output)) {
+    if (output.name === 'stderr') {
+      bundle['application/vnd.jupyter.stderr'] = output.text;
+    } else {
+      bundle['application/vnd.jupyter.stdout'] = output.text;
+    }
+  } else if (isError(output)) {
+    bundle['application/vnd.jupyter.error'] = output;
+    var traceback = output.traceback.join('\n');
+    bundle['application/vnd.jupyter.stderr'] = traceback || "".concat(output.ename, ": ").concat(output.evalue);
+  }
+  return convertBundle(bundle);
+}
+
+/**
+ * Get the metadata from an output message.
+ */
+export function getMetadata(output) {
+  var value = Object.create(null);
+  if (isExecuteResult(output) || isDisplayData(output)) {
+    for (var key in output.metadata) {
+      value[key] = extract(output.metadata, key);
+    }
+  }
+  return value;
+}
+/**
+ * Get the bundle options given output model options.
+ */
+export function getBundleOptions(options) {
+  var data = getData(options);
+  var metadata = getMetadata(options);
+  return {
+    data: data,
+    metadata: metadata
+  };
+}
+
+/**
+ * Extract a value from a JSONObject.
+ */
+export function extract(value, key) {
+  var item = value[key];
+  if (item === undefined || isPrimitive(item)) {
+    return item;
+  }
+  return JSON.parse(JSON.stringify(item));
+}
+
+/**
+ * Convert a mime bundle to mime data.
+ */
+function convertBundle(bundle) {
+  var map = Object.create(null);
+  for (var mimeType in bundle) {
+    map[mimeType] = extract(bundle, mimeType);
+  }
+  return map;
+}

package/es/stream-output/index.d.ts

@@ -0,0 +1,4 @@
+export * from './stream-output-contribution.js';
+export * from './stream-output-model.js';
+export * from './stream-output-module.js';
+//# sourceMappingURL=index.d.ts.map

package/es/stream-output/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stream-output/index.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC;AAChD,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC"}

package/es/stream-output/index.js

@@ -0,0 +1,3 @@
+export * from "./stream-output-contribution.js";
+export * from "./stream-output-model.js";
+export * from "./stream-output-module.js";

package/es/stream-output/stream-output-contribution.d.ts

@@ -0,0 +1,11 @@
+import type { IOutput } from '@difizen/libro-common';
+import type { IOutputOptions } from '@difizen/libro-core';
+import { OutputContribution } from '@difizen/libro-core';
+import { ViewManager } from '@difizen/mana-app';
+import { StreamOutputModel } from './stream-output-model.js';
+export declare class StreamOutputContribution implements OutputContribution {
+    viewManager: ViewManager;
+    canHandle: (output: IOutput) => 100 | 1;
+    factory(output: IOutputOptions): Promise<StreamOutputModel>;
+}
+//# sourceMappingURL=stream-output-contribution.d.ts.map

package/es/stream-output/stream-output-contribution.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stream-output-contribution.d.ts","sourceRoot":"","sources":["../../src/stream-output/stream-output-contribution.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE7D,qBACa,wBAAyB,YAAW,kBAAkB;IAC5C,WAAW,EAAE,WAAW,CAAC;IAC9C,SAAS,WAAY,OAAO,aAK1B;IACF,OAAO,CAAC,MAAM,EAAE,cAAc;CAG/B"}

package/es/stream-output/stream-output-contribution.js

@@ -0,0 +1,40 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+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 _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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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 { OutputContribution } from '@difizen/libro-core';
+import { inject, singleton } from '@difizen/mana-app';
+import { ViewManager } from '@difizen/mana-app';
+import { StreamOutputModel } from "./stream-output-model.js";
+export var StreamOutputContribution = (_dec = singleton({
+  contrib: OutputContribution
+}), _dec2 = inject(ViewManager), _dec(_class = (_class2 = /*#__PURE__*/function () {
+  function StreamOutputContribution() {
+    _classCallCheck(this, StreamOutputContribution);
+    _initializerDefineProperty(this, "viewManager", _descriptor, this);
+    this.canHandle = function (output) {
+      if (output.output_type === 'stream') {
+        return 100;
+      }
+      return 1;
+    };
+  }
+  _createClass(StreamOutputContribution, [{
+    key: "factory",
+    value: function factory(output) {
+      return this.viewManager.getOrCreateView(StreamOutputModel, output);
+    }
+  }]);
+  return StreamOutputContribution;
+}(), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, "viewManager", [_dec2], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+})), _class2)) || _class);

package/es/stream-output/stream-output-model.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" resolution-mode="require"/>
+import { LibroOutputView } from '@difizen/libro-core';
+import type { BaseOutputView, IOutputOptions } from '@difizen/libro-core';
+import '../index.less';
+export declare class StreamOutputModel extends LibroOutputView implements BaseOutputView {
+    constructor(options: IOutputOptions);
+    view: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLDivElement>>;
+    toJSON(): {
+        output_type: string;
+        name: string | number | boolean | Partial<{
+            [key: string]: import("@difizen/libro-common").PartialJSONValue;
+        }> | import("@difizen/libro-common").PartialJSONValue[] | null | undefined;
+        text: string | number | boolean | Partial<{
+            [key: string]: import("@difizen/libro-common").PartialJSONValue;
+        }> | import("@difizen/libro-common").PartialJSONValue[] | string[] | null | undefined;
+    };
+}
+//# sourceMappingURL=stream-output-model.d.ts.map

package/es/stream-output/stream-output-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stream-output-model.d.ts","sourceRoot":"","sources":["../../src/stream-output/stream-output-model.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAa1E,OAAO,eAAe,CAAC;AA0BvB,qBAEa,iBAAkB,SAAQ,eAAgB,YAAW,cAAc;gBAC9C,OAAO,EAAE,cAAc;IAO9C,IAAI,2FAA2B;IAC/B,MAAM;;;;;;;;;CAOhB"}

package/es/stream-output/stream-output-model.js

@@ -0,0 +1,70 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _dec, _dec2, _class;
+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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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); }
+import { LibroOutputView } from '@difizen/libro-core';
+import { RenderMimeRegistry } from '@difizen/libro-rendermime';
+import { inject, transient } from '@difizen/mana-app';
+import { getOrigin, useInject, view, ViewInstance, ViewOption } from '@difizen/mana-app';
+import { forwardRef } from 'react';
+import "../index.less";
+import { getBundleOptions } from "../output-utils.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+var StreamOutputModelRender = /*#__PURE__*/forwardRef(function StreamOutputModelRender(_props, ref) {
+  var output = useInject(ViewInstance);
+  var model = getOrigin(output);
+  var defaultRenderMime = useInject(RenderMimeRegistry);
+  var defaultRenderMimeType = defaultRenderMime.preferredMimeType(model);
+  if (defaultRenderMimeType) {
+    var OutputRender = defaultRenderMime.createRenderer(defaultRenderMimeType, model);
+    var children = /*#__PURE__*/_jsx(OutputRender, {
+      model: model
+    });
+    return /*#__PURE__*/_jsx("div", {
+      ref: ref,
+      className: 'libro-stream-container',
+      children: children
+    });
+  } else {
+    return null;
+  }
+});
+export var StreamOutputModel = (_dec = transient(), _dec2 = view('libro-stream-output-model'), _dec(_class = _dec2(_class = /*#__PURE__*/function (_LibroOutputView) {
+  _inherits(StreamOutputModel, _LibroOutputView);
+  var _super = _createSuper(StreamOutputModel);
+  function StreamOutputModel(options) {
+    var _this;
+    _classCallCheck(this, StreamOutputModel);
+    _this = _super.call(this, options);
+    _this.view = StreamOutputModelRender;
+    var _getBundleOptions = getBundleOptions(options.output),
+      data = _getBundleOptions.data,
+      metadata = _getBundleOptions.metadata;
+    _this.type = options.output.output_type;
+    _this.data = data;
+    _this.metadata = metadata;
+    return _this;
+  }
+  StreamOutputModel = inject(ViewOption)(StreamOutputModel, undefined, 0) || StreamOutputModel;
+  _createClass(StreamOutputModel, [{
+    key: "toJSON",
+    value: function toJSON() {
+      return {
+        output_type: this.raw.output_type,
+        name: this.raw.name,
+        text: this.raw.text
+      };
+    }
+  }]);
+  return StreamOutputModel;
+}(LibroOutputView)) || _class) || _class);

package/es/stream-output/stream-output-module.d.ts

@@ -0,0 +1,3 @@
+import { ManaModule } from '@difizen/mana-app';
+export declare const StreamOutputModule: ManaModule;
+//# sourceMappingURL=stream-output-module.d.ts.map

package/es/stream-output/stream-output-module.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stream-output-module.d.ts","sourceRoot":"","sources":["../../src/stream-output/stream-output-module.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAK/C,eAAO,MAAM,kBAAkB,YAEiB,CAAC"}

package/es/stream-output/stream-output-module.js

@@ -0,0 +1,6 @@
+import { OutputModule } from '@difizen/libro-core';
+import { LibroRenderMimeModule } from '@difizen/libro-rendermime';
+import { ManaModule } from '@difizen/mana-app';
+import { StreamOutputContribution } from "./stream-output-contribution.js";
+import { StreamOutputModel } from "./stream-output-model.js";
+export var StreamOutputModule = ManaModule.create().register(StreamOutputModel, StreamOutputContribution).dependOn(OutputModule, LibroRenderMimeModule);

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@difizen/libro-output",
+  "version": "0.0.2-alpha.0",
+  "description": "",
+  "keywords": [
+    "libro",
+    "notebook"
+  ],
+  "repository": "git@github.com:difizen/libro.git",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "typings": "./es/index.d.ts",
+      "default": "./es/index.js"
+    },
+    "./mock": {
+      "typings": "./es/mock/index.d.ts",
+      "default": "./es/mock/index.js"
+    },
+    "./es/mock": {
+      "typings": "./es/mock/index.d.ts",
+      "default": "./es/mock/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "es/index.js",
+  "module": "es/index.js",
+  "typings": "es/index.d.ts",
+  "files": [
+    "es",
+    "src"
+  ],
+  "dependencies": {
+    "@difizen/libro-common": "^0.0.2-alpha.0",
+    "@difizen/libro-core": "^0.0.2-alpha.0",
+    "@difizen/libro-rendermime": "^0.0.2-alpha.0",
+    "@difizen/mana-app": "alpha",
+    "markdown-it": "^13.0.1"
+  },
+  "peerDependencies": {
+    "antd": "^5.8.6",
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.25",
+    "@types/sanitize-html": "^2.6.2"
+  },
+  "scripts": {
+    "setup": "father build",
+    "build": "father build",
+    "test": ": Note: lint task is delegated to test:* scripts",
+    "test:vitest": "vitest run",
+    "test:jest": "jest",
+    "coverage": ": Note: lint task is delegated to coverage:* scripts",
+    "coverage:vitest": "vitest run --coverage",
+    "coverage:jest": "jest --coverage",
+    "lint": ": Note: lint task is delegated to lint:* scripts",
+    "lint:eslint": "eslint src",
+    "lint:tsc": "tsc --noEmit"
+  }
+}

package/src/display-data-output/display-data-output-contribution.ts

@@ -0,0 +1,24 @@
+import type { IOutput } from '@difizen/libro-common';
+import type { IOutputOptions } from '@difizen/libro-core';
+import { OutputContribution } from '@difizen/libro-core';
+import { inject, singleton } from '@difizen/mana-app';
+import { ViewManager } from '@difizen/mana-app';
+
+import { DisplayDataOutputModel } from './display-data-output-model.js';
+
+@singleton({ contrib: OutputContribution })
+export class DisplayDataOutputContribution implements OutputContribution {
+  @inject(ViewManager) viewManager: ViewManager;
+  canHandle = (output: IOutput) => {
+    if (
+      output.output_type === 'display_data' ||
+      output.output_type === 'execute_result'
+    ) {
+      return 100;
+    }
+    return 1;
+  };
+  factory(output: IOutputOptions) {
+    return this.viewManager.getOrCreateView(DisplayDataOutputModel, output);
+  }
+}

package/src/display-data-output/display-data-output-model.tsx

@@ -0,0 +1,67 @@
+import type { JSONObject } from '@difizen/libro-common';
+import { LibroOutputView } from '@difizen/libro-core';
+import type { BaseOutputView, IOutputOptions } from '@difizen/libro-core';
+import { RenderMimeRegistry } from '@difizen/libro-rendermime';
+import type { IRenderMimeRegistry } from '@difizen/libro-rendermime';
+import {
+  getOrigin,
+  useInject,
+  view,
+  ViewInstance,
+  ViewOption,
+} from '@difizen/mana-app';
+import { inject, transient } from '@difizen/mana-app';
+import { forwardRef } from 'react';
+
+import { getBundleOptions } from '../output-utils.js';
+import '../index.less';
+
+const DisplayDataOutputModelRender = forwardRef<HTMLDivElement>(
+  function DisplayDataOutputModelRender(_props, ref) {
+    const output = useInject<DisplayDataOutputModel>(ViewInstance);
+    const defaultRenderMime = useInject<IRenderMimeRegistry>(RenderMimeRegistry);
+
+    const model = getOrigin(output);
+    const defaultRenderMimeType = defaultRenderMime.preferredMimeType(model);
+    let children = null;
+    if (defaultRenderMimeType) {
+      const OutputRender = defaultRenderMime.createRenderer(
+        defaultRenderMimeType,
+        model,
+      );
+      children = <OutputRender model={model} />;
+    }
+    return (
+      <div ref={ref} className={'libro-display-data-container'}>
+        {children}
+      </div>
+    );
+  },
+);
+@transient()
+@view('libro-display-data-output-model')
+export class DisplayDataOutputModel extends LibroOutputView implements BaseOutputView {
+  constructor(@inject(ViewOption) options: IOutputOptions) {
+    super(options);
+    const { data, metadata } = getBundleOptions(options.output);
+    this.type = options.output.output_type;
+    this.data = data as JSONObject;
+    this.metadata = metadata;
+  }
+  override view = DisplayDataOutputModelRender;
+  override toJSON() {
+    if (this.raw.execution_count !== undefined) {
+      return {
+        output_type: this.raw.output_type,
+        data: this.raw.data,
+        metadata: this.raw.metadata,
+        execution_count: this.raw.execution_count,
+      };
+    }
+    return {
+      output_type: this.raw.output_type,
+      data: this.raw.data,
+      metadata: this.raw.metadata,
+    };
+  }
+}

package/src/display-data-output/display-data-output-module.ts

@@ -0,0 +1,10 @@
+import { OutputModule } from '@difizen/libro-core';
+import { LibroRenderMimeModule } from '@difizen/libro-rendermime';
+import { ManaModule } from '@difizen/mana-app';
+
+import { DisplayDataOutputContribution } from './display-data-output-contribution.js';
+import { DisplayDataOutputModel } from './display-data-output-model.js';
+
+export const DisplayDataOutputModule = ManaModule.create()
+  .register(DisplayDataOutputModel, DisplayDataOutputContribution)
+  .dependOn(OutputModule, LibroRenderMimeModule);

package/src/display-data-output/index.ts

@@ -0,0 +1,3 @@
+export * from './display-data-output-contribution.js';
+export * from './display-data-output-model.js';
+export * from './display-data-output-module.js';

package/src/error-output/error-output-contribution.ts

@@ -0,0 +1,21 @@
+import type { IOutput } from '@difizen/libro-common';
+import type { IOutputOptions } from '@difizen/libro-core';
+import { OutputContribution } from '@difizen/libro-core';
+import { inject, singleton } from '@difizen/mana-app';
+import { ViewManager } from '@difizen/mana-app';
+
+import { ErrorOutputModel } from './error-output-model.js';
+
+@singleton({ contrib: OutputContribution })
+export class ErrorOutputContribution implements OutputContribution {
+  @inject(ViewManager) viewManager: ViewManager;
+  canHandle = (output: IOutput) => {
+    if (output.output_type === 'error') {
+      return 100;
+    }
+    return 1;
+  };
+  factory(output: IOutputOptions) {
+    return this.viewManager.getOrCreateView(ErrorOutputModel, output);
+  }
+}

package/src/error-output/error-output-model.tsx

@@ -0,0 +1,94 @@
+import { defaultSanitizer } from '@difizen/libro-common';
+import type { IError, JSONObject } from '@difizen/libro-common';
+import { LibroOutputView } from '@difizen/libro-core';
+import type { BaseOutputView, IOutputOptions } from '@difizen/libro-core';
+import { RenderMimeRegistry, renderText } from '@difizen/libro-rendermime';
+import type { IRenderMimeRegistry } from '@difizen/libro-rendermime';
+import { inject, transient } from '@difizen/mana-app';
+import {
+  getOrigin,
+  prop,
+  useInject,
+  view,
+  ViewInstance,
+  ViewOption,
+} from '@difizen/mana-app';
+import { Button } from 'antd';
+import { forwardRef, createRef, useEffect } from 'react';
+import '../index.less';
+
+import { getBundleOptions } from '../output-utils.js';
+
+const ErrorOutputModelRender = forwardRef<HTMLDivElement>(
+  function ErrorOutputModelRender(_props, ref) {
+    const output = useInject<ErrorOutputModel>(ViewInstance);
+    const model = getOrigin(output);
+    const source = getOrigin(output).raw as IError;
+    const defaultRenderMime = useInject<IRenderMimeRegistry>(RenderMimeRegistry);
+    const traceback = source.traceback.join('\n');
+    const defaultRenderMimeType = defaultRenderMime.preferredMimeType(model);
+    const streamRef = createRef<HTMLDivElement>();
+
+    useEffect(() => {
+      renderText({
+        host: streamRef.current as HTMLDivElement,
+        sanitizer: defaultSanitizer,
+        source: traceback,
+        mimeType: defaultRenderMimeType || '',
+      });
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const handleShowErrorDetail = () => {
+      output.showErrorDetail = !output.showErrorDetail;
+    };
+
+    return (
+      <div ref={ref} className="libro-error-container">
+        <div className="libro-text-render-container">
+          <div className="libro-error-label libro-text-render">
+            <pre>
+              <span className="ansi-red-fg">{source.ename}</span>
+              {': ' + source.evalue}
+            </pre>
+            <Button
+              className="libro-show-error-detail-button"
+              danger
+              onClick={handleShowErrorDetail}
+            >
+              {output.showErrorDetail ? 'Hide' : 'Show'} error details
+            </Button>
+          </div>
+        </div>
+        <div className="libro-text-render-container">
+          <div
+            className="libro-text-render"
+            ref={streamRef}
+            style={{ display: `${output.showErrorDetail ? 'block' : 'none'} ` }}
+          />
+        </div>
+      </div>
+    );
+  },
+);
+@transient()
+@view('libro-error-output-model')
+export class ErrorOutputModel extends LibroOutputView implements BaseOutputView {
+  constructor(@inject(ViewOption) options: IOutputOptions) {
+    super(options);
+    const { data, metadata } = getBundleOptions(options.output);
+    this.type = options.output.output_type;
+    this.data = data as JSONObject;
+    this.metadata = metadata;
+  }
+  override view = ErrorOutputModelRender;
+  override toJSON() {
+    return {
+      output_type: this.raw.output_type,
+      ename: this.raw.ename,
+      evalue: this.raw.evalue,
+      traceback: this.raw.traceback,
+    };
+  }
+  @prop()
+  showErrorDetail = false;
+}

package/src/error-output/error-output-module.ts

@@ -0,0 +1,10 @@
+import { OutputModule } from '@difizen/libro-core';
+import { LibroRenderMimeModule } from '@difizen/libro-rendermime';
+import { ManaModule } from '@difizen/mana-app';
+
+import { ErrorOutputContribution } from './error-output-contribution.js';
+import { ErrorOutputModel } from './error-output-model.js';
+
+export const ErrorOutputModule = ManaModule.create()
+  .register(ErrorOutputModel, ErrorOutputContribution)
+  .dependOn(OutputModule, LibroRenderMimeModule);

package/src/error-output/index.ts

@@ -0,0 +1,3 @@
+export * from './error-output-contribution.js';
+export * from './error-output-model.js';
+export * from './error-output-module.js';