jupyterpack 0.3.0 → 0.5.1

package/src/pythonWidget/pythonWidgetModel.ts

@@ -7,31 +7,64 @@ import {
   Session
 } from '@jupyterlab/services';
 import { PromiseDelegate } from '@lumino/coreutils';
-import { IDisposable } from '@lumino/disposable';
 
 import { PYTHON_SERVER } from '../pythonServer';
+import { Signal } from '@lumino/signaling';
 import {
+  IBasePythonServer,
   IConnectionManager,
   IJupyterPackFileFormat,
-  IKernelExecutor,
+  IPythonWidgetModel,
   JupyterPackFramework
 } from '../type';
+import { CommBroadcastManager } from './comm';
+import { IS_LITE } from '../tools';
 
-export class PythonWidgetModel implements IDisposable {
+export class PythonWidgetModel implements IPythonWidgetModel {
   constructor(options: PythonWidgetModel.IOptions) {
     this._context = options.context;
     this._manager = options.manager;
     this._connectionManager = options.connectionManager;
     this._contentsManager = options.contentsManager;
     this._jpackModel = options.jpackModel;
+    this._localPath = PathExt.dirname(this._context.localPath);
+    this._autoreload = Boolean(this._jpackModel?.metadata?.autoreload);
+
+    this._contentsManager.fileChanged.connect(this._onFileChanged, this);
+  }
+
+  get autoreload() {
+    return this._autoreload;
   }
 
+  set autoreload(val: boolean) {
+    this._autoreload = val;
+  }
   get isDisposed(): boolean {
     return this._isDisposed;
   }
   get connectionManager(): IConnectionManager {
     return this._connectionManager;
   }
+  get serverReloaded() {
+    return this._serverReloaded;
+  }
+  get kernelStatusChanged() {
+    return this._kernelStatusChanged;
+  }
+
+  async reload() {
+    if (!this._kernelStarted) {
+      return;
+    }
+    const { spkContent, entryContent } = await this._loadData();
+    await this._executor?.reloadPythonServer({
+      entryPath: spkContent.entry,
+      initCode: entryContent.content
+    });
+    this._serverReloaded.emit();
+  }
+
   async initialize(): Promise<
     | {
         success: true;
@@ -48,15 +81,9 @@ export class PythonWidgetModel implements IDisposable {
         error: 'Server is called twice'
       };
     }
-    const filePath = this._context.localPath;
-    const spkContent = this._jpackModel;
 
-    const entryPath = PathExt.join(PathExt.dirname(filePath), spkContent.entry);
-    const rootUrl = spkContent.rootUrl ?? '/';
-    const entryContent = await this._contentsManager.get(entryPath, {
-      content: true,
-      format: 'text'
-    });
+    const { filePath, spkContent, rootUrl, entryContent } =
+      await this._loadData();
     const sessionManager = this._manager.sessions;
     await sessionManager.ready;
     await this._manager.kernelspecs.ready;
@@ -73,14 +100,29 @@ export class PythonWidgetModel implements IDisposable {
       kernelName = specs.default;
     }
 
-    this._sessionConnection = await sessionManager.startNew({
-      name: filePath,
-      path: filePath,
-      kernel: {
-        name: kernelName
+    this._sessionConnection = await sessionManager.startNew(
+      {
+        name: filePath,
+        path: filePath,
+        kernel: {
+          name: kernelName
+        },
+        type: 'notebook'
       },
-      type: 'notebook'
-    });
+      {
+        kernelConnectionOptions: { handleComms: true }
+      }
+    );
+    const kernel = this._sessionConnection.kernel;
+    if (kernel) {
+      this._kernelStatusChanged.emit('started');
+      this._commBroadcastManager.registerKernel(kernel);
+      kernel.disposed.connect(() => {
+        this._kernelStatusChanged.emit('stopped');
+        this._commBroadcastManager.unregisterKernel(kernel.id);
+      });
+    }
+
     const framework = spkContent.framework;
     const ServerClass = PYTHON_SERVER.get(framework);
     if (!ServerClass) {
@@ -111,14 +153,48 @@ export class PythonWidgetModel implements IDisposable {
     this._kernelStarted = true;
     return { ...data, rootUrl, framework, success: true };
   }
-  dispose(): void {
+  async dispose(): Promise<void> {
     if (this._isDisposed) {
       return;
     }
+    if (!IS_LITE) {
+      this._sessionConnection?.kernel?.shutdown();
+    }
     void this._executor?.disposePythonServer();
+    this._contentsManager.fileChanged.disconnect(this._onFileChanged);
+    this._commBroadcastManager.dispose();
     this._isDisposed = true;
   }
 
+  private async _loadData() {
+    const filePath = this._context.localPath;
+    const spkContent = this._jpackModel;
+
+    const entryPath = PathExt.join(PathExt.dirname(filePath), spkContent.entry);
+    const rootUrl = spkContent.rootUrl ?? '/';
+    const entryContent = await this._contentsManager.get(entryPath, {
+      content: true,
+      format: 'text'
+    });
+    return { filePath, spkContent, rootUrl, entryContent };
+  }
+
+  private async _onFileChanged(
+    sender: Contents.IManager,
+    args: Contents.IChangedArgs
+  ) {
+    if (this._autoreload && args.type === 'save') {
+      if (
+        args.newValue?.path &&
+        args.newValue.path.startsWith(this._localPath)
+      ) {
+        await this.reload();
+      }
+    }
+  }
+
+  private _commBroadcastManager = new CommBroadcastManager();
+
   private _isDisposed = false;
   private _kernelStarted = false;
   private _sessionConnection: Session.ISessionConnection | undefined;
@@ -127,7 +203,18 @@ export class PythonWidgetModel implements IDisposable {
   private _connectionManager: IConnectionManager;
   private _contentsManager: Contents.IManager;
   private _jpackModel: IJupyterPackFileFormat;
-  private _executor?: IKernelExecutor;
+  private _executor?: IBasePythonServer;
+  private _localPath: string;
+
+  private _serverReloaded: Signal<IPythonWidgetModel, void> = new Signal<
+    IPythonWidgetModel,
+    void
+  >(this);
+  private _kernelStatusChanged: Signal<
+    IPythonWidgetModel,
+    'started' | 'stopped'
+  > = new Signal(this);
+  private _autoreload: boolean;
 }
 
 export namespace PythonWidgetModel {

package/src/sandpackWidget/sandpackFilesModel.ts

@@ -3,16 +3,17 @@ import { ISignal, Signal } from '@lumino/signaling';
 
 import { IDict } from '../type';
 import { removePrefix } from '../tools';
+import { IDisposable } from '@lumino/disposable';
 
-export class SandpackFilesModel {
+export class SandpackFilesModel implements IDisposable {
   constructor(options: { contentsManager: Contents.IManager; path: string }) {
     this._contentManager = options.contentsManager;
     this._path = options.path;
     this._contentManager.fileChanged.connect(this._onFileChanged, this);
   }
 
-  async getAllFiles(): Promise<IDict<{ code: string }>> {
-    if (!this._allFiles) {
+  async getAllFiles(force = false): Promise<IDict<{ code: string }>> {
+    if (!this._allFiles || force) {
       const files = await this._contentManager.get(this._path, {
         content: true
       });
@@ -21,6 +22,9 @@ export class SandpackFilesModel {
 
     return this._allFiles;
   }
+  get isDisposed(): boolean {
+    return this._isDisposed;
+  }
 
   get fileChanged(): ISignal<
     SandpackFilesModel,
@@ -29,6 +33,14 @@ export class SandpackFilesModel {
     return this._fileChanged;
   }
 
+  dispose(): void {
+    if (this._isDisposed) {
+      return;
+    }
+    this._isDisposed = true;
+    this._contentManager.fileChanged.disconnect(this._onFileChanged);
+  }
+
   async flattenDirectory(
     dirContent: Contents.IModel
   ): Promise<IDict<{ code: string }>> {
@@ -138,4 +150,6 @@ export class SandpackFilesModel {
   private _contentManager: Contents.IManager;
 
   private _allFiles?: IDict<{ code: string }>;
+
+  private _isDisposed = false;
 }

package/src/sandpackWidget/sandpackPanel.ts

@@ -7,8 +7,9 @@ import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { Contents } from '@jupyterlab/services';
 
 import { IFramePanel } from '../document/iframePanel';
-import { IDict } from '../type';
+import { IDict, IJupyterPackFileFormat } from '../type';
 import { SandpackFilesModel } from './sandpackFilesModel';
+import { PromiseDelegate } from '@lumino/coreutils';
 
 export class SandpackPanel extends IFramePanel {
   constructor(options: {
@@ -17,17 +18,44 @@ export class SandpackPanel extends IFramePanel {
   }) {
     super();
     this._contentsManager = options.contentsManager;
+    const { context } = options;
     options.context.ready.then(async () => {
-      await this.init(options.context.localPath);
+      const jpackModel =
+        context.model.toJSON() as any as IJupyterPackFileFormat;
+      await this.init(context.localPath, jpackModel);
     });
   }
 
-  async init(localPath: string) {
+  dispose(): void {
+    this._fileModel?.fileChanged.disconnect(this._onFileChanged);
+    this._fileModel?.dispose();
+    this._spClient?.destroy();
+    super.dispose();
+  }
+
+  get isReady() {
+    return this._isReady.promise;
+  }
+
+  get autoreload(): boolean {
+    return this._autoreload;
+  }
+
+  set autoreload(val: boolean) {
+    this._autoreload = val;
+  }
+
+  async init(localPath: string, jpackModel: IJupyterPackFileFormat) {
+    if (jpackModel?.metadata?.autoreload === true) {
+      this._autoreload = true;
+    }
+
     const currentDir = localPath.split('/').slice(0, -1).join('/');
     const filesModel = new SandpackFilesModel({
       contentsManager: this._contentsManager,
       path: currentDir
     });
+    this._fileModel = filesModel;
     const allFiles = await filesModel.getAllFiles();
 
     const options: ClientOptions = {
@@ -43,6 +71,7 @@ export class SandpackPanel extends IFramePanel {
       options
     );
     await this.connectSignals(filesModel, this._spClient);
+    this._isReady.resolve();
   }
 
   async connectSignals(
@@ -66,11 +95,20 @@ export class SandpackPanel extends IFramePanel {
     });
   }
 
+  async reload(): Promise<void> {
+    if (this._spClient && this._fileModel) {
+      const allFiles = await this._fileModel.getAllFiles();
+      this._spClient.updateSandbox({
+        files: allFiles
+      });
+    }
+  }
+
   private _onFileChanged(
     sender: SandpackFilesModel,
     { allFiles }: { allFiles: IDict<{ code: string }> }
   ) {
-    if (this._spClient) {
+    if (this._autoreload && this._spClient) {
       this._spClient.updateSandbox({
         files: allFiles
       });
@@ -79,4 +117,7 @@ export class SandpackPanel extends IFramePanel {
 
   private _spClient?: SandpackClient;
   private _contentsManager: Contents.IManager;
+  private _fileModel: SandpackFilesModel | undefined;
+  private _autoreload = false;
+  private _isReady = new PromiseDelegate<void>();
 }

package/src/swConnection/mainConnectionManager.ts

@@ -1,9 +1,9 @@
-import { arrayBufferToBase64 } from '../tools';
+import { arrayBufferToBase64, stringToBase64 } from '../tools';
 import {
+  IBasePythonServer,
   IBroadcastMessage,
   IConnectionManager,
-  IDict,
-  IKernelExecutor
+  IDict
 } from '../type';
 import { UUID } from '@lumino/coreutils';
 
@@ -16,20 +16,19 @@ import { UUID } from '@lumino/coreutils';
  * It's running on the main thread
  */
 export class ConnectionManager implements IConnectionManager {
-  constructor(public instanceId: string) {
-    this._wsBroadcastChannel = new BroadcastChannel(
-      `/jupyterpack/ws/${instanceId}`
-    );
-    this._initWsChannel();
-  }
+  constructor(public instanceId: string) {}
 
   async registerConnection(
-    kernelExecutor: IKernelExecutor
+    pythonServer: IBasePythonServer
   ): Promise<{ instanceId: string; kernelClientId: string }> {
     const uuid = UUID.uuid4();
 
-    this._kernelExecutors.set(uuid, kernelExecutor);
-
+    this._pythonServers.set(uuid, pythonServer);
+    const wsbc = new BroadcastChannel(
+      `/jupyterpack/ws/${this.instanceId}/${uuid}`
+    );
+    this._initWsChannel(wsbc);
+    this._wsBroadcastChannelMap.set(`${this.instanceId}/${uuid}`, wsbc);
     return { instanceId: this.instanceId, kernelClientId: uuid };
   }
 
@@ -43,7 +42,7 @@ export class ConnectionManager implements IConnectionManager {
   }): Promise<IDict | null> {
     const { urlPath, kernelClientId, method, params, requestBody, headers } =
       options;
-    const executor = this._kernelExecutors.get(kernelClientId);
+    const executor = this._pythonServers.get(kernelClientId);
     if (!executor) {
       return null;
     }
@@ -57,8 +56,8 @@ export class ConnectionManager implements IConnectionManager {
     });
     return response;
   }
-  private _initWsChannel() {
-    this._wsBroadcastChannel.onmessage = event => {
+  private _initWsChannel(broadcastChannel: BroadcastChannel) {
+    broadcastChannel.onmessage = event => {
       const rawData = event.data;
       let data: IBroadcastMessage;
       if (typeof rawData === 'string') {
@@ -68,13 +67,13 @@ export class ConnectionManager implements IConnectionManager {
       }
 
       const { action, dest, wsUrl, payload } = data;
-      const executor = this._kernelExecutors.get(dest);
+      const executor = this._pythonServers.get(dest);
       if (!executor) {
         console.error(
           'Missing kernel handle for message',
           data,
           dest,
-          this._kernelExecutors
+          this._pythonServers
         );
         return;
       }
@@ -89,6 +88,14 @@ export class ConnectionManager implements IConnectionManager {
           });
           break;
         }
+        case 'close': {
+          executor.closeWebsocket({
+            instanceId: this.instanceId,
+            kernelId: dest,
+            wsUrl
+          });
+          break;
+        }
         case 'send': {
           let serializedData: string;
           let isBinary: boolean;
@@ -97,7 +104,8 @@ export class ConnectionManager implements IConnectionManager {
             serializedData = arrayBufferToBase64(payload as any);
             isBinary = true;
           } else if (typeof payload === 'string') {
-            serializedData = payload;
+            // convert string to base64 string to avoid encoding problem
+            serializedData = stringToBase64(payload);
             isBinary = false;
           } else {
             console.error('Unknown message type', payload);
@@ -116,6 +124,6 @@ export class ConnectionManager implements IConnectionManager {
       }
     };
   }
-  private _kernelExecutors = new Map<string, IKernelExecutor>();
-  private _wsBroadcastChannel: BroadcastChannel;
+  private _pythonServers = new Map<string, IBasePythonServer>();
+  private _wsBroadcastChannelMap: Map<string, BroadcastChannel> = new Map();
 }

package/src/token.ts

@@ -1,6 +1,10 @@
 import { Token } from '@lumino/coreutils';
-import { IConnectionManager } from './type';
+import { IConnectionManager, IJupyterpackDocTracker } from './type';
 
 export const IConnectionManagerToken = new Token<IConnectionManager>(
   'jupyterpack:connection-manager'
 );
+
+export const IJupyterpackDocTrackerToken = new Token<IJupyterpackDocTracker>(
+  'jupyterpack:dock-tracker'
+);

package/src/tools.ts

@@ -1,3 +1,25 @@
+import logoStr from '../style/icons/box.svg';
+import autoReloadStr from '../style/icons/autoreload.svg';
+import linkStr from '../style/icons/externallink.svg';
+import { LabIcon } from '@jupyterlab/ui-components';
+
+export const IS_LITE = !!document.getElementById('jupyter-lite-main');
+
+export const logoIcon = new LabIcon({
+  name: 'jupyterpack:logo',
+  svgstr: logoStr
+});
+
+export const autoReloadIcon = new LabIcon({
+  name: 'jupyterpack:autoReload',
+  svgstr: autoReloadStr
+});
+
+export const linkIcon = new LabIcon({
+  name: 'jupyterpack:externalLink',
+  svgstr: linkStr
+});
+
 export function removePrefix(path: string, prefix: string): string {
   if (path.startsWith(prefix)) {
     return path.slice(prefix.length);
@@ -31,6 +53,15 @@ export function base64ToString(base64: string): string {
   return new TextDecoder('utf-8').decode(bytes);
 }
 
+export function stringToBase64(str: string): string {
+  const bytes = new TextEncoder().encode(str);
+  let binary = '';
+  for (let i = 0; i < bytes.length; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return window.btoa(binary);
+}
+
 export function stringOrNone(content?: string) {
   return content ? `"${content}"` : 'None';
 }

package/src/type.ts

@@ -1,5 +1,8 @@
+import { DocumentWidget } from '@jupyterlab/docregistry';
 import { KernelMessage } from '@jupyterlab/services';
 import { IDisposable } from '@lumino/disposable';
+import { IWidgetTracker } from '@jupyterlab/apputils';
+import { ISignal } from '@lumino/signaling';
 
 export interface IDict<T = any> {
   [key: string]: T;
@@ -23,13 +26,17 @@ export enum JupyterPackFramework {
   REACT = 'react',
   DASH = 'dash',
   STREAMLIT = 'streamlit',
-  TORNADO = 'tornado'
+  TORNADO = 'tornado',
+  SHINY = 'shiny',
+  STARLETTE = 'starlette'
 }
 export interface IJupyterPackFileFormat {
   entry: string;
   framework: JupyterPackFramework;
   name?: string;
-  metadata?: IDict;
+  metadata?: {
+    autoreload?: boolean;
+  };
   rootUrl?: string;
 }
 
@@ -44,7 +51,15 @@ export interface IKernelExecutorParams {
   params?: string;
   requestBody?: ArrayBuffer;
 }
+
 export interface IKernelExecutor extends IDisposable {
+  executeCode(
+    code: KernelMessage.IExecuteRequestMsg['content'],
+    waitForResult?: boolean
+  ): Promise<string | null>;
+}
+
+export interface IBasePythonServer extends IDisposable {
   getResponse(options: IKernelExecutorParams): Promise<IDict>;
   openWebsocket(options: {
     instanceId: string;
@@ -52,16 +67,17 @@ export interface IKernelExecutor extends IDisposable {
     wsUrl: string;
     protocol?: string;
   }): Promise<void>;
+  closeWebsocket(options: {
+    instanceId: string;
+    kernelId: string;
+    wsUrl: string;
+  }): Promise<void>;
   sendWebsocketMessage(options: {
     instanceId: string;
     kernelId: string;
     wsUrl: string;
     message: string;
   }): Promise<void>;
-  executeCode(
-    code: KernelMessage.IExecuteRequestMsg['content'],
-    waitForResult?: boolean
-  ): Promise<string | null>;
   init(options: {
     entryPath?: string;
     initCode?: string;
@@ -69,6 +85,10 @@ export interface IKernelExecutor extends IDisposable {
     kernelClientId: string;
   }): Promise<void>;
   disposePythonServer(): Promise<void>;
+  reloadPythonServer(options: {
+    entryPath?: string;
+    initCode?: string;
+  }): Promise<void>;
   getResponseFunctionFactory(options: {
     urlPath: string;
     method: string;
@@ -80,9 +100,28 @@ export interface IKernelExecutor extends IDisposable {
 
 export interface IConnectionManager {
   registerConnection(
-    kernelExecutor: IKernelExecutor
+    kernelExecutor: IBasePythonServer
   ): Promise<{ instanceId: string; kernelClientId: string }>;
   generateResponse(
     option: { kernelClientId: string } & IKernelExecutorParams
   ): Promise<IDict | null>;
 }
+
+export type IJupyterpackDocTracker = IWidgetTracker<DocumentWidget>;
+
+export interface IPythonWidgetModel extends IDisposable {
+  connectionManager: IConnectionManager;
+  serverReloaded: ISignal<IPythonWidgetModel, void>;
+  kernelStatusChanged: ISignal<IPythonWidgetModel, 'started' | 'stopped'>;
+  reload(): Promise<void>;
+  initialize(): Promise<
+    | {
+        success: true;
+        instanceId: string;
+        kernelClientId: string;
+        rootUrl: string;
+        framework: JupyterPackFramework;
+      }
+    | { success: false; error: string }
+  >;
+}

package/src/websocket/websocket.ts

@@ -59,7 +59,9 @@
     }
     return data;
   };
-  const bcWsChannel = new BroadcastChannel(`/jupyterpack/ws/${instanceId}`);
+  const bcWsChannel = new BroadcastChannel(
+    `/jupyterpack/ws/${instanceId}/${kernelClientId}`
+  );
 
   class BroadcastChannelWebSocket implements WebSocket {
     constructor(url: string | URL, protocols?: string | string[]) {
@@ -109,6 +111,10 @@
         cb();
       }
       this._eventHandlers['close'] = [];
+      sendTypedMessage({
+        action: 'close',
+        wsUrl: this.url
+      });
       bcWsChannel.removeEventListener('message', this._bcMessageHandler);
 
       this.readyState = this.CLOSED;
@@ -168,10 +174,12 @@
       } else {
         data = rawData;
       }
+
       const { action, dest, wsUrl, payload } = data;
       if (dest !== kernelClientId || wsUrl !== this.url) {
         return;
       }
+
       switch (action) {
         case 'connected': {
           this.readyState = this.OPEN;

package/style/base.css

@@ -49,3 +49,10 @@
       0 0 0 0 rgb(212 72 13 / 100%);
   }
 }
+
+.specta-main-content-panel .jupyterpack-toolbar {
+  display: none;
+  height: 0 !important;
+  width: 0 !important;
+  min-height: 0 !important;
+}

package/style/icons/autoreload.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<svg height="800px" width="800px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+	<g>
+		<path d="M403.925,108.102c-27.595-27.595-62.899-47.558-102.459-56.29L304.182,0L201.946,53.867l-27.306,14.454
+		l-5.066,2.654l8.076,4.331l38.16,20.542l81.029,43.602l2.277-42.859c28.265,7.546,53.438,22.53,73.623,42.638
+		c29.94,29.939,48.358,71.119,48.358,116.776c0,23.407-4.843,45.58-13.575,65.687l40.37,17.532
+		c11.076-25.463,17.242-53.637,17.242-83.219C465.212,198.306,441.727,145.904,403.925,108.102z"
+			fill="var(--jp-inverse-layout-color3)" />
+		<path d="M296.256,416.151l-81.101-43.612l-2.272,42.869c-28.26-7.555-53.51-22.53-73.618-42.636
+		c-29.945-29.95-48.364-71.12-48.364-116.767c0-23.427,4.844-45.522,13.576-65.697l-40.37-17.531
+		c-11.076,25.53-17.242,53.723-17.242,83.228c0,57.679,23.407,110.157,61.21,147.893c27.595,27.594,62.899,47.548,102.453,56.202
+		l-2.716,51.9l102.169-53.878l27.455-14.454l4.988-2.643l-7.999-4.332L296.256,416.151z"
+			fill="var(--jp-inverse-layout-color3)" />
+	</g>
+</svg>

package/style/icons/box.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M17.5777 4.43152L15.5777 3.38197C13.8221 2.46066 12.9443 2 12 2C11.0557 2 10.1779 2.46066 8.42229 3.38197L6.42229 4.43152C4.64855 5.36234 3.6059 5.9095 2.95969 6.64132L12 11.1615L21.0403 6.64132C20.3941 5.9095 19.3515 5.36234 17.5777 4.43152Z"
+    fill="var(--jp-inverse-layout-color3)" />
+  <path
+    d="M21.7484 7.96435L12.75 12.4635V21.904C13.4679 21.7252 14.2848 21.2965 15.5777 20.618L17.5777 19.5685C19.7294 18.4393 20.8052 17.8748 21.4026 16.8603C22 15.8458 22 14.5833 22 12.0585V11.9415C22 10.0489 22 8.86558 21.7484 7.96435Z"
+    fill="var(--jp-inverse-layout-color3)" />
+  <path
+    d="M11.25 21.904V12.4635L2.25164 7.96434C2 8.86557 2 10.0489 2 11.9415V12.0585C2 14.5833 2 15.8458 2.5974 16.8603C3.19479 17.8748 4.27063 18.4393 6.42229 19.5685L8.42229 20.618C9.71524 21.2965 10.5321 21.7252 11.25 21.904Z"
+    fill="var(--jp-inverse-layout-color3)" />
+</svg>