@difizen/libro-lab 0.1.3 → 0.1.5

package/es/module.js

@@ -4,6 +4,7 @@ import { TerminalModule } from '@difizen/libro-terminal';
 import { ManaModule, createSlotPreference, RootSlotId, SideTabView, createViewPreference, HeaderArea } from '@difizen/mana-app';
 import { LabConfigAppContribution } from "./config/config-contribution.js";
 import { GithubLinkView } from "./github-link/index.js";
+import { ImageViewerModule } from "./image-viewer/index.js";
 import { KernelManagerView } from "./kernel-manager/index.js";
 import { LibroLabApp } from "./lab-app.js";
 import { ContentBottomTabView } from "./layout/content-bottom-tab-view.js";
@@ -60,4 +61,4 @@ export var LibroLabModule = ManaModule.create().register(LibroLabApp, LibroLabLa
     reveal: true,
     order: 'welcome'
   }
-}), EntryPointView).dependOn(LibroJupyterModule, LibroLabLayoutModule, LibroLabHeaderMenuModule, LibroLabTocModule, LibroPromptCellModule, TerminalModule);
+}), EntryPointView).dependOn(LibroJupyterModule, LibroLabLayoutModule, LibroLabHeaderMenuModule, LibroLabTocModule, LibroPromptCellModule, TerminalModule, ImageViewerModule);

package/es/toc/index.d.ts

@@ -0,0 +1,3 @@
+export * from './libro-toc-panel-view.js';
+export * from './module.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/toc/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,aAAa,CAAC"}

package/es/toc/index.js

@@ -0,0 +1,2 @@
+export * from "./libro-toc-panel-view.js";
+export * from "./module.js";

package/es/welcome/index.d.ts

@@ -1,13 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
-import { ViewManager } from '@difizen/mana-app';
-import { BaseView } from '@difizen/mana-app';
-import { EntryPointView } from './entry-point-view.js';
-import './index.less';
-export declare const WelcomeComponent: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
-export declare class WelcomeView extends BaseView {
-    view: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
-    viewManager: ViewManager;
-    entryPointView: EntryPointView;
-    constructor(viewManager: ViewManager);
-}
+export * from './welcome-view.js';
+export * from './entry-point-view.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/welcome/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAML,WAAW,EAEZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAK7C,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,cAAc,CAAC;AAEtB,eAAO,MAAM,gBAAgB,mFAqB3B,CAAC;AAEH,qBAEa,WAAY,SAAQ,QAAQ;IAC9B,IAAI,oFAAoB;IACjC,WAAW,EAAE,WAAW,CAAC;IACzB,cAAc,EAAE,cAAc,CAAC;gBACE,WAAW,EAAE,WAAW;CAc1D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/welcome/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC"}

package/es/welcome/index.js

@@ -1,70 +1,2 @@
-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;
-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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-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 { ServerConnection } from '@difizen/libro-jupyter';
-import { inject, singleton, useInject, view, ViewInstance, ViewManager, ViewRender } from '@difizen/mana-app';
-import { BaseView } from '@difizen/mana-app';
-import { forwardRef } from 'react';
-import { LayoutService } from "../layout/layout-service.js";
-import { EntryPointView } from "./entry-point-view.js";
-import "./index.less";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export var WelcomeComponent = /*#__PURE__*/forwardRef(function WelcomeComponent() {
-  var instance = useInject(ViewInstance);
-  var layoutService = useInject(LayoutService);
-  var serverConnection = useInject(ServerConnection);
-  return /*#__PURE__*/_jsxs("div", {
-    className: "libro-lab-welcome-page",
-    children: [/*#__PURE__*/_jsx("div", {
-      className: "libro-lab-welcome-page-title",
-      children: "\u6B22\u8FCE\u4F7F\u7528 Notebook \u5DE5\u4F5C\u53F0 \uD83C\uDF89\uD83C\uDF89"
-    }), /*#__PURE__*/_jsxs("div", {
-      className: "libro-lab-welcome-page-server-info",
-      children: [/*#__PURE__*/_jsx("div", {
-        className: "libro-lab-welcome-page-server-info-title",
-        children: "\u670D\u52A1\u8FDE\u63A5\u4FE1\u606F"
-      }), /*#__PURE__*/_jsxs("div", {
-        className: "libro-lab-welcome-page-server-info-item",
-        children: ["BaseURL: ", "".concat(serverConnection.settings.baseUrl)]
-      }), /*#__PURE__*/_jsxs("div", {
-        className: "libro-lab-welcome-page-server-info-item",
-        children: ["WsURL: ", "".concat(serverConnection.settings.wsUrl)]
-      })]
-    }), layoutService.serverSatus === 'success' && /*#__PURE__*/_jsx(ViewRender, {
-      view: instance.entryPointView
-    })]
-  });
-});
-export var WelcomeView = (_dec = singleton(), _dec2 = view('welcome-view'), _dec(_class = _dec2(_class = /*#__PURE__*/function (_BaseView) {
-  _inherits(WelcomeView, _BaseView);
-  var _super = _createSuper(WelcomeView);
-  function WelcomeView(viewManager) {
-    var _this;
-    _classCallCheck(this, WelcomeView);
-    _this = _super.call(this);
-    _this.view = WelcomeComponent;
-    _this.title.icon = '🙌 ';
-    _this.title.label = '欢迎使用';
-    _this.title.closable = false;
-    _this.viewManager = viewManager;
-    _this.viewManager.getOrCreateView(EntryPointView).then(function (entryPointView) {
-      _this.entryPointView = entryPointView;
-      return;
-    }).catch(console.error);
-    return _this;
-  }
-  WelcomeView = inject(ViewManager)(WelcomeView, undefined, 0) || WelcomeView;
-  return _createClass(WelcomeView);
-}(BaseView)) || _class) || _class);
+export * from "./welcome-view.js";
+export * from "./entry-point-view.js";

package/es/welcome/welcome-view.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" resolution-mode="require"/>
+import { ViewManager } from '@difizen/mana-app';
+import { BaseView } from '@difizen/mana-app';
+import { EntryPointView } from './entry-point-view.js';
+import './index.less';
+export declare const WelcomeComponent: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
+export declare class WelcomeView extends BaseView {
+    view: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
+    viewManager: ViewManager;
+    entryPointView: EntryPointView;
+    constructor(viewManager: ViewManager);
+}
+//# sourceMappingURL=welcome-view.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"welcome-view.d.ts","sourceRoot":"","sources":["../../src/welcome/welcome-view.tsx"],"names":[],"mappings":";AACA,OAAO,EAML,WAAW,EAEZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAK7C,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,cAAc,CAAC;AAEtB,eAAO,MAAM,gBAAgB,mFAqB3B,CAAC;AAEH,qBAEa,WAAY,SAAQ,QAAQ;IAC9B,IAAI,oFAAoB;IACjC,WAAW,EAAE,WAAW,CAAC;IACzB,cAAc,EAAE,cAAc,CAAC;gBACE,WAAW,EAAE,WAAW;CAc1D"}

package/es/welcome/welcome-view.js

@@ -0,0 +1,70 @@
+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;
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+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 { ServerConnection } from '@difizen/libro-jupyter';
+import { inject, singleton, useInject, view, ViewInstance, ViewManager, ViewRender } from '@difizen/mana-app';
+import { BaseView } from '@difizen/mana-app';
+import { forwardRef } from 'react';
+import { LayoutService } from "../layout/layout-service.js";
+import { EntryPointView } from "./entry-point-view.js";
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var WelcomeComponent = /*#__PURE__*/forwardRef(function WelcomeComponent() {
+  var instance = useInject(ViewInstance);
+  var layoutService = useInject(LayoutService);
+  var serverConnection = useInject(ServerConnection);
+  return /*#__PURE__*/_jsxs("div", {
+    className: "libro-lab-welcome-page",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "libro-lab-welcome-page-title",
+      children: "\u6B22\u8FCE\u4F7F\u7528 Notebook \u5DE5\u4F5C\u53F0 \uD83C\uDF89\uD83C\uDF89"
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "libro-lab-welcome-page-server-info",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "libro-lab-welcome-page-server-info-title",
+        children: "\u670D\u52A1\u8FDE\u63A5\u4FE1\u606F"
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "libro-lab-welcome-page-server-info-item",
+        children: ["BaseURL: ", "".concat(serverConnection.settings.baseUrl)]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "libro-lab-welcome-page-server-info-item",
+        children: ["WsURL: ", "".concat(serverConnection.settings.wsUrl)]
+      })]
+    }), layoutService.serverSatus === 'success' && /*#__PURE__*/_jsx(ViewRender, {
+      view: instance.entryPointView
+    })]
+  });
+});
+export var WelcomeView = (_dec = singleton(), _dec2 = view('welcome-view'), _dec(_class = _dec2(_class = /*#__PURE__*/function (_BaseView) {
+  _inherits(WelcomeView, _BaseView);
+  var _super = _createSuper(WelcomeView);
+  function WelcomeView(viewManager) {
+    var _this;
+    _classCallCheck(this, WelcomeView);
+    _this = _super.call(this);
+    _this.view = WelcomeComponent;
+    _this.title.icon = '🙌 ';
+    _this.title.label = '欢迎使用';
+    _this.title.closable = false;
+    _this.viewManager = viewManager;
+    _this.viewManager.getOrCreateView(EntryPointView).then(function (entryPointView) {
+      _this.entryPointView = entryPointView;
+      return;
+    }).catch(console.error);
+    return _this;
+  }
+  WelcomeView = inject(ViewManager)(WelcomeView, undefined, 0) || WelcomeView;
+  return _createClass(WelcomeView);
+}(BaseView)) || _class) || _class);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@difizen/libro-lab",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "",
   "keywords": [
     "libro",
@@ -33,19 +33,22 @@
     "src"
   ],
   "dependencies": {
+    "@ant-design/icons": "^5.1.0",
+    "@difizen/libro-core": "^0.1.5",
+    "@difizen/libro-jupyter": "^0.1.5",
+    "@difizen/libro-kernel": "^0.1.5",
+    "@difizen/libro-prompt-cell": "^0.1.5",
+    "@difizen/libro-terminal": "^0.1.5",
+    "@difizen/libro-toc": "^0.1.5",
     "@difizen/mana-app": "latest",
     "@difizen/mana-react": "latest",
-    "@difizen/libro-jupyter": "^0.1.3",
-    "@difizen/libro-toc": "^0.1.3",
-    "@difizen/libro-prompt-cell": "^0.1.3",
-    "@difizen/libro-terminal": "^0.1.3",
-    "@ant-design/icons": "^5.1.0",
     "classnames": "^2.3.2",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "viewerjs": "^1.11.6"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "antd": "^5.8.6"
+    "antd": "^5.8.6",
+    "react": "^18.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.25",

package/src/image-viewer/index.less

@@ -0,0 +1,3 @@
+.libro-lab-image-viewer {
+  background: var(--mana-color-bg-container);
+}

package/src/image-viewer/index.ts

@@ -0,0 +1,2 @@
+export * from './module.js';
+export * from './viewer.js';

package/src/image-viewer/module.ts

@@ -0,0 +1,9 @@
+import { ManaModule } from '@difizen/mana-app';
+
+import { ImageViewerOpenHandler } from './open-handler.js';
+import { NavigatableImageViewerView } from './viewer.js';
+
+export const ImageViewerModule = ManaModule.create('ImageViewerModule').register(
+  NavigatableImageViewerView,
+  ImageViewerOpenHandler,
+);

package/src/image-viewer/open-handler.ts

@@ -0,0 +1,47 @@
+import { LibroJupyterConfiguration } from '@difizen/libro-jupyter';
+import type { URI, ViewOpenHandlerOptions } from '@difizen/mana-app';
+import { ConfigurationService, inject } from '@difizen/mana-app';
+import {
+  NavigatableViewOpenHandler,
+  OpenHandler,
+  singleton,
+  Priority,
+} from '@difizen/mana-app';
+
+import { imageExtToTypes } from './protocol.js';
+import { NavigatableImageViewerViewFactoryId } from './viewer.js';
+import type { NavigatableImageViewerView } from './viewer.js';
+
+@singleton({ contrib: OpenHandler })
+export class ImageViewerOpenHandler extends NavigatableViewOpenHandler<NavigatableImageViewerView> {
+  @inject(ConfigurationService) protected configurationService: ConfigurationService;
+
+  id = NavigatableImageViewerViewFactoryId;
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  canHandle(uri: URI, _options?: ViewOpenHandlerOptions) {
+    if (uri.scheme === 'file') {
+      const ext = uri.path.ext;
+      if (imageExtToTypes.has(ext)) {
+        return 100;
+      }
+    }
+    return Priority.IDLE;
+  }
+
+  override async open(uri: URI, options: ViewOpenHandlerOptions = {}) {
+    const { viewOptions, ...extra } = options;
+    const slot = await this.configurationService.get(
+      LibroJupyterConfiguration['OpenSlot'],
+    );
+    return super.open(uri, {
+      slot,
+      viewOptions: {
+        path: uri.path.toString(),
+        ...viewOptions,
+      },
+      reveal: true,
+      ...extra,
+    });
+  }
+}

package/src/image-viewer/protocol.ts

@@ -0,0 +1,43 @@
+import type { ContentsFileFormat } from '@difizen/libro-kernel';
+
+interface ImageFormat {
+  name: string;
+  extensions: string[];
+  format: ContentsFileFormat;
+}
+
+export const imageFileTypes: ImageFormat[] = [
+  {
+    name: 'jpeg',
+    extensions: ['.jpg', '.jpeg'],
+    format: 'base64',
+  },
+  {
+    name: 'gif',
+    extensions: ['.gif'],
+    format: 'base64',
+  },
+  {
+    name: 'png',
+    extensions: ['.png'],
+    format: 'base64',
+  },
+  {
+    name: 'bmp',
+    extensions: ['.bmp'],
+    format: 'base64',
+  },
+  {
+    name: 'webp',
+    extensions: ['.webp'],
+    format: 'base64',
+  },
+];
+
+export const imageExtToTypes = new Map<string, ImageFormat>();
+
+imageFileTypes.forEach((imageType) => {
+  imageType.extensions.forEach((ext) => {
+    imageExtToTypes.set(ext, imageType);
+  });
+});

package/src/image-viewer/viewer.tsx

@@ -0,0 +1,131 @@
+import { ContentsManager } from '@difizen/libro-kernel';
+import type { NavigatableView } from '@difizen/mana-app';
+import { DisposableCollection } from '@difizen/mana-app';
+import {
+  BaseView,
+  inject,
+  LabelProvider,
+  prop,
+  transient,
+  URI as VScodeURI,
+  URIIconReference,
+  useInject,
+  view,
+  ViewInstance,
+  ViewOption,
+  Deferred,
+  URI,
+  CommandRegistry,
+} from '@difizen/mana-app';
+import { Spin } from 'antd';
+import { createRef, forwardRef, useEffect, useRef } from 'react';
+import Viewer from 'viewerjs';
+import './index.less';
+import 'viewerjs/dist/viewer.css';
+
+export function ImageViewer() {
+  const instance = useInject<NavigatableImageViewerView>(ViewInstance);
+  const ref = useRef<HTMLImageElement>(null);
+  const content = instance.content;
+  useEffect(() => {
+    if (ref && ref.current) {
+      new Viewer(ref.current, {
+        toolbar: {
+          prev: 0,
+          next: 0,
+          zoomIn: 4,
+          zoomOut: 4,
+          oneToOne: 4,
+          reset: 4,
+          play: {
+            show: 4,
+            size: 'large',
+          },
+          rotateLeft: 4,
+          rotateRight: 4,
+          flipHorizontal: 4,
+          flipVertical: 4,
+        },
+      });
+    }
+  }, [content, ref]);
+  if (!content) {
+    return null;
+  }
+  return <img ref={ref} src={`data:image/png;base64,${content}`} />;
+}
+
+export const NavigatableImageViewerComponent = forwardRef<HTMLDivElement>(
+  function LibroEditorComponent(props, ref) {
+    const instance = useInject<NavigatableImageViewerView>(ViewInstance);
+    const content = instance.content;
+    return (
+      <Spin spinning={!content}>
+        <div className="libro-lab-image-viewer" ref={ref}>
+          {content && <ImageViewer />}
+        </div>
+      </Spin>
+    );
+  },
+);
+
+export const NavigatableImageViewerViewFactoryId =
+  'navigatable-image-viewer-view-factory';
+@transient()
+@view(NavigatableImageViewerViewFactoryId)
+export class NavigatableImageViewerView extends BaseView implements NavigatableView {
+  @inject(CommandRegistry) commandRegistry: CommandRegistry;
+  @inject(ContentsManager) contentsManager: ContentsManager;
+
+  protected readonly toDisposeOnAutoSave = new DisposableCollection();
+
+  override view = NavigatableImageViewerComponent;
+
+  codeRef = createRef<HTMLDivElement>();
+
+  @prop() filePath?: string;
+  @prop() content?: string;
+
+  protected defer = new Deferred<void>();
+
+  get ready() {
+    return this.defer.promise;
+  }
+
+  constructor(
+    @inject(ViewOption) options: { path: string },
+    @inject(LabelProvider) labelProvider: LabelProvider,
+  ) {
+    super();
+    this.filePath = options.path;
+    this.title.caption = options.path;
+    const uri = new URI(options.path);
+    const uriRef = URIIconReference.create('file', new VScodeURI(options.path));
+    const iconClass = labelProvider.getIcon(uriRef);
+    this.title.icon = <div className={iconClass} />;
+    this.title.label = uri.displayName;
+  }
+
+  getFileContent = async () => {
+    if (this.filePath) {
+      const content = await this.contentsManager.get(this.filePath, {
+        content: true,
+        format: 'base64',
+      });
+      this.content = content.content;
+    }
+  };
+
+  override async onViewMount(): Promise<void> {
+    this.getFileContent();
+  }
+
+  getResourceUri(): URI | undefined {
+    return new URI(this.filePath);
+  }
+
+  createMoveToUri(resourceUri: URI): URI | undefined {
+    this.filePath = resourceUri.path.toString();
+    return resourceUri;
+  }
+}

package/src/index.ts

@@ -1 +1,11 @@
 export * from './module.js';
+export * from './lab-app.js';
+export * from './github-link/index.js';
+export * from './config/index.js';
+export * from './layout/index.js';
+export * from './menu/index.js';
+export * from './toc/index.js';
+export * from './welcome/index.js';
+export * from './kernel-manager/index.js';
+export * from './common/index.js';
+export * from './image-viewer/index.js';

package/src/layout/index.tsx

@@ -1,4 +1,12 @@
 export * from './protocol.js';
 export * from './module.js';
 export * from './layout.js';
+export * from './layout-service.js';
+export * from './saveable-tab-view.js';
 export * from './footer/footer-view.js';
+export * from './footer/status-footer-view.js';
+export * from './footer/current-file-footer-view.js';
+export * from './brand/brand.js';
+export * from './main.js';
+export * from './container.js';
+export * from './content-bottom-tab-view.js';

package/src/layout/layout.tsx

@@ -11,8 +11,8 @@ import type { VisibilityMap } from './layout-service.js';
 import { LayoutService } from './layout-service.js';
 import { LibroLabLayoutSlots } from './protocol.js';
 
-export const LibroLabLayoutContainerComponent = forwardRef(
-  function LibroLabLayoutContainerComponent() {
+export const LibroLabLayoutComponent = forwardRef(
+  function LibroLabLayoutComponent() {
     const layoutService = useInject(LayoutService);
 
     return (
@@ -46,7 +46,7 @@ export const LibroLabLayoutContainerComponent = forwardRef(
 @singleton()
 @view('libro-lab-layout')
 export class LibroLabLayoutView extends BaseView {
-  override view = LibroLabLayoutContainerComponent;
+  override view = LibroLabLayoutComponent;
 
   @inject(LayoutService) layoutService: LayoutService;
 

package/src/layout/module.ts

@@ -6,7 +6,7 @@ import {
   ManaModule,
 } from '@difizen/mana-app';
 
-import { BrandView } from './brand/index.js';
+import { BrandView } from './brand/brand.js';
 import { LibroLabLayoutContainerView } from './container.js';
 import { ContentBottomTabView } from './content-bottom-tab-view.js';
 import { LibroLabCurrentFileFooterView } from './footer/current-file-footer-view.js';

package/src/menu/index.ts

@@ -0,0 +1,4 @@
+export * from './menu-bar-view.js';
+export * from './menu-command.js';
+export * from './menu-contribution.js';
+export * from './module.js';

package/src/module.tsx

@@ -12,6 +12,7 @@ import {
 
 import { LabConfigAppContribution } from './config/config-contribution.js';
 import { GithubLinkView } from './github-link/index.js';
+import { ImageViewerModule } from './image-viewer/index.js';
 import { KernelManagerView } from './kernel-manager/index.js';
 import { LibroLabApp } from './lab-app.js';
 import { ContentBottomTabView } from './layout/content-bottom-tab-view.js';
@@ -98,4 +99,5 @@ export const LibroLabModule = ManaModule.create()
     LibroLabTocModule,
     LibroPromptCellModule,
     TerminalModule,
+    ImageViewerModule,
   );

package/src/toc/index.ts

@@ -0,0 +1,2 @@
+export * from './libro-toc-panel-view.js';
+export * from './module.js';

package/src/welcome/index.ts

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