jupyterpack 0.5.2 → 0.5.4

package/README.md

@@ -7,7 +7,7 @@
 
 ## Features
 
-- **Python Web Apps**: Serve Python web applications directly in the browser using JupyterLite's in-browser Python kernel. `jupyterpack` currently supports Dash, Streamlit and Shiny for Python. You can also use `jupyterpack` to serve any `asgi` or `wsgi` Python web application.
+- **Python Web Apps**: Serve Python web applications directly in the browser using JupyterLite's in-browser Python kernel. `jupyterpack` currently supports Dash, Streamlit and Shiny for Python. You can also use `jupyterpack` to serve any `Starlette` or `Tornado` application.
   .
 - **JavaScript Web Apps**: Bundle and serve JavaScript web applications using in-browser bundlers.
 

package/lib/document/plugin.d.ts

@@ -1,3 +1,4 @@
 import { JupyterFrontEndPlugin } from '@jupyterlab/application';
 import { IJupyterpackDocTracker } from '../type';
 export declare const spkPlugin: JupyterFrontEndPlugin<IJupyterpackDocTracker>;
+export declare const launcherPlugin: JupyterFrontEndPlugin<void>;

package/lib/document/plugin.js

@@ -1,8 +1,11 @@
-import { JupyterPackWidgetFactory } from './widgetFactory';
-import { IConnectionManagerToken, IJupyterpackDocTrackerToken } from '../token';
+import { JupyterPackFramework } from './../type';
 import { WidgetTracker } from '@jupyterlab/apputils';
-import { logoIcon } from '../tools';
+import { ILauncher } from '@jupyterlab/launcher';
+import { IConnectionManagerToken, IJupyterpackDocTrackerToken } from '../token';
+import { dashIcon, logoIcon, shinyIcon, streamlitIcon } from '../tools';
 import { addCommands } from './commands';
+import { JupyterPackWidgetFactory } from './widgetFactory';
+import { generateAppFiles } from './templates';
 const FACTORY = 'jupyterpack';
 const CONTENT_TYPE = 'jupyterpack';
 export const spkPlugin = {
@@ -47,3 +50,113 @@ export const spkPlugin = {
         return tracker;
     }
 };
+export const launcherPlugin = {
+    id: 'jupyterpack:spklauncher',
+    optional: [ILauncher],
+    autoStart: true,
+    provides: IJupyterpackDocTrackerToken,
+    activate: (app, launcher) => {
+        if (!launcher) {
+            return;
+        }
+        const { commands } = app;
+        const commandId = 'jupyterpack:create-new-file';
+        const dashCommandId = 'jupyterpack:create-dash-app';
+        const streamlitCommandId = 'jupyterpack:create-streamlit-app';
+        const shinyCommandId = 'jupyterpack:create-shiny-app';
+        commands.addCommand(commandId, {
+            label: 'New SPK File',
+            icon: logoIcon,
+            caption: 'Create a new SPK fike',
+            execute: async (args) => {
+                const cwd = args['cwd'];
+                const contentsManager = app.serviceManager.contents;
+                let model = await contentsManager.newUntitled({
+                    path: cwd,
+                    type: 'file',
+                    ext: '.spk'
+                });
+                const spkContent = `
+{
+  "name": "${model.name}",
+  "entry": "",
+  "framework": "",
+  "rootUrl": "/",
+  "metadata": {
+    "autoreload": true
+  },
+  "dependencies": {
+    "mamba": [],
+    "pip": []
+  }
+}  
+`;
+                model = await contentsManager.save(model.path, {
+                    ...model,
+                    format: 'text',
+                    size: undefined,
+                    content: spkContent
+                });
+            }
+        });
+        commands.addCommand(dashCommandId, {
+            label: 'Dash App',
+            icon: dashIcon,
+            caption: 'Create a new Dash Application',
+            execute: async (args) => {
+                const cwd = args['cwd'];
+                await generateAppFiles({
+                    contentsManager: app.serviceManager.contents,
+                    cwd,
+                    framework: JupyterPackFramework.DASH
+                });
+            }
+        });
+        commands.addCommand(streamlitCommandId, {
+            label: 'Streamlit App',
+            icon: streamlitIcon,
+            caption: 'Create a new Streamlit Application',
+            execute: async (args) => {
+                const cwd = args['cwd'];
+                await generateAppFiles({
+                    contentsManager: app.serviceManager.contents,
+                    cwd,
+                    framework: JupyterPackFramework.STREAMLIT
+                });
+            }
+        });
+        commands.addCommand(shinyCommandId, {
+            label: 'Shiny App',
+            icon: shinyIcon,
+            caption: 'Create a new Shiny Application',
+            execute: async (args) => {
+                const cwd = args['cwd'];
+                await generateAppFiles({
+                    contentsManager: app.serviceManager.contents,
+                    cwd,
+                    framework: JupyterPackFramework.SHINY
+                });
+            }
+        });
+        launcher.add({
+            command: commandId,
+            category: 'JupyterPack',
+            rank: 1
+        });
+        launcher.add({
+            command: dashCommandId,
+            category: 'JupyterPack',
+            rank: 2
+        });
+        launcher.add({
+            command: streamlitCommandId,
+            category: 'JupyterPack',
+            rank: 3
+        });
+        launcher.add({
+            command: shinyCommandId,
+            category: 'JupyterPack',
+            rank: 4
+        });
+    }
+};

package/lib/document/templates/dash.d.ts

@@ -0,0 +1 @@
+export declare const DASH_APP = "\n# This example is taken from the Dash official documentation (https://dash.plotly.com/layout)\n\nimport plotly.express as px\nimport pandas as pd\nfrom dash import Dash, html, dcc\napp = Dash()\n\n# assume you have a \"long-form\" data frame\n# see https://plotly.com/python/px-arguments/ for more options\ndf = pd.DataFrame({\n    \"Fruit\": [\"Apples\", \"Oranges\", \"Bananas\", \"Apples\", \"Oranges\", \"Bananas\"],\n    \"Amount\": [4, 1, 2, 2, 4, 5],\n    \"City\": [\"SF\", \"SF\", \"SF\", \"Montreal\", \"Montreal\", \"Montreal\"]\n})\n\nfig = px.bar(df, x=\"Fruit\", y=\"Amount\", color=\"City\", barmode=\"group\")\n\napp.layout = html.Div(children=[\n    html.H1(children='Hello Dash'),\n\n    html.Div(children='''\n        Dash: A web application framework for your data.\n    '''),\n\n    dcc.Graph(\n        id='example-graph',\n        figure=fig\n    )\n])";

package/lib/document/templates/dash.js

@@ -0,0 +1,30 @@
+export const DASH_APP = `
+# This example is taken from the Dash official documentation (https://dash.plotly.com/layout)
+
+import plotly.express as px
+import pandas as pd
+from dash import Dash, html, dcc
+app = Dash()
+
+# assume you have a "long-form" data frame
+# see https://plotly.com/python/px-arguments/ for more options
+df = pd.DataFrame({
+    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
+    "Amount": [4, 1, 2, 2, 4, 5],
+    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
+})
+
+fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")
+
+app.layout = html.Div(children=[
+    html.H1(children='Hello Dash'),
+
+    html.Div(children='''
+        Dash: A web application framework for your data.
+    '''),
+
+    dcc.Graph(
+        id='example-graph',
+        figure=fig
+    )
+])`;

package/lib/document/templates/index.d.ts

@@ -0,0 +1,7 @@
+import { Contents } from '@jupyterlab/services';
+import { JupyterPackFramework } from '../../type';
+export declare function generateAppFiles(options: {
+    contentsManager: Contents.IManager;
+    framework: JupyterPackFramework;
+    cwd: string;
+}): Promise<void>;

package/lib/document/templates/index.js

@@ -0,0 +1,56 @@
+import { JupyterPackFramework } from '../../type';
+import { DASH_APP } from './dash';
+import { STREAMLIT_APP } from './streamlit';
+import { SHINY_APP } from './shiny';
+export async function generateAppFiles(options) {
+    const { contentsManager, framework, cwd } = options;
+    const pyModel = await contentsManager.newUntitled({
+        path: cwd,
+        type: 'file',
+        ext: '.py'
+    });
+    let appContent = '';
+    switch (framework) {
+        case JupyterPackFramework.DASH: {
+            appContent = DASH_APP;
+            break;
+        }
+        case JupyterPackFramework.STREAMLIT: {
+            appContent = STREAMLIT_APP;
+            break;
+        }
+        case JupyterPackFramework.SHINY: {
+            appContent = SHINY_APP;
+            break;
+        }
+        default:
+            break;
+    }
+    await contentsManager.save(pyModel.path, {
+        ...pyModel,
+        format: 'text',
+        size: undefined,
+        content: appContent
+    });
+    let model = await contentsManager.newUntitled({
+        path: cwd,
+        type: 'file',
+        ext: '.spk'
+    });
+    const spkContent = `
+{
+  "name": "${model.name}",
+  "entry": "${pyModel.name}",
+  "framework": "${framework}",
+  "dependencies": {
+    "mamba": []
+  }
+}  
+`;
+    model = await contentsManager.save(model.path, {
+        ...model,
+        format: 'text',
+        size: undefined,
+        content: spkContent
+    });
+}

package/lib/document/templates/shiny.d.ts

@@ -0,0 +1 @@
+export declare const SHINY_APP = "\n# This example is taken from the shinylive official playground (https://shinylive.io/py/examples/#modules)\n\nfrom shiny import App, module, reactive, render, ui\n\n\n# ============================================================\n# Counter module\n# ============================================================\n@module.ui\ndef counter_ui(label: str = \"Increment counter\") -> ui.TagChild:\n    return ui.card(\n        ui.h2(\"This is \" + label),\n        ui.input_action_button(id=\"button\", label=label),\n        ui.output_code(id=\"out\"),\n    )\n\n\n@module.server\ndef counter_server(input, output, session, starting_value: int = 0):\n    count: reactive.value[int] = reactive.value(starting_value)\n\n    @reactive.effect\n    @reactive.event(input.button)\n    def _():\n        count.set(count() + 1)\n\n    @render.code\n    def out() -> str:\n        return f\"Click count is {count()}\"\n\n\n# =============================================================================\n# App that uses module\n# =============================================================================\napp_ui = ui.page_fluid(\n    counter_ui(\"counter1\", \"Counter 1\"),\n    counter_ui(\"counter2\", \"Counter 2\"),\n)\n\n\ndef server(input, output, session):\n    counter_server(\"counter1\")\n    counter_server(\"counter2\")\n\n\napp = App(app_ui, server)\n\n";

package/lib/document/templates/shiny.js

@@ -0,0 +1,49 @@
+export const SHINY_APP = `
+# This example is taken from the shinylive official playground (https://shinylive.io/py/examples/#modules)
+
+from shiny import App, module, reactive, render, ui
+
+
+# ============================================================
+# Counter module
+# ============================================================
+@module.ui
+def counter_ui(label: str = "Increment counter") -> ui.TagChild:
+    return ui.card(
+        ui.h2("This is " + label),
+        ui.input_action_button(id="button", label=label),
+        ui.output_code(id="out"),
+    )
+
+
+@module.server
+def counter_server(input, output, session, starting_value: int = 0):
+    count: reactive.value[int] = reactive.value(starting_value)
+
+    @reactive.effect
+    @reactive.event(input.button)
+    def _():
+        count.set(count() + 1)
+
+    @render.code
+    def out() -> str:
+        return f"Click count is {count()}"
+
+
+# =============================================================================
+# App that uses module
+# =============================================================================
+app_ui = ui.page_fluid(
+    counter_ui("counter1", "Counter 1"),
+    counter_ui("counter2", "Counter 2"),
+)
+
+
+def server(input, output, session):
+    counter_server("counter1")
+    counter_server("counter2")
+
+
+app = App(app_ui, server)
+
+`;

package/lib/document/templates/streamlit.d.ts

@@ -0,0 +1 @@
+export declare const STREAMLIT_APP = "\n# This example is taken from the streamlit official playground (https://streamlit.io/playground?example=charts)\n\nimport streamlit as st\nimport pandas as pd\nimport numpy as np\n\nst.write(\n    \"Streamlit supports a wide range of data visualizations, including [Plotly, Altair, and Bokeh charts](https://docs.streamlit.io/develop/api-reference/charts). \uD83D\uDCCA And with over 20 input widgets, you can easily make your data interactive!\"\n)\n\nall_users = [\"Alice\", \"Bob\", \"Charly\"]\nwith st.container(border=True):\n    users = st.multiselect(\"Users\", all_users, default=all_users)\n    rolling_average = st.toggle(\"Rolling average\")\n\nnp.random.seed(42)\ndata = pd.DataFrame(np.random.randn(20, len(users)), columns=users)\nif rolling_average:\n    data = data.rolling(7).mean().dropna()\n\ntab1, tab2 = st.tabs([\"Chart\", \"Dataframe\"])\ntab1.line_chart(data, height=250)\ntab2.dataframe(data, height=250, width=True)\n\n";

package/lib/document/templates/streamlit.js

@@ -0,0 +1,26 @@
+export const STREAMLIT_APP = `
+# This example is taken from the streamlit official playground (https://streamlit.io/playground?example=charts)
+
+import streamlit as st
+import pandas as pd
+import numpy as np
+
+st.write(
+    "Streamlit supports a wide range of data visualizations, including [Plotly, Altair, and Bokeh charts](https://docs.streamlit.io/develop/api-reference/charts). 📊 And with over 20 input widgets, you can easily make your data interactive!"
+)
+
+all_users = ["Alice", "Bob", "Charly"]
+with st.container(border=True):
+    users = st.multiselect("Users", all_users, default=all_users)
+    rolling_average = st.toggle("Rolling average")
+
+np.random.seed(42)
+data = pd.DataFrame(np.random.randn(20, len(users)), columns=users)
+if rolling_average:
+    data = data.rolling(7).mean().dropna()
+
+tab1, tab2 = st.tabs(["Chart", "Dataframe"])
+tab1.line_chart(data, height=250)
+tab2.dataframe(data, height=250, width=True)
+
+`;

package/lib/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (import("@jupyterlab/application").JupyterFrontEndPlugin<import("./type").IJupyterpackDocTracker> | import("@jupyterlab/application").JupyterFrontEndPlugin<import("./type").IConnectionManager>)[];
+declare const _default: (import("@jupyterlab/application").JupyterFrontEndPlugin<import("./type").IJupyterpackDocTracker> | import("@jupyterlab/application").JupyterFrontEndPlugin<void> | import("@jupyterlab/application").JupyterFrontEndPlugin<import("./type").IConnectionManager>)[];
 export default _default;

package/lib/index.js

@@ -1,3 +1,3 @@
-import { spkPlugin } from './document/plugin';
+import { launcherPlugin, spkPlugin } from './document/plugin';
 import { swPlugin } from './swConnection';
-export default [swPlugin, spkPlugin];
+export default [swPlugin, spkPlugin, launcherPlugin];

package/lib/tools.d.ts

@@ -3,6 +3,9 @@ export declare const IS_LITE: boolean;
 export declare const logoIcon: LabIcon;
 export declare const autoReloadIcon: LabIcon;
 export declare const linkIcon: LabIcon;
+export declare const dashIcon: LabIcon;
+export declare const streamlitIcon: LabIcon;
+export declare const shinyIcon: LabIcon;
 export declare function removePrefix(path: string, prefix: string): string;
 export declare function arrayBufferToBase64(buffer: ArrayBuffer): string;
 export declare function base64ToArrayBuffer(base64: string): Uint8Array;

package/lib/tools.js

@@ -1,6 +1,9 @@
 import logoStr from '../style/icons/box.svg';
 import autoReloadStr from '../style/icons/autoreload.svg';
 import linkStr from '../style/icons/externallink.svg';
+import dashStr from '../style/icons/Plotly-Logo-Black.svg';
+import streamlitStr from '../style/icons/streamlit-logo-primary.svg';
+import shinyStr from '../style/icons/shiny-for-python.svg';
 import { LabIcon } from '@jupyterlab/ui-components';
 export const IS_LITE = !!document.getElementById('jupyter-lite-main');
 export const logoIcon = new LabIcon({
@@ -15,6 +18,18 @@ export const linkIcon = new LabIcon({
     name: 'jupyterpack:externalLink',
     svgstr: linkStr
 });
+export const dashIcon = new LabIcon({
+    name: 'jupyterpack:dashBlack',
+    svgstr: dashStr
+});
+export const streamlitIcon = new LabIcon({
+    name: 'jupyterpack:streamlitBlack',
+    svgstr: streamlitStr
+});
+export const shinyIcon = new LabIcon({
+    name: 'jupyterpack:shinyLogo',
+    svgstr: shinyStr
+});
 export function removePrefix(path, prefix) {
     if (path.startsWith(prefix)) {
         return path.slice(prefix.length);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jupyterpack",
-    "version": "0.5.2",
+    "version": "0.5.4",
     "description": "A JupyterLab extension for serving web app.",
     "keywords": [
         "jupyter",
@@ -61,6 +61,7 @@
     "dependencies": {
         "@codesandbox/sandpack-client": "^2.19.8",
         "@jupyterlab/application": "^4.0.0",
+        "@jupyterlab/launcher": "^4.0.0",
         "comlink": "^4.4.2",
         "strip-ansi": "^7.1.2"
     },

package/src/document/plugin.ts

@@ -1,15 +1,18 @@
+import { JupyterPackFramework } from './../type';
 import {
   JupyterFrontEnd,
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
-
-import { JupyterPackWidgetFactory } from './widgetFactory';
-import { IConnectionManager, IJupyterpackDocTracker } from '../type';
-import { IConnectionManagerToken, IJupyterpackDocTrackerToken } from '../token';
 import { WidgetTracker } from '@jupyterlab/apputils';
 import { DocumentWidget } from '@jupyterlab/docregistry';
-import { logoIcon } from '../tools';
+import { ILauncher } from '@jupyterlab/launcher';
+
+import { IConnectionManagerToken, IJupyterpackDocTrackerToken } from '../token';
+import { dashIcon, logoIcon, shinyIcon, streamlitIcon } from '../tools';
+import { IConnectionManager, IJupyterpackDocTracker } from '../type';
 import { addCommands } from './commands';
+import { JupyterPackWidgetFactory } from './widgetFactory';
+import { generateAppFiles } from './templates';
 
 const FACTORY = 'jupyterpack';
 const CONTENT_TYPE = 'jupyterpack';
@@ -63,3 +66,119 @@ export const spkPlugin: JupyterFrontEndPlugin<IJupyterpackDocTracker> = {
     return tracker;
   }
 };
+
+export const launcherPlugin: JupyterFrontEndPlugin<void> = {
+  id: 'jupyterpack:spklauncher',
+  optional: [ILauncher],
+  autoStart: true,
+  provides: IJupyterpackDocTrackerToken,
+  activate: (app: JupyterFrontEnd, launcher: ILauncher | null): void => {
+    if (!launcher) {
+      return;
+    }
+    const { commands } = app;
+    const commandId = 'jupyterpack:create-new-file';
+    const dashCommandId = 'jupyterpack:create-dash-app';
+    const streamlitCommandId = 'jupyterpack:create-streamlit-app';
+    const shinyCommandId = 'jupyterpack:create-shiny-app';
+
+    commands.addCommand(commandId, {
+      label: 'New SPK File',
+      icon: logoIcon,
+      caption: 'Create a new SPK fike',
+      execute: async args => {
+        const cwd = args['cwd'] as string;
+        const contentsManager = app.serviceManager.contents;
+        let model = await contentsManager.newUntitled({
+          path: cwd,
+          type: 'file',
+          ext: '.spk'
+        });
+        const spkContent = `
+{
+  "name": "${model.name}",
+  "entry": "",
+  "framework": "",
+  "rootUrl": "/",
+  "metadata": {
+    "autoreload": true
+  },
+  "dependencies": {
+    "mamba": [],
+    "pip": []
+  }
+}  
+`;
+        model = await contentsManager.save(model.path, {
+          ...model,
+          format: 'text',
+          size: undefined,
+          content: spkContent
+        });
+      }
+    });
+
+    commands.addCommand(dashCommandId, {
+      label: 'Dash App',
+      icon: dashIcon,
+      caption: 'Create a new Dash Application',
+      execute: async args => {
+        const cwd = args['cwd'] as string;
+        await generateAppFiles({
+          contentsManager: app.serviceManager.contents,
+          cwd,
+          framework: JupyterPackFramework.DASH
+        });
+      }
+    });
+
+    commands.addCommand(streamlitCommandId, {
+      label: 'Streamlit App',
+      icon: streamlitIcon,
+      caption: 'Create a new Streamlit Application',
+      execute: async args => {
+        const cwd = args['cwd'] as string;
+        await generateAppFiles({
+          contentsManager: app.serviceManager.contents,
+          cwd,
+          framework: JupyterPackFramework.STREAMLIT
+        });
+      }
+    });
+
+    commands.addCommand(shinyCommandId, {
+      label: 'Shiny App',
+      icon: shinyIcon,
+      caption: 'Create a new Shiny Application',
+      execute: async args => {
+        const cwd = args['cwd'] as string;
+        await generateAppFiles({
+          contentsManager: app.serviceManager.contents,
+          cwd,
+          framework: JupyterPackFramework.SHINY
+        });
+      }
+    });
+
+    launcher.add({
+      command: commandId,
+      category: 'JupyterPack',
+      rank: 1
+    });
+    launcher.add({
+      command: dashCommandId,
+      category: 'JupyterPack',
+      rank: 2
+    });
+    launcher.add({
+      command: streamlitCommandId,
+      category: 'JupyterPack',
+      rank: 3
+    });
+    launcher.add({
+      command: shinyCommandId,
+      category: 'JupyterPack',
+      rank: 4
+    });
+  }
+};

package/src/document/templates/dash.ts

@@ -0,0 +1,30 @@
+export const DASH_APP = `
+# This example is taken from the Dash official documentation (https://dash.plotly.com/layout)
+
+import plotly.express as px
+import pandas as pd
+from dash import Dash, html, dcc
+app = Dash()
+
+# assume you have a "long-form" data frame
+# see https://plotly.com/python/px-arguments/ for more options
+df = pd.DataFrame({
+    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
+    "Amount": [4, 1, 2, 2, 4, 5],
+    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
+})
+
+fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")
+
+app.layout = html.Div(children=[
+    html.H1(children='Hello Dash'),
+
+    html.Div(children='''
+        Dash: A web application framework for your data.
+    '''),
+
+    dcc.Graph(
+        id='example-graph',
+        figure=fig
+    )
+])`;

package/src/document/templates/index.ts

@@ -0,0 +1,65 @@
+import { Contents } from '@jupyterlab/services';
+import { JupyterPackFramework } from '../../type';
+import { DASH_APP } from './dash';
+import { STREAMLIT_APP } from './streamlit';
+import { SHINY_APP } from './shiny';
+
+export async function generateAppFiles(options: {
+  contentsManager: Contents.IManager;
+  framework: JupyterPackFramework;
+  cwd: string;
+}) {
+  const { contentsManager, framework, cwd } = options;
+
+  const pyModel = await contentsManager.newUntitled({
+    path: cwd,
+    type: 'file',
+    ext: '.py'
+  });
+  let appContent = '';
+  switch (framework) {
+    case JupyterPackFramework.DASH: {
+      appContent = DASH_APP;
+      break;
+    }
+    case JupyterPackFramework.STREAMLIT: {
+      appContent = STREAMLIT_APP;
+      break;
+    }
+    case JupyterPackFramework.SHINY: {
+      appContent = SHINY_APP;
+      break;
+    }
+    default:
+      break;
+  }
+  await contentsManager.save(pyModel.path, {
+    ...pyModel,
+    format: 'text',
+    size: undefined,
+    content: appContent
+  });
+
+  let model = await contentsManager.newUntitled({
+    path: cwd,
+    type: 'file',
+    ext: '.spk'
+  });
+
+  const spkContent = `
+{
+  "name": "${model.name}",
+  "entry": "${pyModel.name}",
+  "framework": "${framework}",
+  "dependencies": {
+    "mamba": []
+  }
+}  
+`;
+  model = await contentsManager.save(model.path, {
+    ...model,
+    format: 'text',
+    size: undefined,
+    content: spkContent
+  });
+}

package/src/document/templates/shiny.ts

@@ -0,0 +1,49 @@
+export const SHINY_APP = `
+# This example is taken from the shinylive official playground (https://shinylive.io/py/examples/#modules)
+
+from shiny import App, module, reactive, render, ui
+
+
+# ============================================================
+# Counter module
+# ============================================================
+@module.ui
+def counter_ui(label: str = "Increment counter") -> ui.TagChild:
+    return ui.card(
+        ui.h2("This is " + label),
+        ui.input_action_button(id="button", label=label),
+        ui.output_code(id="out"),
+    )
+
+
+@module.server
+def counter_server(input, output, session, starting_value: int = 0):
+    count: reactive.value[int] = reactive.value(starting_value)
+
+    @reactive.effect
+    @reactive.event(input.button)
+    def _():
+        count.set(count() + 1)
+
+    @render.code
+    def out() -> str:
+        return f"Click count is {count()}"
+
+
+# =============================================================================
+# App that uses module
+# =============================================================================
+app_ui = ui.page_fluid(
+    counter_ui("counter1", "Counter 1"),
+    counter_ui("counter2", "Counter 2"),
+)
+
+
+def server(input, output, session):
+    counter_server("counter1")
+    counter_server("counter2")
+
+
+app = App(app_ui, server)
+
+`;

package/src/document/templates/streamlit.ts

@@ -0,0 +1,26 @@
+export const STREAMLIT_APP = `
+# This example is taken from the streamlit official playground (https://streamlit.io/playground?example=charts)
+
+import streamlit as st
+import pandas as pd
+import numpy as np
+
+st.write(
+    "Streamlit supports a wide range of data visualizations, including [Plotly, Altair, and Bokeh charts](https://docs.streamlit.io/develop/api-reference/charts). 📊 And with over 20 input widgets, you can easily make your data interactive!"
+)
+
+all_users = ["Alice", "Bob", "Charly"]
+with st.container(border=True):
+    users = st.multiselect("Users", all_users, default=all_users)
+    rolling_average = st.toggle("Rolling average")
+
+np.random.seed(42)
+data = pd.DataFrame(np.random.randn(20, len(users)), columns=users)
+if rolling_average:
+    data = data.rolling(7).mean().dropna()
+
+tab1, tab2 = st.tabs(["Chart", "Dataframe"])
+tab1.line_chart(data, height=250)
+tab2.dataframe(data, height=250, width=True)
+
+`;

package/src/index.ts

@@ -1,4 +1,4 @@
-import { spkPlugin } from './document/plugin';
+import { launcherPlugin, spkPlugin } from './document/plugin';
 import { swPlugin } from './swConnection';
 
-export default [swPlugin, spkPlugin];
+export default [swPlugin, spkPlugin, launcherPlugin];

package/src/tools.ts

@@ -1,6 +1,9 @@
 import logoStr from '../style/icons/box.svg';
 import autoReloadStr from '../style/icons/autoreload.svg';
 import linkStr from '../style/icons/externallink.svg';
+import dashStr from '../style/icons/Plotly-Logo-Black.svg';
+import streamlitStr from '../style/icons/streamlit-logo-primary.svg';
+import shinyStr from '../style/icons/shiny-for-python.svg';
 import { LabIcon } from '@jupyterlab/ui-components';
 
 export const IS_LITE = !!document.getElementById('jupyter-lite-main');
@@ -20,6 +23,20 @@ export const linkIcon = new LabIcon({
   svgstr: linkStr
 });
 
+export const dashIcon = new LabIcon({
+  name: 'jupyterpack:dashBlack',
+  svgstr: dashStr
+});
+
+export const streamlitIcon = new LabIcon({
+  name: 'jupyterpack:streamlitBlack',
+  svgstr: streamlitStr
+});
+
+export const shinyIcon = new LabIcon({
+  name: 'jupyterpack:shinyLogo',
+  svgstr: shinyStr
+});
 export function removePrefix(path: string, prefix: string): string {
   if (path.startsWith(prefix)) {
     return path.slice(prefix.length);

package/style/base.css

@@ -56,3 +56,13 @@
   width: 0 !important;
   min-height: 0 !important;
 }
+
+.jp-LauncherCard[data-category='JupyterPack'] {
+  .jp-LauncherCard-icon div {
+    width: 98% !important;
+  }
+
+  .jp-LauncherCard-icon svg {
+    width: 98% !important;
+  }
+}

package/style/icons/Plotly-Logo-Black.svg

@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 100">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#linear-gradient);
+      }
+
+      .cls-1, .cls-2, .cls-3 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #8c99cd;
+      }
+
+      .cls-3 {
+        fill: var(--jp-text-editor-icon-color, var(--jp-inverse-layout-color3));
+      }
+    </style>
+    <linearGradient id="linear-gradient" x1="44.87" y1="40.43" x2="102.87" y2="40.43" gradientTransform="translate(2 -3)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ff2c6d"/>
+      <stop offset="1" stop-color="#7fe4ff"/>
+    </linearGradient>
+  </defs>
+  <g>
+    <g>
+      <circle class="cls-2" cx="84.16" cy="45.71" r="4.14"/>
+      <circle class="cls-2" cx="100.73" cy="29.14" r="4.14"/>
+      <circle class="cls-2" cx="84.16" cy="29.14" r="4.14"/>
+      <circle class="cls-2" cx="67.59" cy="29.14" r="4.14"/>
+      <circle class="cls-2" cx="51.01" cy="29.14" r="4.14"/>
+      <circle class="cls-2" cx="51.01" cy="45.71" r="4.14"/>
+    </g>
+    <g>
+      <circle class="cls-1" cx="84.16" cy="45.71" r="4.14"/>
+      <circle class="cls-1" cx="100.73" cy="29.14" r="4.14"/>
+      <circle class="cls-1" cx="84.16" cy="29.14" r="4.14"/>
+      <circle class="cls-1" cx="67.59" cy="29.14" r="4.14"/>
+      <circle class="cls-1" cx="51.01" cy="29.14" r="4.14"/>
+      <circle class="cls-1" cx="51.01" cy="45.71" r="4.14"/>
+    </g>
+  </g>
+  <g>
+    <g>
+      <rect class="cls-3" x="157.34" y="32.94" width="5.78" height="34.68" rx="2.89" ry="2.89"/>
+      <rect class="cls-3" x="218.03" y="32.94" width="5.78" height="34.68" rx="2.89" ry="2.89"/>
+      <path class="cls-3" d="M139.99,38.72c-2.2,0-4.25.66-6,1.79-.43-1.05-1.47-1.79-2.67-1.79-1.6,0-2.89,1.29-2.89,2.89v28.9c0,1.6,1.29,2.89,2.89,2.89s2.89-1.29,2.89-2.89v-4.55c1.7,1.05,3.67,1.66,5.78,1.66,6.38,0,11.56-5.55,11.56-12.39v-4.13c0-6.84-5.18-12.39-11.56-12.39ZM145.78,55.54c0,3.48-2.59,6.31-5.78,6.31s-5.78-2.82-5.78-6.31v-4.73c0-3.48,2.59-6.31,5.78-6.31s5.78,2.82,5.78,6.31v4.73Z"/>
+      <path class="cls-3" d="M180.46,38.72h0c-6.38,0-11.56,5.55-11.56,12.39v4.13c0,6.84,5.18,12.39,11.56,12.39h0c6.38,0,11.56-5.55,11.56-12.39v-4.13c0-6.84-5.18-12.39-11.56-12.39ZM186.24,55.54c0,3.48-2.59,6.31-5.78,6.31s-5.78-2.82-5.78-6.31v-4.73c0-3.48,2.59-6.31,5.78-6.31s5.78,2.82,5.78,6.31v4.73Z"/>
+      <path class="cls-3" d="M209.36,61.84c-3.19,0-5.78-2.59-5.78-5.78v-11.56h5.78c1.6,0,2.89-1.29,2.89-2.89s-1.29-2.89-2.89-2.89h-5.78v-2.89c0-1.6-1.29-2.89-2.89-2.89s-2.89,1.29-2.89,2.89v20.23c0,6.37,5.19,11.56,11.56,11.56,1.6,0,2.89-1.29,2.89-2.89s-1.29-2.89-2.89-2.89Z"/>
+      <path class="cls-3" d="M249.95,38.96c-1.47-.63-3.17.05-3.8,1.52l-5.99,13.98-5.99-13.98c-.63-1.47-2.33-2.15-3.8-1.52-1.47.63-2.15,2.33-1.52,3.8l8.16,19.04-.97,2.26c-.88,2.11-2.92,3.51-5.21,3.56-1.6.04-2.86,1.36-2.82,2.96.04,1.57,1.32,2.82,2.89,2.82.02,0,.05,0,.07,0,4.57-.11,8.65-2.9,10.4-7.09l10.1-23.55c.63-1.47-.05-3.17-1.52-3.8Z"/>
+    </g>
+    <g>
+      <path class="cls-3" d="M51.01,58.14c-2.29,0-4.14,1.85-4.14,4.14v16.57c0,2.29,1.85,4.14,4.14,4.14s4.14-1.85,4.14-4.14v-16.57c0-2.29-1.85-4.14-4.14-4.14Z"/>
+      <path class="cls-3" d="M84.16,58.14c-2.29,0-4.14,1.85-4.14,4.14v16.57c0,2.29,1.85,4.14,4.14,4.14s4.14-1.85,4.14-4.14v-16.57c0-2.29-1.85-4.14-4.14-4.14Z"/>
+      <path class="cls-3" d="M67.59,41.57c-2.29,0-4.14,1.85-4.14,4.14v33.14c0,2.29,1.85,4.14,4.14,4.14s4.14-1.85,4.14-4.14v-33.14c0-2.29-1.85-4.14-4.14-4.14Z"/>
+      <path class="cls-3" d="M100.73,41.57c-2.29,0-4.14,1.85-4.14,4.14v33.14c0,2.29,1.85,4.14,4.14,4.14s4.14-1.85,4.14-4.14v-33.14c0-2.29-1.85-4.14-4.14-4.14Z"/>
+    </g>
+  </g>
+</svg>

package/style/icons/shiny-for-python.svg

@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	y="0px" viewBox="0 0 154 30" style="enable-background:new 0 0 154 30;" xml:space="preserve" width="154" height="30">
+	<style type="text/css">
+		.st0 {
+			fill: var(--jp-text-editor-icon-color, var(--jp-inverse-layout-color3));
+		}
+	</style>
+	<g id="Layer_1_00000047768344360754847990000012721607800634040751_">
+		<g>
+			<path class="st0" d="M78,13.6h-1.7v6h-1v-6h-1.1v-0.5l1.1-0.4v-0.3c0-1.7,0.8-2.5,2.2-2.5c0.4,0,0.8,0.1,1.3,0.3l-0.3,0.8
+			c-0.4-0.1-0.8-0.3-1-0.3c-0.4,0-0.6,0.1-0.9,0.4s-0.3,0.6-0.3,1.3v0.4H78V13.6z" />
+			<path class="st0" d="M85,16.3c0,1.1-0.3,1.9-0.9,2.5c-0.5,0.6-1.3,0.9-2.3,0.9c-0.6,0-1.1-0.1-1.7-0.4c-0.5-0.3-0.9-0.6-1.1-1.3
+			c-0.3-0.5-0.4-1.1-0.4-1.9c0-1.1,0.3-1.9,0.8-2.5c0.5-0.6,1.3-0.9,2.3-0.9c0.9,0,1.7,0.3,2.3,0.9C84.7,14.2,85,15.1,85,16.3z
+			 M79.7,16.3c0,0.9,0.1,1.5,0.5,1.9c0.4,0.5,0.9,0.6,1.5,0.6c0.6,0,1.1-0.3,1.5-0.6c0.4-0.4,0.5-1.1,0.5-1.9c0-0.9-0.1-1.5-0.5-1.9
+			c-0.4-0.4-0.9-0.6-1.5-0.6c-0.6,0-1.1,0.3-1.5,0.6C80,14.7,79.7,15.4,79.7,16.3z" />
+			<path class="st0" d="M89.8,12.7c0.3,0,0.5,0,0.8,0.1l-0.1,0.9c-0.3,0-0.5-0.1-0.8-0.1c-0.5,0-1,0.3-1.4,0.6s-0.6,1-0.6,1.7v3.6h-1
+			v-6.7h0.9l0.1,1.3l0,0c0.3-0.4,0.5-0.8,0.9-1C88.9,12.8,89.3,12.7,89.8,12.7z" />
+			<path class="st0" d="M104.8,10.7c0,1.3-0.4,2.3-1.3,2.9c-0.9,0.6-2.2,1-3.7,1h-1.5v5h-1.5V7h3.3C103.1,7,104.8,8.3,104.8,10.7z
+			 M98.2,13.3h1.3c1.3,0,2.3-0.3,2.8-0.6c0.6-0.4,0.9-1.1,0.9-2c0-0.9-0.3-1.4-0.8-1.9c-0.5-0.4-1.4-0.6-2.5-0.6h-1.7
+			C98.2,8.1,98.2,13.3,98.2,13.3z" />
+			<path class="st0" d="M106.1,10.2h1.5l2,5.3c0.5,1.3,0.8,2.2,0.9,2.7h0.1c0.1-0.3,0.3-0.8,0.5-1.5c0.3-0.8,1-2.9,2.3-6.6h1.5
+			l-4.1,10.8c-0.4,1-0.9,1.8-1.4,2.3s-1.1,0.6-2,0.6c-0.4,0-0.9,0-1.3-0.1v-1.1c0.3,0.1,0.6,0.1,1,0.1c1,0,1.7-0.5,2.2-1.7l0.5-1.4
+			L106.1,10.2z" />
+			<path class="st0" d="M120.2,18.6c0.3,0,0.5,0,0.8,0s0.4-0.1,0.5-0.1v1.1c-0.1,0.1-0.4,0.1-0.6,0.1s-0.6,0.1-0.8,0.1
+			c-1.8,0-2.8-1-2.8-2.9v-5.7h-1.4v-0.6l1.4-0.6l0.6-2h0.9V10h2.8v1.1h-2.9v5.6c0,0.5,0.1,1,0.4,1.3
+			C119.3,18.4,119.6,18.6,120.2,18.6z" />
+			<path class="st0" d="M129.7,19.6v-6.1c0-0.8-0.1-1.4-0.5-1.8c-0.4-0.4-0.9-0.5-1.7-0.5c-1,0-1.8,0.3-2.2,0.8
+			c-0.5,0.5-0.6,1.4-0.6,2.7v5h-1.4V6.2h1.4v4.1c0,0.5,0,0.9-0.1,1.3h0.1c0.3-0.5,0.6-0.8,1.1-1s1.1-0.4,1.8-0.4
+			c1.1,0,2,0.3,2.5,0.8c0.6,0.5,0.9,1.4,0.9,2.7v6.1h-1.4V19.6z" />
+			<path class="st0" d="M141.9,14.9c0,1.5-0.4,2.8-1.1,3.6c-0.8,0.8-1.9,1.3-3.2,1.3c-0.9,0-1.7-0.3-2.3-0.6c-0.6-0.4-1.1-1-1.5-1.7
+			c-0.4-0.8-0.5-1.7-0.5-2.5c0-1.5,0.4-2.8,1.1-3.6c0.8-0.8,1.8-1.3,3.2-1.3c1.3,0,2.4,0.4,3.2,1.3
+			C141.5,12.2,141.9,13.3,141.9,14.9z M134.8,14.9c0,1.1,0.3,2.2,0.8,2.8c0.5,0.6,1.1,0.9,2.2,0.9c0.9,0,1.7-0.3,2.2-0.9
+			c0.5-0.6,0.8-1.5,0.8-2.8c0-1.1-0.3-2.2-0.8-2.8c-0.5-0.6-1.1-0.9-2.2-0.9c-0.9,0-1.7,0.3-2.2,0.9C135,12.7,134.8,13.6,134.8,14.9
+			z" />
+			<path class="st0" d="M150.7,19.6v-6.1c0-0.8-0.1-1.4-0.5-1.8c-0.4-0.4-0.9-0.5-1.7-0.5c-1,0-1.7,0.3-2.2,0.8
+			c-0.5,0.5-0.6,1.4-0.6,2.7v5h-1.4v-9.4h1.1l0.3,1.3h0.1c0.3-0.5,0.8-0.8,1.3-1.1c0.5-0.4,1.1-0.4,1.8-0.4c1.1,0,2,0.3,2.5,0.8
+			c0.6,0.5,0.9,1.4,0.9,2.7v6.1h-1.7V19.6z" />
+		</g>
+	</g>
+	<g id="Layer_2_00000147923674847605840940000016886061676261034887_">
+		<g id="Layer_1_00000115479941224969138130000004359990092642812304_">
+			<g>
+				<path class="st0" d="M67.4,15.3c-1.4,0.8-3.3,2.8-3.6,3.1c-1.1,1.1-2.3,2-3.5,2.7h-0.1c-0.1,0-0.1-0.1-0.1-0.2
+				c0.1-0.5,0.3-1.1,0.5-1.8c0.2-1,0.4-1.6,0.5-1.9s0.3-1,0.6-2.2s0.7-2.5,1.1-4c0.5-1.7,1.1-2.8,1.7-3.3l0,0c0.1,0,0.1-0.1,0.1-0.2
+				s-0.1-0.1-0.2-0.1l-1.3,0.1c-0.6,0-1.1,0.2-1.7,0.3C61.2,7.9,61,8,60.8,8.2c-0.2,0.2-0.3,0.3-0.4,0.4l0,0
+				c-0.1,0.2-0.3,0.4-0.3,0.6c-0.1,0.3-0.2,0.5-0.3,0.7c0,0.2-0.1,0.5-0.3,0.9c-0.1,0.4-0.2,0.8-0.3,1c-0.6,1.8-1.4,3.5-2.4,5.1
+				c-1,1.7-1.9,2.5-2.6,2.6l0,0c-0.3,0-0.4-0.3-0.5-1c-0.1-1.4,0.2-3.3,1-5.4c0.7-2.2,1.5-3.7,2.3-4.5c0.1,0.1,0.2-0.1,0.2-0.2l0,0
+				c0-0.1-0.1-0.2-0.3-0.2c-1.1,0.1-2,0.3-2.6,0.6c-0.6,0.4-1.2,1.1-1.8,2.2c-0.5,0.9-0.9,2.1-1.2,3.6l0,0c-0.1,0.1-0.1,0.3-0.2,0.4
+				c-0.3,0.5-0.5,1.1-0.9,1.8c-0.3,0.6-0.6,1.2-0.9,1.7c-0.3,0.5-0.7,0.9-1.1,1.3c-0.5,0.5-0.8,0.6-1,0.7l0,0
+				c-0.2,0-0.4-0.1-0.4-0.7c-0.1-0.8,0.3-2.6,1-5.2c0.4-1.2,0.6-2,0.6-2.4c0.1-0.4,0.1-0.8,0.1-1.2c-0.1-1.3-0.8-1.9-2-1.8
+				c-1.6,0.1-3.1,0.9-4.6,2.5h-0.1c-0.1,0-0.1-0.1-0.1-0.1c0.1-0.3,0.1-0.6,0.1-0.9c0-0.3-0.2-0.6-0.4-0.7c-0.2-0.2-0.7-0.2-1.5-0.2
+				l-1.3,0.1c0,0,0,0-0.1,0s-0.1,0.1,0,0.2c0.1,0.1,0.1,0.3,0.1,0.4c0.1,0.9-0.2,2.6-0.8,4.9l-0.2,0.3c-0.1,0.1-0.2,0.3-0.4,0.8
+				c-0.3,0.5-0.5,1.1-0.9,1.8c-0.3,0.7-0.7,1.3-0.9,1.8c-0.3,0.5-0.7,0.9-1.1,1.3c-0.6,0.5-0.9,0.6-1,0.6l0,0c-0.1,0-0.4,0-0.5-0.8
+				c0-0.6,0.1-1.5,0.3-2.6c0.3-1.1,0.5-1.9,0.8-2.5c0.2-0.6,0.6-1.5,1.1-2.8c0.5-1.2,0.9-2,1.2-2.3v-0.1c0-0.1-0.1-0.1-0.1-0.1
+				L33.9,11c-0.9,0.1-1.8,0.8-2.4,2.3c-0.6,1.3-1,2.6-1.4,3.9c0,0,0,0,0,0.1c-1.6,4-3,6.1-4.2,6.2l0,0c-0.1,0-0.4,0-0.4-0.7
+				c0-0.6,0-1.3,0.3-2.3c0.1-0.4,0.2-0.9,0.3-1.4c0.2-0.6,0.3-1,0.4-1.3s0.2-0.7,0.4-1.3c0.2-0.5,0.3-1,0.4-1.4s0.2-0.9,0.1-1.3
+				c-0.1-1.2-0.8-1.8-2-1.7c-0.7,0.1-1.3,0.2-1.9,0.5c-0.4,0.2-0.8,0.4-1.1,0.7c0,0-0.1,0-0.2,0c0,0,0-0.1,0-0.2
+				c2-3,3.5-5.6,4.4-7.9c0.5-1.3,0.7-2.3,0.7-3.1c-0.1-1.1-0.7-1.7-1.8-1.6c-1.1,0.1-2,0.6-2.9,1.6c-0.9,1.1-1.7,2.3-2.3,3.6
+				c-0.7,1.7-1.4,3.4-1.9,5.1c-0.6,2-1.4,4.8-2.2,8.3c-0.8,3.5-1.5,6.1-1.9,7.7l0,0c0,0.1,0.1,0.1,0.1,0.1l3.1-0.2v-0.1
+				c0.1-0.7,0.3-1.3,0.4-1.9c0.1-0.5,0.3-1.3,0.5-2.1s0.4-1.6,0.5-2.2s0.4-1.3,0.7-2.2c0.3-0.8,0.7-1.5,1.2-2.2
+				c0.4-0.6,1-1.1,1.6-1.5c0.7-0.4,1-0.5,1.2-0.5l0,0c0.2,0,0.4,0.1,0.4,0.5c0,0.3-0.1,0.9-0.3,1.7c-1.1,3.4-1.6,6.1-1.5,7.9
+				c0.1,1.6,0.8,2.4,2.1,2.3c1.5-0.1,3.1-1.8,4.9-5c0-0.1,0.1-0.1,0.2-0.1s0.1,0.1,0.1,0.2c0,0.4,0,0.7,0,1.1
+				c0.1,1.8,0.8,2.7,1.9,2.7h0.1c0.7,0,1.5-0.5,2.2-1.2c0.3-0.3,0.7-0.7,1-1.1c0.5-0.6,0.7-1,1.3-2c-0.1,0.3-0.7,2.5-0.6,3.1
+				l3.3-0.2v-0.1c0-0.1,0.1-0.7,0.2-1.2c0.1-0.7,0.3-1.4,0.4-2c0.1-0.6,0.3-1.4,0.6-2.4c0.2-0.9,0.5-1.7,0.8-2.5
+				c0.3-0.7,0.7-1.5,1.1-2.2c0.3-0.6,0.8-1.2,1.3-1.7c0.4-0.4,1-0.6,1.5-0.6s0.7,0.1,0.7,0.5c0,0.2,0,0.4-0.1,0.6
+				c-1.3,4.6-1.9,7.6-1.8,9.1c0.1,1.6,0.8,2.3,2.1,2.2c0.7,0,1.5-0.5,2.2-1.2c0.8-0.8,1.5-1.7,2-2.6c0.2-0.3,0.4-0.7,0.6-1
+				c0-0.1,0.1-0.1,0.2-0.1c0.1,0,0.1,0.1,0.1,0.2c0,0.2,0,0.4,0,0.5c0,1,0.3,1.7,0.7,2.2s0.9,0.7,1.5,0.7c0.5,0,1-0.1,1.5-0.3
+				c0.4-0.2,1-0.6,1.7-1.3c0.5-0.6,1-1.2,1.5-1.9c0,0,0.1-0.1,0.1,0c0.1,0,0.1,0.1,0.1,0.2l-1.1,3.6c0,0,0,0.1-0.1,0.1
+				c-19.6,2.9-2.9,14.1,3.1,0.4c0,0,0-0.1,0.1-0.1s0.2-0.1,0.3-0.1c1.6-0.8,2.5-1.4,4.5-3.3C66.5,17.7,66.6,16.8,67.4,15.3z
+				 M20.7,12.9c0,0-0.1,0.1-0.1,0c-0.1,0-0.1-0.1-0.1-0.2c0.8-2.7,1.6-5.2,2.5-7.4c1.2-3.2,2-3.9,2.5-3.9l0,0c0.1,0,0.3,0,0.3,0.5
+				c0,0.4-0.2,1.4-0.7,2.8C24.3,7,22.8,9.7,20.7,12.9z M50,27.2c-0.6-1.3,5.4-2.9,5.9-3C54.8,26.7,50.7,28.7,50,27.2z" />
+				<path class="st0" d="M35,8.6c0.8,0,1.7-0.3,1.9-1.4c0.1-0.5-0.2-1.1-0.4-1.3s-0.4-0.2-0.8-0.2c-0.3,0-0.8,0.2-1.1,0.6
+				c-0.5,0.5-0.5,1.2-0.3,1.6C34.4,8.3,34.7,8.6,35,8.6z" />
+				<path class="st0" d="M3.7,27.5c0.5,0,8.1,1.7,10.2-5.8c0.8-3.2-3-7.3-3.3-7.8l0,0C6,9.2,8.4,4.5,11.6,5c2.3,0.4,1.1,3.8,2.4,4.1
+				l0,0c0.7,0.1,2.2-1.7,2.4-2.3c0.8-2.3-4-3.8-5.4-3.7C8,3.4,6.1,5,5,7.6c-2.2,4.8,1.9,8,4.3,11.3c1.8,2.5,1.8,4.7-0.5,6.9
+				c-2.5,2.4-5-1-5.3-3.3c-0.3-2.1-0.6-3.5-2.4-0.8C-0.6,24.2,1.7,27.2,3.7,27.5z" />
+			</g>
+		</g>
+	</g>
+</svg>

package/style/icons/streamlit-logo-primary.svg

@@ -0,0 +1,14 @@
+<svg width="1461" height="406" viewBox="0 0 1461 406" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M258.73 221.683L206.138 193.883L114.846 145.633C114.763 145.549 114.596 145.549 114.513 145.549C111.18 143.966 107.763 147.299 109.013 150.633L155.53 269.275L155.538 269.3C155.588 269.416 155.63 269.533 155.68 269.65C157.588 274.075 161.755 276.808 166.288 277.883C166.672 277.966 166.946 278.042 167.406 278.134C167.864 278.236 168.505 278.375 169.055 278.416C169.147 278.425 169.23 278.425 169.322 278.433H169.388C169.455 278.441 169.522 278.441 169.588 278.45H169.68C169.738 278.458 169.805 278.458 169.863 278.458H169.972C170.038 278.466 170.105 278.466 170.172 278.466V278.466C229.083 284.889 288.519 284.889 347.43 278.466V278.466C348.139 278.466 348.83 278.433 349.497 278.366C349.714 278.341 349.922 278.316 350.13 278.291C350.155 278.283 350.189 278.283 350.214 278.275C350.355 278.258 350.497 278.233 350.639 278.208C350.847 278.183 351.055 278.141 351.264 278.1C351.68 278.008 351.87 277.941 352.435 277.747C353.001 277.553 353.939 277.213 354.527 276.93C355.114 276.646 355.522 276.375 356.014 276.066C356.622 275.683 357.201 275.291 357.787 274.851C358.04 274.657 358.214 274.533 358.397 274.358L358.297 274.3L258.73 221.683Z"
+    fill="#FF4B4B" />
+  <path
+    d="M402.766 145.634H402.683L311.357 193.884L362.124 269.493L408.524 150.634V150.467C409.691 146.967 406.108 143.801 402.766 145.634"
+    fill="#7D353B" />
+  <path
+    d="M263.597 122.691C261.264 119.283 256.18 119.283 253.93 122.691L206.139 193.883L258.73 221.684L358.398 274.358C359.023 273.745 359.525 273.148 360.056 272.517C360.806 271.592 361.506 270.6 362.123 269.492L311.356 193.883L263.597 122.691Z"
+    fill="#BD4043" />
+  <path
+    d="M583.705 163.429H602.096C601.253 139.75 579.413 122.048 549.067 122.048C519.027 122.048 495.425 139.52 495.425 165.881C495.425 187.032 510.751 199.599 535.273 206.649L554.585 212.167C571.137 216.765 585.85 222.589 585.85 238.222C585.85 255.387 569.298 266.729 547.534 266.729C528.836 266.729 512.284 258.453 510.751 240.674H491.133C492.972 266.422 513.816 283.894 547.534 283.894C583.705 283.894 604.242 263.97 604.242 238.528C604.242 209.102 576.348 199.599 560.102 195.308L544.163 191.016C532.514 187.951 513.816 181.821 513.816 164.962C513.816 149.942 527.61 138.907 548.454 138.907C567.459 138.907 581.866 147.949 583.705 163.429ZM679.911 163.429H654.776V135.228H636.69V163.429H618.912V178.755H636.69V252.322C636.69 272.859 653.243 282.668 668.569 282.668C675.313 282.668 679.604 281.442 682.057 280.523L678.378 264.277C676.846 264.583 674.393 265.196 670.408 265.196C662.439 265.196 654.776 262.744 654.776 247.418V178.755H679.911V163.429ZM702.799 281.136H720.884V206.649C720.884 190.71 733.452 179.062 750.618 179.062C755.446 179.062 760.427 179.981 761.653 180.288V161.896C759.584 161.743 754.832 161.59 752.15 161.59C738.05 161.59 725.789 169.559 721.498 181.208H720.271V163.429H702.799V281.136ZM824.543 283.588C848.452 283.588 865.924 271.633 871.442 253.855L853.97 248.95C849.372 261.211 838.72 267.342 824.543 267.342C803.316 267.342 788.679 253.625 787.836 228.413H873.281V220.75C873.281 176.916 847.226 161.896 822.704 161.896C790.825 161.896 769.675 187.032 769.675 223.202C769.675 259.372 790.518 283.588 824.543 283.588ZM787.836 212.78C789.062 194.465 802.013 178.142 822.704 178.142C842.322 178.142 854.889 192.856 854.889 212.78H787.836ZM931.114 283.894C951.651 283.894 962.38 272.859 966.058 265.196H966.978V281.136H985.063V203.584C985.063 166.188 956.556 161.896 941.536 161.896C923.757 161.896 903.526 168.027 894.33 189.484L911.496 195.614C915.481 187.032 924.907 177.836 942.149 177.836C958.778 177.836 966.978 186.648 966.978 201.745V202.358C966.978 211.094 958.088 210.328 936.631 213.086C914.791 215.922 890.959 220.75 890.959 247.724C890.959 270.714 908.737 283.894 931.114 283.894ZM933.873 267.649C919.466 267.649 909.044 261.211 909.044 248.644C909.044 234.85 921.611 230.559 935.712 228.719C943.375 227.8 963.912 225.654 966.978 221.976V238.528C966.978 253.242 955.329 267.649 933.873 267.649ZM1013.76 281.136H1031.84V207.569C1031.84 190.327 1044.41 178.142 1058.51 178.142C1072.23 178.142 1081.81 187.108 1081.81 200.519V281.136H1100.2V204.504C1100.2 189.331 1109.7 178.142 1126.25 178.142C1139.13 178.142 1150.16 184.963 1150.16 202.358V281.136H1168.25V202.358C1168.25 174.694 1153.38 161.896 1132.38 161.896C1115.52 161.896 1103.19 169.636 1097.13 181.821H1095.91C1090.08 169.253 1079.81 161.896 1064.33 161.896C1049.01 161.896 1037.67 169.253 1032.76 181.821H1031.23V163.429H1013.76V281.136ZM1215.08 124.193H1197V281.136H1215.08V124.193ZM1243.89 281.136H1261.98V163.429H1243.89V281.136ZM1253.09 143.811C1260.14 143.811 1265.96 138.294 1265.96 131.55C1265.96 124.806 1260.14 119.289 1253.09 119.289C1246.04 119.289 1240.21 124.806 1240.21 131.55C1240.21 138.294 1246.04 143.811 1253.09 143.811ZM1341.97 163.429H1316.84V135.228H1298.75V163.429H1280.98V178.755H1298.75V252.322C1298.75 272.859 1315.31 282.668 1330.63 282.668C1337.38 282.668 1341.67 281.442 1344.12 280.523L1340.44 264.277C1338.91 264.583 1336.46 265.196 1332.47 265.196C1324.5 265.196 1316.84 262.744 1316.84 247.418V178.755H1341.97V163.429Z"
+    fill="var(--jp-text-editor-icon-color, var(--jp-inverse-layout-color3))" />
+</svg>