@elice/material-exercise 1.220803.0

package/cjs/components/shared/monaco-editor/utils/remoteMarker/RemoteSelectionManager.js

@@ -0,0 +1,154 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var RemoteSelection = require('./RemoteSelection.js');
+
+/* ====================================================================================================
+ * These codes forked and modified from `convergencelabs/monaco-collab-ext`
+ * under the terms of the MIT license.
+ * Make sure to check the original project if any issue exists.
+ * - project: https://github.com/convergencelabs/monaco-collab-ext
+ * - codes: https://github.com/convergencelabs/monaco-collab-ext/tree/6ece72028e4b8fb35e9928a304fbdfe28a4e7be9/src/ts
+ * ==================================================================================================== */
+/**
+ * The RemoteSelectionManager renders remote users selections into the Monaco
+ * editor using the editor's built-in decorators mechanism.
+ */
+
+class RemoteSelectionManager {
+  /**
+   * Creates a new RemoteSelectionManager with the specified options.
+   *
+   * @param options
+   *   Ths options that configure the RemoteSelectionManager.
+   */
+  constructor(options) {
+    this._remoteSelections = new Map();
+    this._options = options;
+    this._nextClassId = 0;
+  }
+  /**
+   * Adds a new remote selection with a unique id and the specified color.
+   *
+   * @param id
+   *   The unique id of the selection.
+   * @param color
+   *   The color to render the selection with.
+   */
+
+
+  addSelection(id, color, label) {
+    const onDisposed = () => {
+      this.removeSelection(id);
+    };
+
+    const selection = new RemoteSelection.RemoteSelection(this._options.editor, id, this._nextClassId++, color, label !== null && label !== void 0 ? label : '', onDisposed);
+
+    this._remoteSelections.set(id, selection);
+
+    return selection;
+  }
+  /**
+   * Removes an existing remote selection from the editor.
+   *
+   * @param id
+   *   The unique id of the selection.
+   */
+
+
+  removeSelection(id) {
+    const remoteSelection = this._getSelection(id);
+
+    if (remoteSelection && !remoteSelection.isDisposed()) {
+      remoteSelection.dispose();
+    }
+  }
+  /**
+   * Sets the selection using zero-based text offset locations.
+   *
+   * @param id
+   *   The unique id of the selection.
+   * @param start
+   *   The starting offset of the selection.
+   * @param end
+   *   The ending offset of the selection.
+   */
+
+
+  setSelectionOffsets(id, start, end) {
+    const remoteSelection = this._getSelection(id);
+
+    if (remoteSelection) {
+      remoteSelection.setOffsets(start, end);
+    }
+  }
+  /**
+   * Sets the selection using the Monaco Editor's IPosition (line numbers and columns)
+   * location concept.
+   *
+   * @param id
+   *   The unique id of the selection.
+   * @param start
+   *   The starting position of the selection.
+   * @param end
+   *   The ending position of the selection.
+   */
+
+
+  setSelectionPositions(id, start, end) {
+    const remoteSelection = this._getSelection(id);
+
+    if (remoteSelection) {
+      remoteSelection.setPositions(start, end);
+    }
+  }
+  /**
+   * Shows the specified selection, if it is currently hidden.
+   *
+   * @param id
+   *   The unique id of the selection.
+   */
+
+
+  showSelection(id) {
+    const remoteSelection = this._getSelection(id);
+
+    if (remoteSelection) {
+      remoteSelection.show();
+    }
+  }
+  /**
+   * Hides the specified selection, if it is currently shown.
+   *
+   * @param id
+   *   The unique id of the selection.
+   */
+
+
+  hideSelection(id) {
+    const remoteSelection = this._getSelection(id);
+
+    if (remoteSelection) {
+      remoteSelection.hide();
+    }
+  }
+  /**
+   * A helper method that gets a cursor by id, or throws an exception.
+   * @internal
+   */
+
+
+  _getSelection(id) {
+    var _a;
+
+    if (!this._remoteSelections.has(id)) {
+      throw new Error('No such selection: ' + id);
+    }
+
+    return (_a = this._remoteSelections.get(id)) !== null && _a !== void 0 ? _a : null;
+  }
+
+}
+
+exports.RemoteSelectionManager = RemoteSelectionManager;

package/cjs/components/shared/monaco-editor/utils/remoteMarker/index.d.ts

@@ -0,0 +1,3 @@
+export * from './RemoteCursorManager';
+export * from './RemoteSelectionManager';
+export * from './styles';

package/cjs/components/shared/monaco-editor/utils/remoteMarker/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const REMOTE_MARKER_CLASS_NAME = "exercise-editor-marker";
+export declare const cssRemoteMarker: import("styled-components").FlattenSimpleInterpolation;

package/cjs/components/shared/monaco-editor/utils/remoteMarker/styles.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var designTokens = require('@elice/design-tokens');
+var styled = require('styled-components');
+
+/* ====================================================================================================
+ * These codes forked and modified from `convergencelabs/monaco-collab-ext`
+ * under the terms of the MIT license.
+ * Make sure to check the original project if any issue exists.
+ * - project: https://github.com/convergencelabs/monaco-collab-ext
+ * - codes: https://github.com/convergencelabs/monaco-collab-ext/tree/6ece72028e4b8fb35e9928a304fbdfe28a4e7be9/src/ts
+ * ==================================================================================================== */
+const REMOTE_MARKER_CLASS_NAME = 'exercise-editor-marker';
+const cssRemoteMarker = styled.css([".", "{&-cursor{position:absolute;pointer-events:none;z-index:4000;width:2px;&:before{content:'';width:6px;height:5px;display:block;margin-left:-2px;margin-top:0;z-index:4000;background:inherit;}&-tooltip{position:absolute;white-space:nowrap;color:", ";text-shadow:0 0 1px ", ";opacity:1;font-size:12px;padding:2px;font-family:'Pretendard','Malgun Gothic','Helvetica','Myriad Pro','Arial',sans-serif;z-index:4000;transition:opacity 0.5s ease-out;}}&-selection{position:absolute;pointer-events:auto;opacity:0.3;}}"], REMOTE_MARKER_CLASS_NAME, designTokens.base.color.white, designTokens.base.color.gray9);
+
+exports.REMOTE_MARKER_CLASS_NAME = REMOTE_MARKER_CLASS_NAME;
+exports.cssRemoteMarker = cssRemoteMarker;

package/cjs/components/shared/monaco-editor/utils/theme/convert.d.ts

@@ -0,0 +1,22 @@
+import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+interface VSCodeTheme {
+    $schema: string;
+    type: 'dark' | 'light';
+    colors: Record<string, string>;
+    tokenColors: VSCodeThemeTokenColor[];
+}
+interface VSCodeThemeTokenColor {
+    name?: string;
+    scope: string[] | string;
+    settings: VSCodeThemeTokenColorSettings;
+}
+interface VSCodeThemeTokenColorSettings {
+    foreground?: string;
+    background?: string;
+    fontStyle?: string;
+}
+/**
+ *
+ */
+export declare function convertToMonacoTheme(theme: VSCodeTheme): monaco.editor.IStandaloneThemeData;
+export {};

package/cjs/components/shared/monaco-editor/utils/theme/convert.js

@@ -0,0 +1,89 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Color = require('color');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
+
+//
+//
+
+/**
+ *
+ */
+
+function sanitizeColor(color) {
+  if (/^#[0-9a-f]{6,8}$/i.test(color)) {
+    return color;
+  }
+
+  try {
+    return new Color__default["default"](color).hex();
+  } catch (e) {
+    return '#FF0000';
+  }
+}
+/**
+ *
+ */
+
+
+function getBase(type) {
+  if (type === 'light') {
+    return 'vs';
+  }
+
+  if (type === 'hc') {
+    return 'hc-black';
+  }
+
+  return 'vs-dark';
+}
+/**
+ *
+ */
+
+
+function convertToMonacoTheme(theme) {
+  const {
+    tokenColors = [],
+    colors = {}
+  } = theme;
+  Object.keys(colors).forEach(c => {
+    if (!colors[c]) {
+      delete colors[c];
+    }
+  });
+  const rules = tokenColors.filter(t => t.scope && t.settings && t.settings.foreground !== 'inherit' && t.settings.background !== 'inherit').reduce((acc, token) => {
+    const settings = {};
+
+    if (token.settings.foreground) {
+      settings.foreground = sanitizeColor(token.settings.foreground);
+    }
+
+    if (token.settings.background) {
+      settings.background = sanitizeColor(token.settings.background);
+    }
+
+    if (token.settings.fontStyle) {
+      settings.fontStyle = token.settings.fontStyle;
+    }
+
+    const scope = typeof token.scope === 'string' ? token.scope.split(',').map(a => a.trim()) : token.scope;
+    scope.forEach(s => acc.push(Object.assign({
+      token: s
+    }, settings)));
+    return acc;
+  }, []);
+  return {
+    base: getBase(theme.type),
+    inherit: true,
+    colors,
+    rules
+  };
+}
+
+exports.convertToMonacoTheme = convertToMonacoTheme;

package/cjs/components/shared/monaco-editor/utils/theme/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Import theme of vscode.
+ */
+export declare function importTheme(theme: string): Promise<import("monaco-editor").editor.IStandaloneThemeData>;

package/cjs/components/shared/monaco-editor/utils/theme/index.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('../../constants/themes/index.js');
+var convert = require('./convert.js');
+
+/**
+ * Import theme of vscode.
+ */
+
+async function importTheme(theme) {
+  var _a;
+
+  return ((_a = index.VSCODE_THEMES.find(t => t.id === theme)) !== null && _a !== void 0 ? _a : index.VSCODE_THEMES[0]).getTheme().then(themeData => convert.convertToMonacoTheme(themeData));
+}
+
+exports.importTheme = importTheme;

package/cjs/components/shared/no-vnc/NoVnc.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { GetOrgMaterialExerciseGetResponses } from '@elice/types';
+declare type MaterialExerciseReadyExerciseImage = GetOrgMaterialExerciseGetResponses['materialExercise']['readyExerciseImage'];
+export interface NoVncApis {
+    connect: () => void;
+    disconnect: () => void;
+    reset: () => void;
+}
+export interface NoVncProps {
+    isRunning: boolean;
+    wsUri: string;
+    roomToken: string;
+    readyExerciseImage: NonNullable<MaterialExerciseReadyExerciseImage>;
+    exercisePreviewDisplayModeButton?: JSX.Element;
+    onConnect?: () => void;
+    onDisconnect?: () => void;
+}
+declare const NoVnc: React.ForwardRefExoticComponent<NoVncProps & React.RefAttributes<NoVncApis>>;
+export default NoVnc;

package/cjs/components/shared/no-vnc/NoVnc.js

@@ -0,0 +1,279 @@
+'use strict';
+
+var React = require('react');
+var reactUse = require('react-use');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var icons = require('@elice/icons');
+var RFB_decoders_copy_rect = require('@novnc/novnc/core/decoders/copyrect');
+var RFB_decoders_hextile = require('@novnc/novnc/core/decoders/hextile');
+var RFB_decoders_raw = require('@novnc/novnc/core/decoders/raw');
+var RFB_decoders_rre = require('@novnc/novnc/core/decoders/rre');
+var RFB_decoders_tight = require('@novnc/novnc/core/decoders/tight');
+var RFB_decoders_tight_png = require('@novnc/novnc/core/decoders/tightpng');
+var encodings = require('@novnc/novnc/core/encodings');
+var RFB = require('@novnc/novnc/core/rfb');
+var styled = require('styled-components');
+var ExerciseMenuButton = require('../exercise-menu-button/ExerciseMenuButton.js');
+var PreviewContainer = require('../preview-container/PreviewContainer.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var RFB_decoders_copy_rect__default = /*#__PURE__*/_interopDefaultLegacy(RFB_decoders_copy_rect);
+var RFB_decoders_hextile__default = /*#__PURE__*/_interopDefaultLegacy(RFB_decoders_hextile);
+var RFB_decoders_raw__default = /*#__PURE__*/_interopDefaultLegacy(RFB_decoders_raw);
+var RFB_decoders_rre__default = /*#__PURE__*/_interopDefaultLegacy(RFB_decoders_rre);
+var RFB_decoders_tight__default = /*#__PURE__*/_interopDefaultLegacy(RFB_decoders_tight);
+var RFB_decoders_tight_png__default = /*#__PURE__*/_interopDefaultLegacy(RFB_decoders_tight_png);
+var RFB__default = /*#__PURE__*/_interopDefaultLegacy(RFB);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+//
+//
+
+const VNC_BACKGROUND_COLOR = designTokens.base.color.navy7;
+const StyledHeaderTitle = styled__default["default"].div.withConfig({
+  componentId: "sc-1duy62f-0"
+})(["flex:1;"]);
+const StyledHeaderButtonGroup = styled__default["default"].div.withConfig({
+  componentId: "sc-1duy62f-1"
+})(["flex:0 0 auto;display:flex;align-items:center;"]);
+const StyledVncWrap = styled__default["default"].div.withConfig({
+  componentId: "sc-1duy62f-2"
+})(["display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:", ";overflow:hidden;"], VNC_BACKGROUND_COLOR);
+const StyledNoVncContainer = styled__default["default"].div.withConfig({
+  componentId: "sc-1duy62f-3"
+})([""]);
+const StyledNoVnc = styled__default["default"].div.withConfig({
+  componentId: "sc-1duy62f-4"
+})(["position:relative;left:50%;top:50%;transform-origin:center center;transform:translate(-50%,-50%);"]); //
+//
+//
+
+const NoVnc = React.forwardRef(({
+  isRunning = false,
+  wsUri,
+  roomToken,
+  readyExerciseImage,
+  exercisePreviewDisplayModeButton = null,
+  onConnect,
+  onDisconnect
+}, ref) => {
+  const vncRfb = React__default["default"].useRef(null);
+  const vncElRef = React__default["default"].useRef(null);
+  const [vncWrapRef, {
+    width,
+    height
+  }] = reactUse.useMeasure();
+  const [isVncScaledFromLocal, setVncScaledFromLocal] = React__default["default"].useState(true);
+  /**
+   * Default size of VNC from exericse image.
+   */
+
+  const vncDefaultSize = React__default["default"].useMemo(() => {
+    var _a, _b;
+
+    return {
+      width: (_a = readyExerciseImage === null || readyExerciseImage === void 0 ? void 0 : readyExerciseImage.defaultVncWidth) !== null && _a !== void 0 ? _a : 300,
+      height: (_b = readyExerciseImage === null || readyExerciseImage === void 0 ? void 0 : readyExerciseImage.defaultVncHeight) !== null && _b !== void 0 ? _b : 300
+    };
+  }, [readyExerciseImage]);
+  /**
+   * Transform scale to fit VNC to VNC wrap.
+   */
+
+  const vncTransformScale = React__default["default"].useMemo(() => Math.min(width / vncDefaultSize.width, height / vncDefaultSize.height), [width, height, vncDefaultSize.width, vncDefaultSize.height]);
+  /**
+   * Element style of VNC and VNC wrap.
+   */
+
+  const vncElementStyle = React__default["default"].useMemo(() => ({
+    width: `${(vncDefaultSize.width * vncTransformScale).toFixed(3)}px`,
+    height: `${(vncDefaultSize.height * vncTransformScale).toFixed(3)}px`
+  }), [vncDefaultSize.width, vncDefaultSize.height, vncTransformScale]);
+  /**
+   * Connect VNC.
+   */
+
+  const connect = React__default["default"].useCallback(() => {
+    if (!vncElRef.current || !wsUri || !roomToken) {
+      return;
+    }
+
+    const vncUrl = `${wsUri}/client/vnc/${roomToken}`; // The RFB object represents a single connection to a VNC server.
+    // It communicates using a WebSocket that must provide a standard RFB protocol stream.
+    // -ref: https://github.com/novnc/noVNC/blob/master/docs/API.md#rfb-1
+
+    vncRfb.current = new RFB__default["default"](vncElRef.current, vncUrl, {
+      wsProtocols: ['binary']
+    }); // ==============================
+    // VNC options
+    // ref: https://github.com/novnc/noVNC/blob/master/docs/API.md#properties
+    // ==============================
+    // Is a boolean indicating if the remote session should be clipped to its container.
+    // When disabled scrollbars will be shown to handle the resulting overflow.
+
+    vncRfb.current.clipViewport = false; // Is a boolean indicating if the remote session should be scaled locally so it fits its container.
+    // When disabled it will be centered if the remote session is smaller than its container,
+    // or handled according to `clipViewport` if it is larger.
+
+    vncRfb.current.scaleViewport = isVncScaledFromLocal; // NOTE: select one of `scaleViewport` or `resizeSession`, not both
+    // Is a boolean indicating if a request to resize the remote session should be sent
+    // whenever the container changes dimensions.
+
+    vncRfb.current.resizeSession = !isVncScaledFromLocal; // NOTE: select one of `scaleViewport` or `resizeSession`, not both
+    // Is a boolean indicating whether a dot cursor should be shown instead of a zero-sized
+    // or fully-transparent cursor if the server sets such invisible cursor.
+
+    vncRfb.current.showDotCursor = true; // Is a valid CSS background style value indicating
+    // which background style should be applied to the element containing the remote session screen.
+
+    vncRfb.current.background = VNC_BACKGROUND_COLOR; // ==============================
+    // VNC events
+    // ref: https://github.com/novnc/noVNC/blob/master/docs/API.md#events
+    // ==============================
+    // The connect event is fired when the RFB object has completed the connection and handshaking with the server.
+    // - ref: https://github.com/novnc/noVNC/blob/master/docs/API.md#connect
+
+    vncRfb.current.addEventListener('connect', () => {
+      if (typeof onConnect === 'function') {
+        onConnect();
+      }
+    }); // The disconnect event is fired when the RFB object disconnects.
+    // - ref: https://github.com/novnc/noVNC/blob/master/docs/API.md#disconnect
+
+    vncRfb.current.addEventListener('disconnect', () => {
+      if (typeof onDisconnect === 'function') {
+        onDisconnect();
+      }
+    });
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [wsUri, roomToken, isVncScaledFromLocal]);
+  /**
+   * Disconnect VNC.
+   */
+
+  const disconnect = React__default["default"].useCallback(() => {
+    var _a;
+
+    if (typeof ((_a = vncRfb.current) === null || _a === void 0 ? void 0 : _a.disconnect) === 'function') {
+      vncRfb.current.disconnect();
+      vncRfb.current = null;
+    }
+
+    if (vncElRef.current) {
+      vncElRef.current.innerHTML = '';
+    }
+  }, []);
+  /**
+   * Reset VNC.
+   * - note: https://www.notion.so/elice/elice-runner-v3-forwarder-4907ba8546274956b2f55c586df1641a#d61df659d91644db85a52fc148a69e13
+   */
+
+  const reset = React__default["default"].useCallback(() => {
+    if (!vncRfb.current) {
+      return;
+    } //
+    // FIXME: This code accesses to the internal of noVNC
+    //
+
+
+    vncRfb.current._rfbConnectionState = 'connecting';
+    vncRfb.current._rfbInitState = 'ProtocolVersion';
+    vncRfb.current._rfbTightVNC = false;
+    vncRfb.current._capabilities = {
+      power: false
+    };
+    vncRfb.current._supportsFence = false;
+    vncRfb.current._supportsContinuousUpdates = false;
+    vncRfb.current._enabledContinuousUpdates = false;
+    vncRfb.current._supportsSetDesktopSize = false;
+    vncRfb.current._screenID = 0;
+    vncRfb.current._screenFlags = 0;
+    vncRfb.current._qemuExtKeyEventSupported = false;
+    vncRfb.current._flushing = false;
+    vncRfb.current._FBU = {
+      rects: 0,
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+      encoding: null
+    };
+    vncRfb.current._decoders = {};
+    vncRfb.current._decoders[encodings.encodings.encodingRaw] = new RFB_decoders_raw__default["default"]();
+    vncRfb.current._decoders[encodings.encodings.encodingCopyRect] = new RFB_decoders_copy_rect__default["default"]();
+    vncRfb.current._decoders[encodings.encodings.encodingRRE] = new RFB_decoders_rre__default["default"]();
+    vncRfb.current._decoders[encodings.encodings.encodingHextile] = new RFB_decoders_hextile__default["default"]();
+    vncRfb.current._decoders[encodings.encodings.encodingTight] = new RFB_decoders_tight__default["default"]();
+    vncRfb.current._decoders[encodings.encodings.encodingTightPNG] = new RFB_decoders_tight_png__default["default"]();
+
+    vncRfb.current._sock.flush();
+
+    vncRfb.current._sock._allocateBuffers();
+
+    vncRfb.current._sock._rQi = 0;
+    vncRfb.current._sock._rQlen = 0; //
+    // FIXME: This code accesses to the internal of noVNC
+    //
+  }, []); //
+  // Connect or disconnect VNC.
+  //
+
+  reactUse.useMount(connect);
+  reactUse.useUnmount(disconnect); //
+  // Update VNC scale config.
+  //
+
+  reactUse.useUpdateEffect(() => {
+    if (!vncRfb.current) {
+      return;
+    }
+
+    vncRfb.current.scaleViewport = isVncScaledFromLocal;
+    vncRfb.current.resizeSession = !isVncScaledFromLocal;
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [isVncScaledFromLocal]); //
+  //
+  //
+
+  React__default["default"].useImperativeHandle(ref, () => ({
+    connect,
+    disconnect,
+    reset
+  }), [connect, disconnect, reset]);
+  /**
+   * Header.
+   */
+
+  const renderVncHeader = () => {
+    return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(StyledHeaderTitle, null, React__default["default"].createElement(blocks.Text, {
+      role: "white",
+      size: "tiny"
+    }, "\uC2E4\uD589 \uACB0\uACFC")), React__default["default"].createElement(StyledHeaderButtonGroup, null, React__default["default"].createElement(ExerciseMenuButton, {
+      icon: isVncScaledFromLocal ? icons.eilViewMaximize : icons.eilViewMinimize,
+      title: isRunning ? '실행 중에는 비율을 변경할 수 없습니다' : isVncScaledFromLocal ? '확대하여 보기' : '원본 비율로 보기',
+      disabled: isRunning,
+      onClick: () => setVncScaledFromLocal(prev => !prev)
+    }), React__default["default"].isValidElement(exercisePreviewDisplayModeButton) ? React__default["default"].cloneElement(exercisePreviewDisplayModeButton, {
+      disabled: isRunning
+    }) : null));
+  }; //
+  //
+  //
+
+
+  return React__default["default"].createElement(PreviewContainer["default"], {
+    header: renderVncHeader()
+  }, React__default["default"].createElement(StyledVncWrap, {
+    ref: vncWrapRef
+  }, React__default["default"].createElement(StyledNoVncContainer, {
+    style: vncElementStyle
+  }, React__default["default"].createElement(StyledNoVnc, {
+    style: vncElementStyle,
+    ref: vncElRef
+  }))));
+});
+
+module.exports = NoVnc;

package/cjs/components/shared/no-vnc/NoVncLazy.d.ts

@@ -0,0 +1,3 @@
+import type { default as NoVnc } from './NoVnc';
+declare const NoVncLazy: typeof NoVnc;
+export default NoVncLazy;

package/cjs/components/shared/no-vnc/NoVncLazy.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespaceDefaultOnly (e) { return Object.freeze({ __proto__: null, 'default': e }); }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const AsyncNoVnc = React__default["default"].lazy(() => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('./NoVnc.js')); }));
+const NoVncLazy = React.forwardRef((props, ref) => {
+  return React__default["default"].createElement(React__default["default"].Suspense, {
+    fallback: null
+  }, React__default["default"].createElement(AsyncNoVnc, Object.assign({}, props, {
+    ref: ref
+  })));
+});
+
+module.exports = NoVncLazy;

package/cjs/components/shared/no-vnc/index.d.ts

@@ -0,0 +1 @@
+export { default as NoVncLazy } from './NoVncLazy';

package/cjs/components/shared/preview-container/PreviewContainer.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface PreviewContainerProps {
+    children?: React.ReactNode;
+    header?: React.ReactNode;
+}
+export declare const PREVIEW_CONTAINER_HEADER_HEIGHT = 36;
+export declare const PREVIEW_CONTAINER_HEADER_PADDING_TOP_BOTTOM = 4;
+declare const PreviewContainer: React.ForwardRefExoticComponent<PreviewContainerProps & React.RefAttributes<HTMLDivElement>>;
+export default PreviewContainer;