@datalayer/jupyter-react 0.19.4 → 0.19.6

package/lib/examples/NotebookColormode.js

@@ -1,20 +1,16 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-/*
- * Copyright (c) 2021-2023 Datalayer, Inc.
- *
- * MIT License
- */
-import { useCallback, useEffect, useState } from 'react';
-import { createRoot } from 'react-dom/client';
 import { Text, ToggleSwitch } from '@primer/react';
-import { Jupyter } from '../jupyter/Jupyter';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { CellSidebarExtension } from '../components';
 import { Notebook } from '../components/notebook/Notebook';
+import { Jupyter } from '../jupyter/Jupyter';
 import { NotebookToolbar } from './../components/notebook/toolbar/NotebookToolbar';
-import { CellSidebar } from '../components/notebook/cell/sidebar/CellSidebar';
 import nbformat from './notebooks/NotebookExample1.ipynb.json';
 const NotebookColormode = () => {
     const [colormode, setColormode] = useState('light');
     const [isOn, setIsOn] = useState(false);
+    const extensions = useMemo(() => [new CellSidebarExtension()], []);
     useEffect(() => {
         if (isOn) {
             setColormode('dark');
@@ -29,8 +25,8 @@ const NotebookColormode = () => {
     const handleSwitchChange = useCallback((on) => {
         setIsOn(on);
     }, []);
-    return (_jsx(_Fragment, { children: _jsxs(Jupyter, { startDefaultKernel: true, colormode: colormode, children: [_jsxs(Text, { fontSize: 2, fontWeight: "bold", id: "switch-label", display: "block", mb: 1, children: [colormode === 'light' ? 'Light' : 'Dark', " Mode"] }), _jsx(ToggleSwitch, { size: "small", onClick: onClick, onChange: handleSwitchChange, checked: isOn, statusLabelPosition: "end", "aria-labelledby": "switch-label" }), _jsx(Notebook, { nbformat: nbformat, id: "notebook-model-id", height: "calc(100vh - 2.6rem)" // (Height - Toolbar Height).
-                    , cellSidebarMargin: 120, CellSidebar: CellSidebar, Toolbar: NotebookToolbar })] }) }));
+    return (_jsx(_Fragment, { children: _jsxs(Jupyter, { colormode: colormode, children: [_jsxs(Text, { fontSize: 2, fontWeight: "bold", id: "switch-label", display: "block", mb: 1, children: [colormode === 'light' ? 'Light' : 'Dark', " Mode"] }), _jsx(ToggleSwitch, { size: "small", onClick: onClick, onChange: handleSwitchChange, checked: isOn, statusLabelPosition: "end", "aria-labelledby": "switch-label" }), _jsx(Notebook, { nbformat: nbformat, id: "notebook-model-id", height: "calc(100vh - 2.6rem)" // (Height - Toolbar Height).
+                    , extensions: extensions, Toolbar: NotebookToolbar })] }) }));
 };
 const div = document.createElement('div');
 document.body.appendChild(div);

package/lib/examples/NotebookColormode.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotebookColormode.js","sourceRoot":"","sources":["../../src/examples/NotebookColormode.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AACnF,OAAO,EAAE,WAAW,EAAE,MAAM,iDAAiD,CAAC;AAE9E,OAAO,QAAQ,MAAM,yCAAyC,CAAC;AAE/D,MAAM,iBAAiB,GAAG,GAAG,EAAE;IAC7B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAY,OAAO,CAAC,CAAC;IAC/D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,EAAE;YACR,YAAY,CAAC,MAAM,CAAC,CAAC;SACtB;aAAM;YACL,YAAY,CAAC,OAAO,CAAC,CAAC;SACvB;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IACX,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/B,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC;IACjB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IACX,MAAM,kBAAkB,GAAG,WAAW,CAAC,CAAC,EAAW,EAAE,EAAE;QACrD,OAAO,CAAC,EAAE,CAAC,CAAC;IACd,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,CACL,4BACE,MAAC,OAAO,IAAC,kBAAkB,QAAC,SAAS,EAAE,SAAS,aAC9C,MAAC,IAAI,IACH,QAAQ,EAAE,CAAC,EACX,UAAU,EAAC,MAAM,EACjB,EAAE,EAAC,cAAc,EACjB,OAAO,EAAC,OAAO,EACf,EAAE,EAAE,CAAC,aAEH,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,aACrC,EACP,KAAC,YAAY,IACX,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,kBAAkB,EAC5B,OAAO,EAAE,IAAI,EACb,mBAAmB,EAAC,KAAK,qBACT,cAAc,GAC9B,EACF,KAAC,QAAQ,IACP,QAAQ,EAAE,QAA4B,EACtC,EAAE,EAAC,mBAAmB,EACtB,MAAM,EAAC,sBAAsB,CAAC,6BAA6B;sBAC3D,iBAAiB,EAAE,GAAG,EACtB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,eAAe,GACxB,IACM,GACT,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC/B,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AAE7B,IAAI,CAAC,MAAM,CAAC,KAAC,iBAAiB,KAAG,CAAC,CAAC"}
+{"version":3,"file":"NotebookColormode.js","sourceRoot":"","sources":["../../src/examples/NotebookColormode.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAE7C,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AACnF,OAAO,QAAQ,MAAM,yCAAyC,CAAC;AAE/D,MAAM,iBAAiB,GAAG,GAAG,EAAE;IAC7B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAY,OAAO,CAAC,CAAC;IAC/D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,oBAAoB,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IACrE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,EAAE;YACR,YAAY,CAAC,MAAM,CAAC,CAAC;SACtB;aAAM;YACL,YAAY,CAAC,OAAO,CAAC,CAAC;SACvB;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IACX,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/B,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC;IACjB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IACX,MAAM,kBAAkB,GAAG,WAAW,CAAC,CAAC,EAAW,EAAE,EAAE;QACrD,OAAO,CAAC,EAAE,CAAC,CAAC;IACd,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,CACL,4BACE,MAAC,OAAO,IAAC,SAAS,EAAE,SAAS,aAC3B,MAAC,IAAI,IACH,QAAQ,EAAE,CAAC,EACX,UAAU,EAAC,MAAM,EACjB,EAAE,EAAC,cAAc,EACjB,OAAO,EAAC,OAAO,EACf,EAAE,EAAE,CAAC,aAEH,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,aACrC,EACP,KAAC,YAAY,IACX,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,kBAAkB,EAC5B,OAAO,EAAE,IAAI,EACb,mBAAmB,EAAC,KAAK,qBACT,cAAc,GAC9B,EACF,KAAC,QAAQ,IACP,QAAQ,EAAE,QAA4B,EACtC,EAAE,EAAC,mBAAmB,EACtB,MAAM,EAAC,sBAAsB,CAAC,6BAA6B;sBAC3D,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,eAAe,GACxB,IACM,GACT,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC/B,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AAE7B,IAAI,CAAC,MAAM,CAAC,KAAC,iBAAiB,KAAG,CAAC,CAAC"}

package/lib/examples/NotebookExtension.js

@@ -1,21 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/*
- * Copyright (c) 2021-2023 Datalayer, Inc.
- *
- * MIT License
- */
-import { useState } from 'react';
+import { useMemo } from 'react';
 import { createRoot } from 'react-dom/client';
-import { JupyterReactTheme } from '../theme/JupyterReactTheme';
-import { Notebook } from '../components/notebook/Notebook';
-import { ExecTimeExtension } from './extensions';
 import { CellSidebarButton } from '../components/notebook/cell/sidebar/CellSidebarButton';
+import { Notebook } from '../components/notebook/Notebook';
+import { JupyterReactTheme } from '../theme/JupyterReactTheme';
 import { NotebookToolbar } from './../components/notebook/toolbar/NotebookToolbar';
+import { ExecTimeExtension } from './extensions';
+import { CellSidebarExtension } from '../components';
 import nbformat from './notebooks/NotebookExample1.ipynb.json';
 const NotebookExtension = () => {
-    const [extension, _] = useState(new ExecTimeExtension());
-    return (_jsx(JupyterReactTheme, { children: _jsx(Notebook, { nbformat: nbformat, extensions: [extension], id: "notebook-extension-id", height: "calc(100vh - 2.6rem)" // (Height - Toolbar Height).
-            , cellSidebarMargin: 160, CellSidebar: CellSidebarButton, Toolbar: NotebookToolbar }) }));
+    const extensions = useMemo(() => [
+        new ExecTimeExtension(),
+        new CellSidebarExtension({ factory: CellSidebarButton }),
+    ], []);
+    return (_jsx(JupyterReactTheme, { children: _jsx(Notebook, { nbformat: nbformat, extensions: extensions, id: "notebook-extension-id", height: "calc(100vh - 2.6rem)" // (Height - Toolbar Height).
+            , Toolbar: NotebookToolbar }) }));
 };
 const div = document.createElement('div');
 document.body.appendChild(div);

package/lib/examples/NotebookExtension.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotebookExtension.js","sourceRoot":"","sources":["../../src/examples/NotebookExtension.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uDAAuD,CAAC;AAC1F,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AAEnF,OAAO,QAAQ,MAAM,yCAAyC,CAAC;AAE/D,MAAM,iBAAiB,GAAG,GAAG,EAAE;IAC7B,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,GAAG,QAAQ,CAAC,IAAI,iBAAiB,EAAE,CAAC,CAAC;IACzD,OAAO,CACL,KAAC,iBAAiB,cAChB,KAAC,QAAQ,IACP,QAAQ,EAAE,QAA4B,EACtC,UAAU,EAAE,CAAC,SAAS,CAAC,EACvB,EAAE,EAAC,uBAAuB,EAC1B,MAAM,EAAC,sBAAsB,CAAC,6BAA6B;cAC3D,iBAAiB,EAAE,GAAG,EACtB,WAAW,EAAE,iBAAiB,EAC9B,OAAO,EAAE,eAAe,GACxB,GACgB,CACrB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC/B,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AAE7B,IAAI,CAAC,MAAM,CAAC,KAAC,iBAAiB,KAAG,CAAC,CAAC"}
+{"version":3,"file":"NotebookExtension.js","sourceRoot":"","sources":["../../src/examples/NotebookExtension.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,uDAAuD,CAAC;AAC1F,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AACnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,QAAQ,MAAM,yCAAyC,CAAC;AAE/D,MAAM,iBAAiB,GAAG,GAAG,EAAE;IAC7B,MAAM,UAAU,GAAG,OAAO,CACxB,GAAG,EAAE,CAAC;QACJ,IAAI,iBAAiB,EAAE;QACvB,IAAI,oBAAoB,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,CAAC;KACzD,EACD,EAAE,CACH,CAAC;IACF,OAAO,CACL,KAAC,iBAAiB,cAChB,KAAC,QAAQ,IACP,QAAQ,EAAE,QAA4B,EACtC,UAAU,EAAE,UAAU,EACtB,EAAE,EAAC,uBAAuB,EAC1B,MAAM,EAAC,sBAAsB,CAAC,6BAA6B;cAC3D,OAAO,EAAE,eAAe,GACxB,GACgB,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC/B,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AAE7B,IAAI,CAAC,MAAM,CAAC,KAAC,iBAAiB,KAAG,CAAC,CAAC"}

package/lib/examples/NotebookExternalContent.js

@@ -1,23 +1,21 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/*
- * Copyright (c) 2021-2023 Datalayer, Inc.
- *
- * MIT License
- */
-import { useState, useEffect } from 'react';
-import { createRoot } from 'react-dom/client';
-import { Box, IconButton } from '@primer/react';
 import { ZapIcon } from '@primer/octicons-react';
-import { JupyterReactTheme } from '../theme/JupyterReactTheme';
+import { Box, IconButton } from '@primer/react';
+import { useEffect, useMemo, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { CellSidebarExtension } from '../components';
 import { Notebook } from '../components/notebook/Notebook';
-import { CellSidebar } from '../components/notebook/cell/sidebar/CellSidebar';
 import { notebookStore } from '../components/notebook/NotebookState';
+import { JupyterReactTheme } from '../theme/JupyterReactTheme';
 import notebook from './notebooks/NotebookExample1.ipynb.json';
 const NOTEBOOK_ID = 'notebook-model-id';
 const NotebookExternalContent = () => {
     const [nbformat, setNbformat] = useState();
     const [updatedNbFormat, setUpdatedNbFormat] = useState();
-    const model = notebookStore.getState().selectNotebookModel(NOTEBOOK_ID)?.model;
+    const extensions = useMemo(() => [new CellSidebarExtension()], []);
+    const model = notebookStore
+        .getState()
+        .selectNotebookModel(NOTEBOOK_ID)?.model;
     useEffect(() => {
         // Set nbformat with any content.
         // This may come from an external storage that you fetch in this react effect.
@@ -40,7 +38,7 @@ const NotebookExternalContent = () => {
                         e.preventDefault();
                         saveNotebook();
                     }, icon: ZapIcon }) }), _jsx(Notebook, { nbformat: nbformat, id: NOTEBOOK_ID, height: "calc(100vh - 2.6rem)" // (Height - Toolbar Height).
-                , cellSidebarMargin: 120, CellSidebar: CellSidebar })] })) : (_jsx(_Fragment, {}));
+                , extensions: extensions })] })) : (_jsx(_Fragment, {}));
 };
 const div = document.createElement('div');
 document.body.appendChild(div);

package/lib/examples/NotebookExternalContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotebookExternalContent.js","sourceRoot":"","sources":["../../src/examples/NotebookExternalContent.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,iDAAiD,CAAC;AAC9E,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAErE,OAAO,QAAQ,MAAM,yCAAyC,CAAC;AAE/D,MAAM,WAAW,GAAG,mBAAmB,CAAC;AAExC,MAAM,uBAAuB,GAAG,GAAG,EAAE;IACnC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,EAAoB,CAAC;IAC7D,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,EAAoB,CAAC;IAC3E,MAAM,KAAK,GAAG,aAAa,CAAC,QAAQ,EAAE,CAAC,mBAAmB,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC;IAC/E,SAAS,CAAC,GAAG,EAAE;QACb,iCAAiC;QACjC,8EAA8E;QAC9E,WAAW,CAAC,QAAQ,CAAC,CAAC;IACxB,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,EAAE;YACT,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;gBACnC,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM,EAAsB,CAAC;gBAC7C,kBAAkB,CAAC,CAAC,CAAC,CAAC;YACxB,CAAC,CAAC,CAAC;SACJ;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACZ,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,iDAAiD;QACjD,mEAAmE;QACnE,KAAK,CAAC,sBAAsB,GAAG,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC;IAClE,CAAC,CAAC;IACF,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,8BACE,KAAC,GAAG,cACF,KAAC,UAAU,IACT,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,SAAS,gBACJ,MAAM,EACjB,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,CAAC,CAAC,EAAE;wBACX,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,YAAY,EAAE,CAAC;oBACjB,CAAC,EACD,IAAI,EAAE,OAAO,GACb,GACE,EACN,KAAC,QAAQ,IACP,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,WAAW,EACf,MAAM,EAAC,sBAAsB,CAAC,6BAA6B;kBAC3D,iBAAiB,EAAE,GAAG,EACtB,WAAW,EAAE,WAAW,GACxB,IACD,CACJ,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC/B,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AAE7B,IAAI,CAAC,MAAM,CACT,KAAC,iBAAiB,cAChB,KAAC,uBAAuB,KAAG,GACT,CACrB,CAAC"}
+{"version":3,"file":"NotebookExternalContent.js","sourceRoot":"","sources":["../../src/examples/NotebookExternalContent.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,QAAQ,MAAM,yCAAyC,CAAC;AAE/D,MAAM,WAAW,GAAG,mBAAmB,CAAC;AAExC,MAAM,uBAAuB,GAAG,GAAG,EAAE;IACnC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,EAAoB,CAAC;IAC7D,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,EAAoB,CAAC;IAC3E,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,oBAAoB,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IACnE,MAAM,KAAK,GAAG,aAAa;SACxB,QAAQ,EAAE;SACV,mBAAmB,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC;IAC3C,SAAS,CAAC,GAAG,EAAE;QACb,iCAAiC;QACjC,8EAA8E;QAC9E,WAAW,CAAC,QAAQ,CAAC,CAAC;IACxB,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,EAAE;YACT,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;gBACnC,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM,EAAsB,CAAC;gBAC7C,kBAAkB,CAAC,CAAC,CAAC,CAAC;YACxB,CAAC,CAAC,CAAC;SACJ;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACZ,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,iDAAiD;QACjD,mEAAmE;QACnE,KAAK,CAAC,sBAAsB,GAAG,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC;IAClE,CAAC,CAAC;IACF,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,8BACE,KAAC,GAAG,cACF,KAAC,UAAU,IACT,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,SAAS,gBACJ,MAAM,EACjB,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,CAAC,CAAC,EAAE;wBACX,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,YAAY,EAAE,CAAC;oBACjB,CAAC,EACD,IAAI,EAAE,OAAO,GACb,GACE,EACN,KAAC,QAAQ,IACP,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,WAAW,EACf,MAAM,EAAC,sBAAsB,CAAC,6BAA6B;kBAC3D,UAAU,EAAE,UAAU,GACtB,IACD,CACJ,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC/B,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AAE7B,IAAI,CAAC,MAAM,CACT,KAAC,iBAAiB,cAChB,KAAC,uBAAuB,KAAG,GACT,CACrB,CAAC"}

package/lib/examples/NotebookInit.js

@@ -4,11 +4,11 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
  *
  * MIT License
  */
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
-import { useJupyter, CellSidebar, Jupyter, Kernel, Notebook, } from '../index';
-import { NotebookToolbar } from './../components/notebook/toolbar/NotebookToolbar';
 import useNotebookStore from '../components/notebook/NotebookState';
+import { CellSidebarExtension, Jupyter, Kernel, Notebook, useJupyter, } from '../index';
+import { NotebookToolbar } from './../components/notebook/toolbar/NotebookToolbar';
 const NOTEBOOK_ID = 'notebook';
 const NOTEBOOK_WIDTH = '100%';
 const NOTEBOOK_HEIGHT = 500;
@@ -47,6 +47,7 @@ const NotebookInit = () => {
     const kernel = useKernel();
     const notebookStore = useNotebookStore();
     const notebook = notebookStore.selectNotebook(NOTEBOOK_ID);
+    const extensions = useMemo(() => [new CellSidebarExtension()], []);
     useEffect(() => {
         if (notebook && !IS_INITIALIZED) {
             notebook.adapter?.notebookPanel?.model?.contentChanged.connect(_ => {
@@ -63,7 +64,7 @@ const NotebookInit = () => {
             });
         }
     }, [kernel, notebook]);
-    return kernel ? (_jsx(Notebook, { path: "ipywidgets.ipynb", id: NOTEBOOK_ID, kernel: kernel, height: `calc(${NOTEBOOK_HEIGHT}px - 2.6rem)`, CellSidebar: CellSidebar, Toolbar: NotebookToolbar })) : (_jsx(_Fragment, {}));
+    return kernel ? (_jsx(Notebook, { path: "ipywidgets.ipynb", id: NOTEBOOK_ID, kernel: kernel, height: `calc(${NOTEBOOK_HEIGHT}px - 2.6rem)`, extensions: extensions, Toolbar: NotebookToolbar })) : (_jsx(_Fragment, {}));
 };
 const div = document.createElement('div');
 document.body.appendChild(div);

package/lib/examples/NotebookInit.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotebookInit.js","sourceRoot":"","sources":["../../src/examples/NotebookInit.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EACL,UAAU,EACV,WAAW,EACX,OAAO,EACP,MAAM,EACN,QAAQ,GACT,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AACnF,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAEpE,MAAM,WAAW,GAAG,UAAU,CAAC;AAC/B,MAAM,cAAc,GAAG,MAAM,CAAC;AAC9B,MAAM,eAAe,GAAG,GAAG,CAAC;AAE5B,MAAM,mBAAmB,GAAG,QAAQ,CAAC;AAErC,IAAI,cAAc,GAAG,KAAK,CAAC;AAE3B,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,aAAa,EAAE,cAAc,EAAE,GAAG,UAAU,EAAE,CAAC;IACvD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAU,CAAC;IAC/C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,cAAc,EAAE;YACnB,OAAO;SACR;QACD,IAAI,aAAqB,CAAC;QAC1B,aAAa,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE;YAC7B,MAAM,YAAY,GAAG,IAAI,MAAM,CAAC;gBAC9B,aAAa;gBACb,UAAU,EAAE,mBAAmB;gBAC/B,cAAc,EAAE,mBAAmB;gBACnC,kBAAkB,EAAE,cAAc,CAAC,WAAW;gBAC9C,cAAc,EAAE,cAAc,CAAC,QAAQ;aACxC,CAAC,CAAC;YACH,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE;gBAC3B,aAAa,GAAG,YAAY,CAAC;gBAC7B,SAAS,CAAC,YAAY,CAAC,CAAC;YAC1B,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QACH,OAAO,GAAG,EAAE;YACV,IAAI,aAAa,EAAE;gBACjB,aAAa,EAAE,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;aAClD;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC,CAAC;IACpC,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,MAAM,YAAY,GAAa,GAAG,EAAE;IAClC,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;IACzC,MAAM,QAAQ,GAAG,aAAa,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;IAC3D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,IAAI,CAAC,cAAc,EAAE;YAC/B,QAAQ,CAAC,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;gBACjE,IAAI,CAAC,cAAc,EAAE;oBACnB,cAAc,GAAG,IAAI,CAAC;oBACtB,yGAAyG;oBACzG,mEAAmE;oBACnE,aAAa,CAAC,WAAW,CAAC;wBACxB,EAAE,EAAE,WAAW;wBACf,QAAQ,EAAE,MAAM;wBAChB,MAAM,EAAE,oCAAoC;qBAC7C,CAAC,CAAC;iBACJ;YACH,CAAC,CAAC,CAAC;SACJ;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IACvB,OAAO,MAAM,CAAC,CAAC,CAAC,CACd,KAAC,QAAQ,IACP,IAAI,EAAC,kBAAkB,EACvB,EAAE,EAAE,WAAW,EACf,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,QAAQ,eAAe,cAAc,EAC7C,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,eAAe,GACxB,CACH,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC/B,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AAE7B,IAAI,CAAC,MAAM,CACT,KAAC,OAAO,IAAC,kBAAkB,EAAE,KAAK,YAChC,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,eAAe,EAAE,YAC5D,KAAC,YAAY,KAAG,GACZ,GACE,CACX,CAAC"}
+{"version":3,"file":"NotebookInit.js","sourceRoot":"","sources":["../../src/examples/NotebookInit.tsx"],"names":[],"mappings":"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"}

package/lib/examples/NotebookKernelChange.js

@@ -4,15 +4,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * MIT License
  */
-import { useState } from 'react';
-import { createRoot } from 'react-dom/client';
 import { Box, Button, Flash } from '@primer/react';
+import { useMemo, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { CellSidebarExtension } from '../components';
+import { Notebook } from '../components/notebook/Notebook';
+import useNotebookStore from '../components/notebook/NotebookState';
 import { Jupyter } from '../jupyter/Jupyter';
 import { useJupyter } from '../jupyter/JupyterContext';
 import { Kernel } from '../jupyter/kernel/Kernel';
-import { Notebook } from '../components/notebook/Notebook';
-import { CellSidebar } from '../components/notebook/cell/sidebar/CellSidebar';
-import useNotebookStore from '../components/notebook/NotebookState';
 const NOTEBOOK_ID = 'notebook-kernel-change-id';
 const PYTHON_KERNEL_NAME = 'python';
 const DENO_KERNEL_NAME = 'deno';
@@ -21,6 +21,7 @@ const NotebookKernelChange = () => {
     const [message, setMessage] = useState("");
     const notebookStore = useNotebookStore();
     const notebook = notebookStore.selectNotebook(NOTEBOOK_ID);
+    const extensions = useMemo(() => [new CellSidebarExtension()], []);
     const changeKernel = () => {
         if (kernelManager && serviceManager) {
             const newKernel = new Kernel({
@@ -37,7 +38,7 @@ const NotebookKernelChange = () => {
         }
     };
     return (_jsxs(Jupyter, { defaultKernelName: PYTHON_KERNEL_NAME, children: [_jsxs(Box, { display: "flex", children: [_jsx(Box, { children: _jsx(Button, { variant: "default", size: "small", onClick: changeKernel, children: "Assign another Kernel" }) }), _jsxs(Box, { ml: 3, children: ["Kernel ID: ", kernel?.id] }), _jsxs(Box, { ml: 3, children: ["Kernel Client ID: ", notebook?.adapter?.kernel?.clientId] }), _jsxs(Box, { ml: 3, children: ["Kernel Session ID: ", notebook?.adapter?.kernel?.session.id] }), _jsxs(Box, { ml: 3, children: ["Kernel Info: ", notebook?.adapter?.kernel?.info?.language_info.name] })] }), message &&
-                _jsx(Box, { children: _jsx(Flash, { children: message }) }), _jsx(Notebook, { id: NOTEBOOK_ID, path: "test.ipynb", height: "500px", CellSidebar: CellSidebar })] }));
+                _jsx(Box, { children: _jsx(Flash, { children: message }) }), _jsx(Notebook, { id: NOTEBOOK_ID, path: "test.ipynb", height: "500px", extensions: extensions })] }));
 };
 const div = document.createElement('div');
 document.body.appendChild(div);

package/lib/examples/NotebookKernelChange.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotebookKernelChange.js","sourceRoot":"","sources":["../../src/examples/NotebookKernelChange.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"NotebookKernelChange.js","sourceRoot":"","sources":["../../src/examples/NotebookKernelChange.tsx"],"names":[],"mappings":"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"}

package/lib/examples/NotebookLess.js

@@ -1,22 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/*
- * Copyright (c) 2021-2023 Datalayer, Inc.
- *
- * MIT License
- */
-import { useState } from 'react';
-import { createRoot } from 'react-dom/client';
 import { Box } from '@primer/react';
-import { JupyterReactTheme } from '../theme';
-import { ServiceManagerLess } from '../jupyter';
+import { useMemo } from 'react';
+import { createRoot } from 'react-dom/client';
 import { Notebook } from '../components/notebook/Notebook';
+import { ServiceManagerLess } from '../jupyter';
+import { JupyterReactTheme } from '../theme';
 import { NotebookToolbar } from './../components/notebook/toolbar/NotebookToolbar';
-import { CellSidebar } from '../components/notebook/cell/sidebar/CellSidebar';
+import { CellSidebarExtension } from '../components';
 import nbformat from './notebooks/NotebookExample1.ipynb.json';
 const NotebookLess = () => {
-    const [serviceManager, _] = useState(new ServiceManagerLess());
+    const serviceManager = useMemo(() => new ServiceManagerLess(), []);
+    const extensions = useMemo(() => [new CellSidebarExtension()], []);
     return (_jsxs(JupyterReactTheme, { children: [_jsx(Box, { as: "h1", children: "A Jupyter Notebook with a Less Service Manager" }), _jsx(Notebook, { serverless: true, nbformat: nbformat, id: "notebook-less-id", height: "calc(100vh - 2.6rem)" // (Height - Toolbar Height).
-                , cellSidebarMargin: 120, readonly: true, serviceManager: serviceManager, CellSidebar: CellSidebar, Toolbar: NotebookToolbar })] }));
+                , readonly: true, serviceManager: serviceManager, extensions: extensions, Toolbar: NotebookToolbar })] }));
 };
 const div = document.createElement('div');
 document.body.appendChild(div);

package/lib/examples/NotebookLess.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotebookLess.js","sourceRoot":"","sources":["../../src/examples/NotebookLess.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AACnF,OAAO,EAAE,WAAW,EAAE,MAAM,iDAAiD,CAAC;AAE9E,OAAO,QAAQ,MAAM,yCAAyC,CAAC;AAE/D,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,CAAC,cAAc,EAAE,CAAC,CAAC,GAAG,QAAQ,CAAC,IAAI,kBAAkB,EAAE,CAAC,CAAC;IAC/D,OAAO,CACL,MAAC,iBAAiB,eAChB,KAAC,GAAG,IAAC,EAAE,EAAC,IAAI,+DAAqD,EACjE,KAAC,QAAQ,IACP,UAAU,EAAE,IAAI,EAChB,QAAQ,EAAE,QAA4B,EACtC,EAAE,EAAC,kBAAkB,EACrB,MAAM,EAAC,sBAAsB,CAAC,6BAA6B;kBAC3D,iBAAiB,EAAE,GAAG,EACtB,QAAQ,EAAE,IAAI,EACd,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,eAAe,GACxB,IACgB,CACrB,CAAA;AACH,CAAC,CAAC;AAEF,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC/B,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AAE7B,IAAI,CAAC,MAAM,CAAC,KAAC,YAAY,KAAG,CAAC,CAAC"}
+{"version":3,"file":"NotebookLess.js","sourceRoot":"","sources":["../../src/examples/NotebookLess.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AAEnF,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,QAAQ,MAAM,yCAAyC,CAAC;AAE/D,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,kBAAkB,EAAE,EAAE,EAAE,CAAC,CAAC;IACnE,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,oBAAoB,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IACnE,OAAO,CACL,MAAC,iBAAiB,eAChB,KAAC,GAAG,IAAC,EAAE,EAAC,IAAI,+DAAqD,EACjE,KAAC,QAAQ,IACP,UAAU,EAAE,IAAI,EAChB,QAAQ,EAAE,QAA4B,EACtC,EAAE,EAAC,kBAAkB,EACrB,MAAM,EAAC,sBAAsB,CAAC,6BAA6B;kBAC3D,QAAQ,EAAE,IAAI,EACd,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,eAAe,GACxB,IACgB,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC/B,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AAE7B,IAAI,CAAC,MAAM,CAAC,KAAC,YAAY,KAAG,CAAC,CAAC"}

package/lib/examples/NotebookLite.js

@@ -1,25 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/*
- * Copyright (c) 2021-2023 Datalayer, Inc.
- *
- * MIT License
- */
-import { createRoot } from 'react-dom/client';
-import { useState } from 'react';
 import { Box, Text } from '@primer/react';
+import { useMemo, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { CellSidebarExtension, KernelIndicator, Notebook } from '../components';
 import { JupyterReactTheme } from '../theme';
-import { Notebook, KernelIndicator } from '../components';
 import { NotebookToolbar } from './../components/notebook/toolbar/NotebookToolbar';
-import { CellSidebar } from '../components/notebook/cell/sidebar/CellSidebar';
-import nbformat from './notebooks/Lite.ipynb.json';
+import nbformat from './notebooks/NotebookExample1.ipynb.json';
 const NotebookLite = () => {
     const [session, setSession] = useState();
+    const extensions = useMemo(() => [new CellSidebarExtension()], []);
     const onSessionConnection = (session) => {
         console.log('Received a Kernel Session.', session?.id, session?.kernel?.clientId);
         setSession(session);
     };
     return (_jsxs(JupyterReactTheme, { children: [_jsx(Box, { as: "h1", children: "A Jupyter Notebook with a Lite Kernel" }), _jsxs(Box, { display: "flex", children: [_jsx(Box, { children: _jsx(Text, { children: "Kernel Indicator" }) }), _jsx(Box, { ml: 3, children: _jsx(KernelIndicator, { kernel: session?.kernel }) })] }), _jsx(Notebook, { startDefaultKernel: true, lite: true, nbformat: nbformat, id: "notebook-lite-id", height: "calc(100vh - 2.6rem)" // (Height - Toolbar Height).
-                , onSessionConnection: onSessionConnection, cellSidebarMargin: 120, CellSidebar: CellSidebar, Toolbar: NotebookToolbar })] }));
+                , onSessionConnection: onSessionConnection, extensions: extensions, Toolbar: NotebookToolbar })] }));
 };
 const div = document.createElement('div');
 document.body.appendChild(div);

package/lib/examples/NotebookLite.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotebookLite.js","sourceRoot":"","sources":["../../src/examples/NotebookLite.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AACnF,OAAO,EAAE,WAAW,EAAE,MAAM,iDAAiD,CAAC;AAE9E,OAAO,QAAQ,MAAM,6BAA6B,CAAC;AAEnD,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAA8B,CAAC;IACrE,MAAM,mBAAmB,GAAwB,CAAC,OAA+C,EAAE,EAAE;QACnG,OAAO,CAAC,GAAG,CAAC,4BAA4B,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;QAClF,UAAU,CAAC,OAAO,CAAC,CAAC;IACtB,CAAC,CAAA;IACD,OAAO,CACL,MAAC,iBAAiB,eAChB,KAAC,GAAG,IAAC,EAAE,EAAC,IAAI,sDAA4C,EACxD,MAAC,GAAG,IAAC,OAAO,EAAC,MAAM,aACjB,KAAC,GAAG,cACF,KAAC,IAAI,mCAAwB,GACzB,EACN,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,YACR,KAAC,eAAe,IAAC,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,GACvC,IACF,EACN,KAAC,QAAQ,IACP,kBAAkB,QAClB,IAAI,QACJ,QAAQ,EAAE,QAA4B,EACtC,EAAE,EAAC,kBAAkB,EACrB,MAAM,EAAC,sBAAsB,CAAC,6BAA6B;kBAC3D,mBAAmB,EAAE,mBAAmB,EACxC,iBAAiB,EAAE,GAAG,EACtB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,eAAe,GACxB,IACgB,CACrB,CAAA;AACH,CAAC,CAAC;AAEF,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC/B,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AAE7B,IAAI,CAAC,MAAM,CAAC,KAAC,YAAY,KAAG,CAAC,CAAC"}
+{"version":3,"file":"NotebookLite.js","sourceRoot":"","sources":["../../src/examples/NotebookLite.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEhF,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AAEnF,OAAO,QAAQ,MAAM,yCAAyC,CAAC;AAE/D,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAA8B,CAAC;IACrE,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,oBAAoB,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEnE,MAAM,mBAAmB,GAAwB,CAC/C,OAA+C,EAC/C,EAAE;QACF,OAAO,CAAC,GAAG,CACT,4BAA4B,EAC5B,OAAO,EAAE,EAAE,EACX,OAAO,EAAE,MAAM,EAAE,QAAQ,CAC1B,CAAC;QACF,UAAU,CAAC,OAAO,CAAC,CAAC;IACtB,CAAC,CAAC;IACF,OAAO,CACL,MAAC,iBAAiB,eAChB,KAAC,GAAG,IAAC,EAAE,EAAC,IAAI,sDAA4C,EACxD,MAAC,GAAG,IAAC,OAAO,EAAC,MAAM,aACjB,KAAC,GAAG,cACF,KAAC,IAAI,mCAAwB,GACzB,EACN,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,YACR,KAAC,eAAe,IAAC,MAAM,EAAE,OAAO,EAAE,MAAM,GAAI,GACxC,IACF,EACN,KAAC,QAAQ,IACP,kBAAkB,EAAE,IAAI,EACxB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAA4B,EACtC,EAAE,EAAC,kBAAkB,EACrB,MAAM,EAAC,sBAAsB,CAAC,6BAA6B;kBAC3D,mBAAmB,EAAE,mBAAmB,EACxC,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,eAAe,GACxB,IACgB,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC/B,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AAE7B,IAAI,CAAC,MAAM,CAAC,KAAC,YAAY,KAAG,CAAC,CAAC"}

package/lib/examples/NotebookLiteContext.js

@@ -1,18 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/*
- * Copyright (c) 2021-2023 Datalayer, Inc.
- *
- * MIT License
- */
-import { createRoot } from 'react-dom/client';
 import { Box } from '@primer/react';
-import { Jupyter } from '../jupyter/Jupyter';
+import { useMemo } from 'react';
+import { createRoot } from 'react-dom/client';
+import { CellSidebarExtension } from '../components';
 import { Notebook } from '../components/notebook/Notebook';
+import { Jupyter } from '../jupyter/Jupyter';
 import { NotebookToolbar } from './../components/notebook/toolbar/NotebookToolbar';
-import { CellSidebar } from '../components/notebook/cell/sidebar/CellSidebar';
 import nbformat from './notebooks/NotebookExample1.ipynb.json';
-const NotebookLite = () => (_jsxs(Jupyter, { lite: true, children: [_jsx(Box, { as: "h1", children: "A Jupyter Notebook with a Lite Kernel (with a Jupyter Context)" }), _jsx(Notebook, { nbformat: nbformat, id: "notebook-lite-context-id", height: "calc(100vh - 2.6rem)" // (Height - Toolbar Height).
-            , cellSidebarMargin: 120, CellSidebar: CellSidebar, Toolbar: NotebookToolbar })] }));
+const NotebookLite = () => {
+    const extensions = useMemo(() => [new CellSidebarExtension()], []);
+    return (_jsxs(Jupyter, { lite: true, children: [_jsx(Box, { as: "h1", children: "A Jupyter Notebook with a Lite Kernel (with a Jupyter Context)" }), _jsx(Notebook, { nbformat: nbformat, id: "notebook-lite-context-id", height: "calc(100vh - 2.6rem)" // (Height - Toolbar Height).
+                , extensions: extensions, Toolbar: NotebookToolbar })] }));
+};
 const div = document.createElement('div');
 document.body.appendChild(div);
 const root = createRoot(div);

package/lib/examples/NotebookLiteContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotebookLiteContext.js","sourceRoot":"","sources":["../../src/examples/NotebookLiteContext.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AACnF,OAAO,EAAE,WAAW,EAAE,MAAM,iDAAiD,CAAC;AAE9E,OAAO,QAAQ,MAAM,yCAAyC,CAAC;AAE/D,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,CACzB,MAAC,OAAO,IAAC,IAAI,mBACX,KAAC,GAAG,IAAC,EAAE,EAAC,IAAI,+EAAqE,EACjF,KAAC,QAAQ,IACP,QAAQ,EAAE,QAA4B,EACtC,EAAE,EAAC,0BAA0B,EAC7B,MAAM,EAAC,sBAAsB,CAAC,6BAA6B;cAC3D,iBAAiB,EAAE,GAAG,EACtB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,eAAe,GACxB,IACM,CACX,CAAC;AAEF,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC/B,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AAE7B,IAAI,CAAC,MAAM,CAAC,KAAC,YAAY,KAAG,CAAC,CAAC"}
+{"version":3,"file":"NotebookLiteContext.js","sourceRoot":"","sources":["../../src/examples/NotebookLiteContext.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AACnF,OAAO,QAAQ,MAAM,yCAAyC,CAAC;AAE/D,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,oBAAoB,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IACnE,OAAO,CACL,MAAC,OAAO,IAAC,IAAI,mBACX,KAAC,GAAG,IAAC,EAAE,EAAC,IAAI,+EAEN,EACN,KAAC,QAAQ,IACP,QAAQ,EAAE,QAA4B,EACtC,EAAE,EAAC,0BAA0B,EAC7B,MAAM,EAAC,sBAAsB,CAAC,6BAA6B;kBAC3D,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,eAAe,GACxB,IACM,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC/B,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AAE7B,IAAI,CAAC,MAAM,CAAC,KAAC,YAAY,KAAG,CAAC,CAAC"}

package/lib/examples/NotebookLocalServer.js

@@ -4,22 +4,25 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  *
  * MIT License
  */
-import { createRoot } from 'react-dom/client';
 import { Text } from '@primer/react';
+import { useMemo } from 'react';
+import { createRoot } from 'react-dom/client';
+import { CellSidebarExtension } from '../components';
+import { CellSidebarButton } from '../components/notebook/cell/sidebar/CellSidebarButton';
+import { Notebook } from '../components/notebook/Notebook';
 import { Jupyter, useJupyter } from '../jupyter';
 import { JupyterReactTheme } from '../theme';
-import { Notebook } from '../components/notebook/Notebook';
 import { NotebookToolbar } from './../components/notebook/toolbar/NotebookToolbar';
-import { CellSidebarButton } from '../components/notebook/cell/sidebar/CellSidebarButton';
 const NotebookJupyter = () => (_jsx(Jupyter, { jupyterServerUrl: "http://localhost:8686/api/jupyter-server", jupyterServerToken: "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6", startDefaultKernel: true, children: _jsx(Notebook, { path: "ipywidgets.ipynb", id: "notebook-jupyter-id", height: "calc(100vh - 250px)" // (Height - Toolbar Height).
-        , cellSidebarMargin: 60, CellSidebar: CellSidebarButton, Toolbar: NotebookToolbar }) }));
+        , extensions: [new CellSidebarExtension({ factory: CellSidebarButton })], Toolbar: NotebookToolbar }) }));
 const NotebookJupyterReactTheme = () => {
     useJupyter({
-        jupyterServerUrl: "http://localhost:8686/api/jupyter-server",
-        jupyterServerToken: "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
+        jupyterServerUrl: 'http://localhost:8686/api/jupyter-server',
+        jupyterServerToken: '60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6',
     });
+    const extensions = useMemo(() => [new CellSidebarExtension({ factory: CellSidebarButton })], []);
     return (_jsx(JupyterReactTheme, { children: _jsx(Notebook, { startDefaultKernel: true, path: "ipywidgets.ipynb", id: "notebook-jupyter-react-themeid", height: "calc(100vh - 250px)" // (Height - Toolbar Height).
-            , cellSidebarMargin: 60, CellSidebar: CellSidebarButton, Toolbar: NotebookToolbar }) }));
+            , extensions: extensions, Toolbar: NotebookToolbar }) }));
 };
 const div = document.createElement('div');
 document.body.appendChild(div);

package/lib/examples/NotebookLocalServer.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotebookLocalServer.js","sourceRoot":"","sources":["../../src/examples/NotebookLocalServer.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AACnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,uDAAuD,CAAC;AAE1F,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,CAC5B,KAAC,OAAO,IACN,gBAAgB,EAAC,0CAA0C,EAC3D,kBAAkB,EAAC,kEAAkE,EACrF,kBAAkB,kBAElB,KAAC,QAAQ,IACP,IAAI,EAAC,kBAAkB,EACvB,EAAE,EAAC,qBAAqB,EACxB,MAAM,EAAC,qBAAqB,CAAC,6BAA6B;UAC1D,iBAAiB,EAAE,EAAE,EACrB,WAAW,EAAE,iBAAiB,EAC9B,OAAO,EAAE,eAAe,GACxB,GACM,CACX,CAAA;AAED,MAAM,yBAAyB,GAAG,GAAG,EAAE;IACrC,UAAU,CAAC;QACT,gBAAgB,EAAE,0CAA0C;QAC5D,kBAAkB,EAAE,kEAAkE;KACvF,CAAC,CAAA;IACF,OAAO,CACL,KAAC,iBAAiB,cAChB,KAAC,QAAQ,IACP,kBAAkB,QAClB,IAAI,EAAC,kBAAkB,EACvB,EAAE,EAAC,gCAAgC,EACnC,MAAM,EAAC,qBAAqB,CAAC,6BAA6B;cAC1D,iBAAiB,EAAE,EAAE,EACrB,WAAW,EAAE,iBAAiB,EAC9B,OAAO,EAAE,eAAe,GACxB,GACgB,CACrB,CAAC;AACJ,CAAC,CAAA;AAED,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC/B,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AAE7B,IAAI,CAAC,MAAM,CACT,8BACE,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,8DAAqD,EAClE,KAAC,eAAe,KAAE,EAClB,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,kEAAyD,EACtE,KAAC,yBAAyB,KAAE,IAC3B,CACJ,CAAC"}
+{"version":3,"file":"NotebookLocalServer.js","sourceRoot":"","sources":["../../src/examples/NotebookLocalServer.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uDAAuD,CAAC;AAC1F,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AAEnF,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,CAC5B,KAAC,OAAO,IACN,gBAAgB,EAAC,0CAA0C,EAC3D,kBAAkB,EAAC,kEAAkE,EACrF,kBAAkB,kBAElB,KAAC,QAAQ,IACP,IAAI,EAAC,kBAAkB,EACvB,EAAE,EAAC,qBAAqB,EACxB,MAAM,EAAC,qBAAqB,CAAC,6BAA6B;UAC1D,UAAU,EAAE,CAAC,IAAI,oBAAoB,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,CAAC,CAAC,EACtE,OAAO,EAAE,eAAe,GACxB,GACM,CACX,CAAC;AAEF,MAAM,yBAAyB,GAAG,GAAG,EAAE;IACrC,UAAU,CAAC;QACT,gBAAgB,EAAE,0CAA0C;QAC5D,kBAAkB,EAChB,kEAAkE;KACrE,CAAC,CAAC;IACH,MAAM,UAAU,GAAG,OAAO,CACxB,GAAG,EAAE,CAAC,CAAC,IAAI,oBAAoB,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,CAAC,CAAC,EAChE,EAAE,CACH,CAAC;IACF,OAAO,CACL,KAAC,iBAAiB,cAChB,KAAC,QAAQ,IACP,kBAAkB,QAClB,IAAI,EAAC,kBAAkB,EACvB,EAAE,EAAC,gCAAgC,EACnC,MAAM,EAAC,qBAAqB,CAAC,6BAA6B;cAC1D,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,eAAe,GACxB,GACgB,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC/B,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AAE7B,IAAI,CAAC,MAAM,CACT,8BACE,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,8DAAqD,EAClE,KAAC,eAAe,KAAG,EACnB,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,kEAAyD,EACtE,KAAC,yBAAyB,KAAG,IAC5B,CACJ,CAAC"}

package/lib/examples/NotebookNbformat.js

@@ -1,17 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/*
- * Copyright (c) 2021-2023 Datalayer, Inc.
- *
- * MIT License
- */
 import { createRoot } from 'react-dom/client';
-import { JupyterReactTheme } from '../theme/JupyterReactTheme';
 import { Notebook } from '../components/notebook/Notebook';
+import { JupyterReactTheme } from '../theme/JupyterReactTheme';
 import { NotebookToolbar } from './../components/notebook/toolbar/NotebookToolbar';
-import { CellSidebar } from '../components/notebook/cell/sidebar/CellSidebar';
+import { useMemo } from 'react';
+import { CellSidebarExtension } from '../components';
 import nbformat from './notebooks/NotebookExample1.ipynb.json';
-const NotebookNbformat = () => (_jsx(JupyterReactTheme, { children: _jsx(Notebook, { nbformat: nbformat, id: "notebook-nbformat-id", startDefaultKernel: true, height: "calc(100vh - 2.6rem)" // (Height - Toolbar Height).
-        , cellSidebarMargin: 120, CellSidebar: CellSidebar, Toolbar: NotebookToolbar }) }));
+const NotebookNbformat = () => {
+    const extensions = useMemo(() => [new CellSidebarExtension()], []);
+    return (_jsx(JupyterReactTheme, { children: _jsx(Notebook, { nbformat: nbformat, id: "notebook-nbformat-id", startDefaultKernel: true, height: "calc(100vh - 2.6rem)" // (Height - Toolbar Height).
+            , extensions: extensions, Toolbar: NotebookToolbar }) }));
+};
 const div = document.createElement('div');
 document.body.appendChild(div);
 const root = createRoot(div);

package/lib/examples/NotebookNbformat.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotebookNbformat.js","sourceRoot":"","sources":["../../src/examples/NotebookNbformat.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AACnF,OAAO,EAAE,WAAW,EAAE,MAAM,iDAAiD,CAAC;AAE9E,OAAO,QAAQ,MAAM,yCAAyC,CAAC;AAE/D,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,CAC7B,KAAC,iBAAiB,cAChB,KAAC,QAAQ,IACP,QAAQ,EAAE,QAA4B,EACtC,EAAE,EAAC,sBAAsB,EACzB,kBAAkB,EAAE,IAAI,EACxB,MAAM,EAAC,sBAAsB,CAAC,6BAA6B;UAC3D,iBAAiB,EAAE,GAAG,EACtB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,eAAe,GACxB,GACgB,CACrB,CAAC;AAEF,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC/B,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AAE7B,IAAI,CAAC,MAAM,CAAC,KAAC,gBAAgB,KAAG,CAAC,CAAC"}
+{"version":3,"file":"NotebookNbformat.js","sourceRoot":"","sources":["../../src/examples/NotebookNbformat.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AAEnF,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,QAAQ,MAAM,yCAAyC,CAAC;AAE/D,MAAM,gBAAgB,GAAG,GAAG,EAAE;IAC5B,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,oBAAoB,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IACnE,OAAO,CACL,KAAC,iBAAiB,cAChB,KAAC,QAAQ,IACP,QAAQ,EAAE,QAA4B,EACtC,EAAE,EAAC,sBAAsB,EACzB,kBAAkB,EAAE,IAAI,EACxB,MAAM,EAAC,sBAAsB,CAAC,6BAA6B;cAC3D,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,eAAe,GACxB,GACgB,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC/B,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AAE7B,IAAI,CAAC,MAAM,CAAC,KAAC,gBAAgB,KAAG,CAAC,CAAC"}

package/lib/examples/NotebookNbformatChange.js

@@ -1,27 +1,25 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/*
- * Copyright (c) 2021-2023 Datalayer, Inc.
- *
- * MIT License
- */
-import { useState } from 'react';
-import { createRoot } from 'react-dom/client';
 import { Box, Button, ButtonGroup } from '@primer/react';
-import { JupyterReactTheme } from '../theme/JupyterReactTheme';
+import { useMemo, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { CellSidebarExtension } from '../components';
 import { Notebook } from '../components/notebook/Notebook';
-import { CellSidebar } from '../components/notebook/cell/sidebar/CellSidebar';
 import useNotebookStore from '../components/notebook/NotebookState';
+import { JupyterReactTheme } from '../theme/JupyterReactTheme';
 import nbformat1 from './notebooks/NotebookExample1.ipynb.json';
 import nbformat2 from './notebooks/NotebookExample2.ipynb.json';
 const NOTEBOOK_ID = 'notebook-model-change-id';
 const NotebookNbformatChange = () => {
     const notebookStore = useNotebookStore();
     const [nbformat, setNbformat] = useState(nbformat1);
+    const extensions = useMemo(() => [new CellSidebarExtension()], []);
     const changeNbformat = () => {
-        console.log('Notebook Nbformat from store', notebookStore.notebooks.get(NOTEBOOK_ID)?.model?.toJSON());
+        console.log('Notebook Nbformat from store', notebookStore.notebooks
+            .get(NOTEBOOK_ID)
+            ?.model?.toJSON());
         nbformat === nbformat1 ? setNbformat(nbformat2) : setNbformat(nbformat1);
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { display: "flex", children: _jsx(ButtonGroup, { children: _jsx(Button, { variant: "default", size: "small", onClick: changeNbformat, children: "Change Nbformat" }) }) }), _jsx(Notebook, { id: NOTEBOOK_ID, nbformat: nbformat, height: "700px", CellSidebar: CellSidebar })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { display: "flex", children: _jsx(ButtonGroup, { children: _jsx(Button, { variant: "default", size: "small", onClick: changeNbformat, children: "Change Nbformat" }) }) }), _jsx(Notebook, { id: NOTEBOOK_ID, nbformat: nbformat, height: "700px", extensions: extensions })] }));
 };
 const div = document.createElement('div');
 document.body.appendChild(div);

package/lib/examples/NotebookNbformatChange.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotebookNbformatChange.js","sourceRoot":"","sources":["../../src/examples/NotebookNbformatChange.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,iDAAiD,CAAC;AAC9E,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAEpE,OAAO,SAAS,MAAM,yCAAyC,CAAC;AAChE,OAAO,SAAS,MAAM,yCAAyC,CAAC;AAEhE,MAAM,WAAW,GAAG,0BAA0B,CAAC;AAE/C,MAAM,sBAAsB,GAAG,GAAG,EAAE;IAClC,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;IACzC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;IACpD,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,OAAO,CAAC,GAAG,CACT,8BAA8B,EAC9B,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,MAAM,EAAsB,CAC9E,CAAC;QACF,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IAC3E,CAAC,CAAC;IACF,OAAO,CACL,8BACE,KAAC,GAAG,IAAC,OAAO,EAAC,MAAM,YACjB,KAAC,WAAW,cACV,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,cAAc,gCAErD,GACG,GACV,EACN,KAAC,QAAQ,IACP,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAC,OAAO,EACd,WAAW,EAAE,WAAW,GACxB,IACD,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC/B,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AAE7B,IAAI,CAAC,MAAM,CACT,KAAC,iBAAiB,cAChB,KAAC,sBAAsB,KAAG,GACR,CACrB,CAAC"}
+{"version":3,"file":"NotebookNbformatChange.js","sourceRoot":"","sources":["../../src/examples/NotebookNbformatChange.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,SAAS,MAAM,yCAAyC,CAAC;AAChE,OAAO,SAAS,MAAM,yCAAyC,CAAC;AAEhE,MAAM,WAAW,GAAG,0BAA0B,CAAC;AAE/C,MAAM,sBAAsB,GAAG,GAAG,EAAE;IAClC,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;IACzC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;IACpD,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,oBAAoB,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IACnE,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,OAAO,CAAC,GAAG,CACT,8BAA8B,EAC9B,aAAa,CAAC,SAAS;aACpB,GAAG,CAAC,WAAW,CAAC;YACjB,EAAE,KAAK,EAAE,MAAM,EAAsB,CACxC,CAAC;QACF,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IAC3E,CAAC,CAAC;IACF,OAAO,CACL,8BACE,KAAC,GAAG,IAAC,OAAO,EAAC,MAAM,YACjB,KAAC,WAAW,cACV,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,cAAc,gCAErD,GACG,GACV,EACN,KAAC,QAAQ,IACP,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAC,OAAO,EACd,UAAU,EAAE,UAAU,GACtB,IACD,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC/B,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AAE7B,IAAI,CAAC,MAAM,CACT,KAAC,iBAAiB,cAChB,KAAC,sBAAsB,KAAG,GACR,CACrB,CAAC"}

package/lib/examples/NotebookNoContext.js

@@ -5,15 +5,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * MIT License
  */
 import { createRoot } from 'react-dom/client';
-import { JupyterReactTheme } from '../theme/JupyterReactTheme';
+import { CellSidebarButton } from '../components/notebook/cell/sidebar/CellSidebarButton';
 import { Notebook } from '../components/notebook/Notebook';
+import { JupyterReactTheme } from '../theme/JupyterReactTheme';
 import { NotebookToolbar } from './../components/notebook/toolbar/NotebookToolbar';
-import { CellSidebarButton } from '../components/notebook/cell/sidebar/CellSidebarButton';
+import { CellSidebarExtension } from '../components';
 const NOTEBOOK_ID = 'notebook-id';
 const div = document.createElement('div');
 document.body.appendChild(div);
 const root = createRoot(div);
 const colormode = 'light';
 root.render(_jsx(JupyterReactTheme, { colormode: colormode, children: _jsx(Notebook, { path: "ipywidgets.ipynb", id: NOTEBOOK_ID, height: "calc(100vh - 2.6rem)" // (Height - Toolbar Height).
-        , cellSidebarMargin: 60, CellSidebar: CellSidebarButton, Toolbar: NotebookToolbar }) }));
+        , extensions: [new CellSidebarExtension({ factory: CellSidebarButton })], Toolbar: NotebookToolbar }) }));
 //# sourceMappingURL=NotebookNoContext.js.map

package/lib/examples/NotebookNoContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotebookNoContext.js","sourceRoot":"","sources":["../../src/examples/NotebookNoContext.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AACnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,uDAAuD,CAAC;AAE1F,MAAM,WAAW,GAAG,aAAa,CAAC;AAElC,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC/B,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AAE7B,MAAM,SAAS,GAAG,OAAO,CAAC;AAE1B,IAAI,CAAC,MAAM,CACT,KAAC,iBAAiB,IAAC,SAAS,EAAE,SAAS,YACrC,KAAC,QAAQ,IACP,IAAI,EAAC,kBAAkB,EACvB,EAAE,EAAE,WAAW,EACf,MAAM,EAAC,sBAAsB,CAAC,6BAA6B;UAC3D,iBAAiB,EAAE,EAAE,EACrB,WAAW,EAAE,iBAAiB,EAC9B,OAAO,EAAE,eAAe,GACxB,GACgB,CACrB,CAAC"}
+{"version":3,"file":"NotebookNoContext.js","sourceRoot":"","sources":["../../src/examples/NotebookNoContext.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,uDAAuD,CAAC;AAC1F,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AACnF,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,MAAM,WAAW,GAAG,aAAa,CAAC;AAElC,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC/B,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AAE7B,MAAM,SAAS,GAAG,OAAO,CAAC;AAE1B,IAAI,CAAC,MAAM,CACT,KAAC,iBAAiB,IAAC,SAAS,EAAE,SAAS,YACrC,KAAC,QAAQ,IACP,IAAI,EAAC,kBAAkB,EACvB,EAAE,EAAE,WAAW,EACf,MAAM,EAAC,sBAAsB,CAAC,6BAA6B;UAC3D,UAAU,EAAE,CAAC,IAAI,oBAAoB,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,CAAC,CAAC,EACtE,OAAO,EAAE,eAAe,GACxB,GACgB,CACrB,CAAC"}

package/lib/examples/NotebookNoPrimer.js

@@ -5,14 +5,15 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * MIT License
  */
 import { createRoot } from 'react-dom/client';
-import { Notebook } from '../components/notebook/Notebook';
-import { NotebookToolbar } from './../components/notebook/toolbar/NotebookToolbar';
+import { CellSidebarExtension } from '../components';
 import { CellSidebarButton } from '../components/notebook/cell/sidebar/CellSidebarButton';
+import { Notebook } from '../components/notebook/Notebook';
 import { JupyterLabCss } from '../theme';
+import { NotebookToolbar } from './../components/notebook/toolbar/NotebookToolbar';
 const NOTEBOOK_ID = 'notebook-id';
 const div = document.createElement('div');
 document.body.appendChild(div);
 const root = createRoot(div);
-root.render(_jsxs(_Fragment, { children: [_jsx(JupyterLabCss, { colormode: 'dark' }), _jsx(Notebook, { path: "ipywidgets.ipynb", id: NOTEBOOK_ID, height: "calc(100vh - 2.6rem)" // (Height - Toolbar Height).
-            , cellSidebarMargin: 60, CellSidebar: CellSidebarButton, Toolbar: NotebookToolbar })] }));
+root.render(_jsxs(_Fragment, { children: [_jsx(JupyterLabCss, { colormode: "dark" }), _jsx(Notebook, { path: "ipywidgets.ipynb", id: NOTEBOOK_ID, height: "calc(100vh - 2.6rem)" // (Height - Toolbar Height).
+            , extensions: [new CellSidebarExtension({ factory: CellSidebarButton })], Toolbar: NotebookToolbar })] }));
 //# sourceMappingURL=NotebookNoPrimer.js.map

package/lib/examples/NotebookNoPrimer.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotebookNoPrimer.js","sourceRoot":"","sources":["../../src/examples/NotebookNoPrimer.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AACnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,uDAAuD,CAAC;AAC1F,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,WAAW,GAAG,aAAa,CAAC;AAElC,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC/B,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AAE7B,IAAI,CAAC,MAAM,CACT,8BACE,KAAC,aAAa,IAAC,SAAS,EAAC,MAAM,GAAG,EAClC,KAAC,QAAQ,IACP,IAAI,EAAC,kBAAkB,EACvB,EAAE,EAAE,WAAW,EACf,MAAM,EAAC,sBAAsB,CAAC,6BAA6B;cAC3D,iBAAiB,EAAE,EAAE,EACrB,WAAW,EAAE,iBAAiB,EAC9B,OAAO,EAAE,eAAe,GACxB,IACD,CACJ,CAAC"}
+{"version":3,"file":"NotebookNoPrimer.js","sourceRoot":"","sources":["../../src/examples/NotebookNoPrimer.tsx"],"names":[],"mappings":";AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uDAAuD,CAAC;AAC1F,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AAEnF,MAAM,WAAW,GAAG,aAAa,CAAC;AAElC,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;AAC/B,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AAE7B,IAAI,CAAC,MAAM,CACT,8BACE,KAAC,aAAa,IAAC,SAAS,EAAC,MAAM,GAAG,EAClC,KAAC,QAAQ,IACP,IAAI,EAAC,kBAAkB,EACvB,EAAE,EAAE,WAAW,EACf,MAAM,EAAC,sBAAsB,CAAC,6BAA6B;cAC3D,UAAU,EAAE,CAAC,IAAI,oBAAoB,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,CAAC,CAAC,EACtE,OAAO,EAAE,eAAe,GACxB,IACD,CACJ,CAAC"}