@myst-theme/jupyter 0.3.4 → 0.3.6

package/dist/cjs/controls/NotebookToolbar.js

@@ -39,7 +39,7 @@ function NotebookToolbar({ showLaunch = false }) {
         title = status;
     }
     if (computable)
-        return ((0, jsx_runtime_1.jsx)("div", { className: "sticky top-[60px] flex justify-end w-full z-20 pointer-events-none", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex p-1 m-1 space-x-1 border rounded-full shadow pointer-events-auto border-stone-300 bg-white/80 dark:bg-stone-900/80 backdrop-blur", children: [!ready && ((0, jsx_runtime_1.jsxs)("div", { className: "rounded", children: [(0, jsx_runtime_1.jsx)("button", { className: (0, classnames_1.default)('flex text-center rounded-full cursor-pointer text-stone-800 dark:text-white hover:opacity-100 opacity-60', {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "sticky top-[60px] flex justify-end w-full z-20 pointer-events-none", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex p-1 m-1 border rounded-full shadow pointer-events-auto space-x-1 border-stone-300 bg-white/80 dark:bg-stone-900/80 backdrop-blur", children: [!ready && ((0, jsx_runtime_1.jsxs)("div", { className: "rounded", children: [(0, jsx_runtime_1.jsx)("button", { className: (0, classnames_1.default)('flex text-center rounded-full cursor-pointer text-stone-800 dark:text-white hover:opacity-100 opacity-60', {
                                     'opacity-10 text-stone-100 dark:text-stone-700': connecting || building,
                                 }), onClick: handleStart, disabled: building, "aria-label": "start compute environment", children: (0, jsx_runtime_1.jsx)(PowerIcon_1.default, { className: "inline-block w-6 h-6 align-top", title: "enable compute" }) }), (connecting || building) && !error && ((0, jsx_runtime_1.jsx)("span", { className: "absolute top-1 left-1 z-10 w-[22px] h-[22px] opacity-100", title: title, children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: 24 }) }))] })), ready && ((0, jsx_runtime_1.jsx)(Buttons_1.Run, { ready: ready, executing: busy.page(slug, 'execute'), onClick: handleRun, title: "Run all cells" })), ready && ((0, jsx_runtime_1.jsx)(Buttons_1.Reset, { ready: ready, resetting: busy.page(slug, 'reset'), onClick: handleReset, title: "Reset notebook and restart kernel" })), ready && ((0, jsx_runtime_1.jsx)(Buttons_1.Clear, { ready: ready, disabled: busy.page(slug, 'execute') || busy.page(slug, 'reset'), onClick: handleClear, title: "Clear all cells" })), showLaunch && ready && ((0, jsx_runtime_1.jsx)(Buttons_1.Launch, { ready: ready, disabled: false, onClick: handleLaunch, title: "Launch notebook in Jupyter" }))] }) }));
     return null;

package/dist/cjs/embed.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type GenericNode } from 'myst-common';
+export declare function Embed(node: GenericNode, children: React.ReactNode): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=embed.d.ts.map

package/dist/cjs/embed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"embed.d.ts","sourceRoot":"","sources":["../../src/embed.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAwD/D,wBAAgB,KAAK,CAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,2CAajE"}

package/dist/cjs/embed.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Embed = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const myst_common_1 = require("myst-common");
+const execute_1 = require("./execute");
+const ArticleCellControls_1 = require("./controls/ArticleCellControls");
+const solid_1 = require("@scienceicons/react/24/solid");
+const unist_util_select_1 = require("unist-util-select");
+const providers_1 = require("@myst-theme/providers");
+function EmbedWithControls({ outputKey, children, title = 'Jupyter Notebook', url, }) {
+    const { kind } = (0, execute_1.useCellExecution)(outputKey);
+    const Link = (0, providers_1.useLinkProvider)();
+    const baseurl = (0, providers_1.useBaseurl)();
+    const showControls = kind === myst_common_1.SourceFileKind.Article;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "shadow", children: [showControls && ((0, jsx_runtime_1.jsx)("div", { className: "sticky top-[60px] z-[2] w-full bg-gray-100/80 backdrop-blur dark:bg-neutral-800/80 py-1 px-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)(solid_1.JupyterIcon, { className: "inline-block w-5 h-5" }), (0, jsx_runtime_1.jsx)("span", { className: "ml-2", children: "Source:" }), url && ((0, jsx_runtime_1.jsx)(Link, { to: (0, providers_1.withBaseurl)(url, baseurl), className: "ml-2 no-underline text-normal hover:underline", children: title }))] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-grow" }), (0, jsx_runtime_1.jsx)(ArticleCellControls_1.ArticleStatusBadge, { id: outputKey }), (0, jsx_runtime_1.jsx)(ArticleCellControls_1.ArticleRunNotebook, { id: outputKey }), (0, jsx_runtime_1.jsx)(ArticleCellControls_1.ArticleResetNotebook, { id: outputKey })] }) })), (0, jsx_runtime_1.jsx)("div", { className: "mt-2", children: children })] }));
+}
+function Embed(node, children) {
+    var _a, _b;
+    const output = (0, unist_util_select_1.select)('output', node);
+    if (!output)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+    return ((0, jsx_runtime_1.jsx)(EmbedWithControls, { outputKey: output.key, title: (_a = node.source) === null || _a === void 0 ? void 0 : _a.title, url: (_b = node.source) === null || _b === void 0 ? void 0 : _b.url, children: children }, node.key));
+}
+exports.Embed = Embed;

package/dist/cjs/index.d.ts

@@ -1,6 +1,8 @@
+import { Embed } from './embed';
 import { Output } from './output';
 declare const OUTPUT_RENDERERS: {
     output: typeof Output;
+    embed: typeof Embed;
 };
 export * from './BinderBadge';
 export * from './ErrorTray';

package/dist/cjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,gBAAgB;;CAErB,CAAC;AAEF,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAE3B,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,gBAAgB;;;CAGrB,CAAC;AAEF,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAE3B,eAAe,gBAAgB,CAAC"}

package/dist/cjs/index.js

@@ -14,9 +14,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const embed_1 = require("./embed");
 const output_1 = require("./output");
 const OUTPUT_RENDERERS = {
     output: output_1.Output,
+    embed: embed_1.Embed,
 };
 __exportStar(require("./BinderBadge"), exports);
 __exportStar(require("./ErrorTray"), exports);

package/dist/cjs/jupyter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"jupyter.d.ts","sourceRoot":"","sources":["../../src/jupyter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,MAAM,CAAC;AA6D3C,eAAO,MAAM,cAAc;QACD,MAAM;aAAW,cAAc,EAAE;8CAkD1D,CAAC"}
+{"version":3,"file":"jupyter.d.ts","sourceRoot":"","sources":["../../src/jupyter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,MAAM,CAAC;AAmE3C,eAAO,MAAM,cAAc;QACD,MAAM;aAAW,cAAc,EAAE;8CAmD1D,CAAC"}

package/dist/cjs/jupyter.js

@@ -33,11 +33,11 @@ const myst_common_1 = require("myst-common");
 const providers_1 = require("@myst-theme/providers");
 const thebe_react_1 = require("thebe-react");
 const execute_1 = require("./execute");
-function ActiveOutputRenderer({ id, initialData }) {
+function ActiveOutputRenderer({ id, initialData, core, }) {
     const exec = (0, execute_1.useCellExecution)(id);
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
-        var _a;
+        var _a, _b, _c;
         if (!ref.current || !(exec === null || exec === void 0 ? void 0 : exec.cell)) {
             console.debug(`Jupyter: No cell ref available for cell ${(_a = exec === null || exec === void 0 ? void 0 : exec.cell) === null || _a === void 0 ? void 0 : _a.id}`);
             return;
@@ -46,14 +46,11 @@ function ActiveOutputRenderer({ id, initialData }) {
         console.debug(`${verb} cell ${exec.cell.id} to DOM at:`, {
             el: ref.current,
             connected: ref.current.isConnected,
-            data: initialData,
+            data: (_b = core === null || core === void 0 ? void 0 : core.stripWidgets(initialData)) !== null && _b !== void 0 ? _b : initialData,
         });
         exec.cell.attachToDOM(ref.current);
         if (exec.cell.executionCount == null) {
-            exec.cell.initOutputs(initialData);
-        }
-        else {
-            exec.cell.refresh();
+            exec.cell.initOutputs((_c = core === null || core === void 0 ? void 0 : core.stripWidgets(initialData)) !== null && _c !== void 0 ? _c : initialData);
         }
     }, [ref === null || ref === void 0 ? void 0 : ref.current, exec === null || exec === void 0 ? void 0 : exec.cell]);
     return (0, jsx_runtime_1.jsx)("div", { ref: ref, "data-thebe-active-ref": "true", className: "relative" });
@@ -62,10 +59,11 @@ function PassiveOutputRenderer({ id, data, core, kind, }) {
     const cell = (0, react_1.useRef)(new core.PassiveCellRenderer(id, undefined, undefined));
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
+        var _a;
         if (!ref.current)
             return;
         cell.current.attachToDOM(ref.current, true);
-        cell.current.render(data, kind === myst_common_1.SourceFileKind.Article);
+        cell.current.render((_a = core === null || core === void 0 ? void 0 : core.stripWidgets(data)) !== null && _a !== void 0 ? _a : data);
     }, [ref]);
     return (0, jsx_runtime_1.jsx)("div", { ref: ref, "data-thebe-passive-ref": "true" });
 }
@@ -74,7 +72,6 @@ exports.JupyterOutputs = react_1.default.memo(({ id, outputs }) => {
     const { inCrossRef } = (0, providers_1.useXRefState)();
     const { data, error } = (0, hooks_1.useFetchAnyTruncatedContent)(outputs);
     const [fullOutputs, setFullOutputs] = (0, react_1.useState)(null);
-    // const exec = useNotebookCellExecution(id);
     const exec = (0, execute_1.useCellExecution)(id);
     (0, react_1.useEffect)(() => {
         if (core)
@@ -94,7 +91,7 @@ exports.JupyterOutputs = react_1.default.memo(({ id, outputs }) => {
         return (0, jsx_runtime_1.jsxs)("div", { className: "text-red-500", children: ["Error rendering output: ", error.message] });
     }
     if (!inCrossRef && (exec === null || exec === void 0 ? void 0 : exec.ready)) {
-        return ((0, jsx_runtime_1.jsxs)("div", { children: [!fullOutputs && (0, jsx_runtime_1.jsx)("div", { className: "p-2.5", children: "Loading..." }), fullOutputs && (0, jsx_runtime_1.jsx)(ActiveOutputRenderer, { id: id, initialData: fullOutputs }, id)] }));
+        return ((0, jsx_runtime_1.jsxs)("div", { children: [!fullOutputs && (0, jsx_runtime_1.jsx)("div", { className: "p-2.5", children: "Fetching full output data..." }), core && fullOutputs && ((0, jsx_runtime_1.jsx)(ActiveOutputRenderer, { id: id, initialData: fullOutputs, core: core }, id))] }));
     }
     return ((0, jsx_runtime_1.jsxs)("div", { children: [!fullOutputs && (0, jsx_runtime_1.jsx)("div", { className: "p-2.5", children: "Loading..." }), fullOutputs && core && ((0, jsx_runtime_1.jsx)(PassiveOutputRenderer, { id: id, data: fullOutputs, core: core, kind: myst_common_1.SourceFileKind.Notebook }))] }));
 });

package/dist/cjs/output.d.ts

@@ -1,4 +1,4 @@
-import { type GenericNode } from 'myst-common';
+import type { GenericNode } from 'myst-common';
 import type { MinifiedOutput } from 'nbtx';
 export declare const DIRECT_OUTPUT_TYPES: Set<string>;
 export declare const DIRECT_MIME_TYPES: Set<string>;

package/dist/cjs/output.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"output.d.ts","sourceRoot":"","sources":["../../src/output.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/D,OAAO,KAAK,EAAsB,cAAc,EAAE,MAAM,MAAM,CAAC;AAY/D,eAAO,MAAM,mBAAmB,aAA+B,CAAC;AAEhE,eAAO,MAAM,iBAAiB,aAMb,CAAC;AAElB,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,cAAc,EAAE,EACzB,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,EAC9B,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,WAY7B;AAwDD,wBAAgB,MAAM,CAAC,IAAI,EAAE,WAAW,2CAYvC"}
+{"version":3,"file":"output.d.ts","sourceRoot":"","sources":["../../src/output.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,KAAK,EAAsB,cAAc,EAAE,MAAM,MAAM,CAAC;AAO/D,eAAO,MAAM,mBAAmB,aAA+B,CAAC;AAEhE,eAAO,MAAM,iBAAiB,aAMb,CAAC;AAElB,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,cAAc,EAAE,EACzB,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,EAC9B,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,WAY7B;AA6CD,wBAAgB,MAAM,CAAC,IAAI,EAAE,WAAW,2CAYvC"}

package/dist/cjs/output.js

@@ -5,14 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Output = exports.allOutputsAreSafe = exports.DIRECT_MIME_TYPES = exports.DIRECT_OUTPUT_TYPES = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const myst_common_1 = require("myst-common");
 const nbtx_1 = require("nbtx");
 const classnames_1 = __importDefault(require("classnames"));
 const safe_1 = require("./safe");
 const jupyter_1 = require("./jupyter");
 const react_1 = require("react");
 const execute_1 = require("./execute");
-const ArticleCellControls_1 = require("./controls/ArticleCellControls");
 exports.DIRECT_OUTPUT_TYPES = new Set(['stream', 'error']);
 exports.DIRECT_MIME_TYPES = new Set([
     nbtx_1.KnownCellOutputMimeTypes.TextPlain,
@@ -35,7 +33,7 @@ function allOutputsAreSafe(outputs, directOutputTypes, directMimeTypes) {
 }
 exports.allOutputsAreSafe = allOutputsAreSafe;
 function JupyterOutput({ nodeKey, nodeType, identifier, data, align, }) {
-    const { kind, ready } = (0, execute_1.useCellExecution)(nodeKey);
+    const { ready } = (0, execute_1.useCellExecution)(nodeKey);
     const outputs = data;
     const allSafe = (0, react_1.useMemo)(() => allOutputsAreSafe(outputs, exports.DIRECT_OUTPUT_TYPES, exports.DIRECT_MIME_TYPES), [outputs]);
     let component;
@@ -45,12 +43,11 @@ function JupyterOutput({ nodeKey, nodeType, identifier, data, align, }) {
     else {
         component = (0, jsx_runtime_1.jsx)(jupyter_1.JupyterOutputs, { id: nodeKey, outputs: outputs });
     }
-    const showControls = kind === myst_common_1.SourceFileKind.Article;
-    return ((0, jsx_runtime_1.jsxs)("figure", { id: identifier || undefined, "data-mdast-node-type": nodeType, "data-mdast-node-id": nodeKey, className: (0, classnames_1.default)('max-w-full overflow-visible m-0 group not-prose relative', {
+    return ((0, jsx_runtime_1.jsx)("figure", { id: identifier || undefined, "data-mdast-node-type": nodeType, "data-mdast-node-id": nodeKey, className: (0, classnames_1.default)('max-w-full overflow-visible m-0 group not-prose relative', {
             'text-left': !align || align === 'left',
             'text-center': align === 'center',
             'text-right': align === 'right',
-        }), children: [showControls && ((0, jsx_runtime_1.jsx)("div", { className: "sticky top-[60px]", children: (0, jsx_runtime_1.jsxs)("div", { className: "absolute -top-[28px] md:top-[30px] right-0 md:-right-[28px]", children: [(0, jsx_runtime_1.jsx)(ArticleCellControls_1.ArticleStatusBadge, { id: nodeKey }), (0, jsx_runtime_1.jsx)(ArticleCellControls_1.ArticleRunNotebook, { id: nodeKey }), (0, jsx_runtime_1.jsx)(ArticleCellControls_1.ArticleResetNotebook, { id: nodeKey })] }) })), component] }));
+        }), children: component }));
 }
 function Output(node) {
     // Note, NodeRenderer's can't have hooks in it directly!

package/dist/esm/controls/NotebookToolbar.js

@@ -33,7 +33,7 @@ export function NotebookToolbar({ showLaunch = false }) {
         title = status;
     }
     if (computable)
-        return (_jsx("div", { className: "sticky top-[60px] flex justify-end w-full z-20 pointer-events-none", children: _jsxs("div", { className: "flex p-1 m-1 space-x-1 border rounded-full shadow pointer-events-auto border-stone-300 bg-white/80 dark:bg-stone-900/80 backdrop-blur", children: [!ready && (_jsxs("div", { className: "rounded", children: [_jsx("button", { className: classNames('flex text-center rounded-full cursor-pointer text-stone-800 dark:text-white hover:opacity-100 opacity-60', {
+        return (_jsx("div", { className: "sticky top-[60px] flex justify-end w-full z-20 pointer-events-none", children: _jsxs("div", { className: "flex p-1 m-1 border rounded-full shadow pointer-events-auto space-x-1 border-stone-300 bg-white/80 dark:bg-stone-900/80 backdrop-blur", children: [!ready && (_jsxs("div", { className: "rounded", children: [_jsx("button", { className: classNames('flex text-center rounded-full cursor-pointer text-stone-800 dark:text-white hover:opacity-100 opacity-60', {
                                     'opacity-10 text-stone-100 dark:text-stone-700': connecting || building,
                                 }), onClick: handleStart, disabled: building, "aria-label": "start compute environment", children: _jsx(PowerIcon, { className: "inline-block w-6 h-6 align-top", title: "enable compute" }) }), (connecting || building) && !error && (_jsx("span", { className: "absolute top-1 left-1 z-10 w-[22px] h-[22px] opacity-100", title: title, children: _jsx(Spinner, { size: 24 }) }))] })), ready && (_jsx(Run, { ready: ready, executing: busy.page(slug, 'execute'), onClick: handleRun, title: "Run all cells" })), ready && (_jsx(Reset, { ready: ready, resetting: busy.page(slug, 'reset'), onClick: handleReset, title: "Reset notebook and restart kernel" })), ready && (_jsx(Clear, { ready: ready, disabled: busy.page(slug, 'execute') || busy.page(slug, 'reset'), onClick: handleClear, title: "Clear all cells" })), showLaunch && ready && (_jsx(Launch, { ready: ready, disabled: false, onClick: handleLaunch, title: "Launch notebook in Jupyter" }))] }) }));
     return null;

package/dist/esm/embed.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type GenericNode } from 'myst-common';
+export declare function Embed(node: GenericNode, children: React.ReactNode): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=embed.d.ts.map

package/dist/esm/embed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"embed.d.ts","sourceRoot":"","sources":["../../src/embed.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAwD/D,wBAAgB,KAAK,CAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,2CAajE"}

package/dist/esm/embed.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SourceFileKind } from 'myst-common';
+import { useCellExecution } from './execute';
+import { ArticleResetNotebook, ArticleRunNotebook, ArticleStatusBadge, } from './controls/ArticleCellControls';
+import { JupyterIcon } from '@scienceicons/react/24/solid';
+import { select } from 'unist-util-select';
+import { useLinkProvider, useBaseurl, withBaseurl } from '@myst-theme/providers';
+function EmbedWithControls({ outputKey, children, title = 'Jupyter Notebook', url, }) {
+    const { kind } = useCellExecution(outputKey);
+    const Link = useLinkProvider();
+    const baseurl = useBaseurl();
+    const showControls = kind === SourceFileKind.Article;
+    return (_jsxs("div", { className: "shadow", children: [showControls && (_jsx("div", { className: "sticky top-[60px] z-[2] w-full bg-gray-100/80 backdrop-blur dark:bg-neutral-800/80 py-1 px-2", children: _jsxs("div", { className: "flex items-center", children: [_jsxs("div", { className: "flex items-center", children: [_jsx(JupyterIcon, { className: "inline-block w-5 h-5" }), _jsx("span", { className: "ml-2", children: "Source:" }), url && (_jsx(Link, { to: withBaseurl(url, baseurl), className: "ml-2 no-underline text-normal hover:underline", children: title }))] }), _jsx("div", { className: "flex-grow" }), _jsx(ArticleStatusBadge, { id: outputKey }), _jsx(ArticleRunNotebook, { id: outputKey }), _jsx(ArticleResetNotebook, { id: outputKey })] }) })), _jsx("div", { className: "mt-2", children: children })] }));
+}
+export function Embed(node, children) {
+    var _a, _b;
+    const output = select('output', node);
+    if (!output)
+        return _jsx(_Fragment, { children: children });
+    return (_jsx(EmbedWithControls, { outputKey: output.key, title: (_a = node.source) === null || _a === void 0 ? void 0 : _a.title, url: (_b = node.source) === null || _b === void 0 ? void 0 : _b.url, children: children }, node.key));
+}

package/dist/esm/index.d.ts

@@ -1,6 +1,8 @@
+import { Embed } from './embed';
 import { Output } from './output';
 declare const OUTPUT_RENDERERS: {
     output: typeof Output;
+    embed: typeof Embed;
 };
 export * from './BinderBadge';
 export * from './ErrorTray';

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,gBAAgB;;CAErB,CAAC;AAEF,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAE3B,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,gBAAgB;;;CAGrB,CAAC;AAEF,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAE3B,eAAe,gBAAgB,CAAC"}

package/dist/esm/index.js

@@ -1,6 +1,8 @@
+import { Embed } from './embed';
 import { Output } from './output';
 const OUTPUT_RENDERERS = {
     output: Output,
+    embed: Embed,
 };
 export * from './BinderBadge';
 export * from './ErrorTray';

package/dist/esm/jupyter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"jupyter.d.ts","sourceRoot":"","sources":["../../src/jupyter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,MAAM,CAAC;AA6D3C,eAAO,MAAM,cAAc;QACD,MAAM;aAAW,cAAc,EAAE;8CAkD1D,CAAC"}
+{"version":3,"file":"jupyter.d.ts","sourceRoot":"","sources":["../../src/jupyter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,MAAM,CAAC;AAmE3C,eAAO,MAAM,cAAc;QACD,MAAM;aAAW,cAAc,EAAE;8CAmD1D,CAAC"}

package/dist/esm/jupyter.js

@@ -7,11 +7,11 @@ import { SourceFileKind } from 'myst-common';
 import { useXRefState } from '@myst-theme/providers';
 import { useThebeLoader } from 'thebe-react';
 import { useCellExecution } from './execute';
-function ActiveOutputRenderer({ id, initialData }) {
+function ActiveOutputRenderer({ id, initialData, core, }) {
     const exec = useCellExecution(id);
     const ref = useRef(null);
     useEffect(() => {
-        var _a;
+        var _a, _b, _c;
         if (!ref.current || !(exec === null || exec === void 0 ? void 0 : exec.cell)) {
             console.debug(`Jupyter: No cell ref available for cell ${(_a = exec === null || exec === void 0 ? void 0 : exec.cell) === null || _a === void 0 ? void 0 : _a.id}`);
             return;
@@ -20,14 +20,11 @@ function ActiveOutputRenderer({ id, initialData }) {
         console.debug(`${verb} cell ${exec.cell.id} to DOM at:`, {
             el: ref.current,
             connected: ref.current.isConnected,
-            data: initialData,
+            data: (_b = core === null || core === void 0 ? void 0 : core.stripWidgets(initialData)) !== null && _b !== void 0 ? _b : initialData,
         });
         exec.cell.attachToDOM(ref.current);
         if (exec.cell.executionCount == null) {
-            exec.cell.initOutputs(initialData);
-        }
-        else {
-            exec.cell.refresh();
+            exec.cell.initOutputs((_c = core === null || core === void 0 ? void 0 : core.stripWidgets(initialData)) !== null && _c !== void 0 ? _c : initialData);
         }
     }, [ref === null || ref === void 0 ? void 0 : ref.current, exec === null || exec === void 0 ? void 0 : exec.cell]);
     return _jsx("div", { ref: ref, "data-thebe-active-ref": "true", className: "relative" });
@@ -36,10 +33,11 @@ function PassiveOutputRenderer({ id, data, core, kind, }) {
     const cell = useRef(new core.PassiveCellRenderer(id, undefined, undefined));
     const ref = useRef(null);
     useEffect(() => {
+        var _a;
         if (!ref.current)
             return;
         cell.current.attachToDOM(ref.current, true);
-        cell.current.render(data, kind === SourceFileKind.Article);
+        cell.current.render((_a = core === null || core === void 0 ? void 0 : core.stripWidgets(data)) !== null && _a !== void 0 ? _a : data);
     }, [ref]);
     return _jsx("div", { ref: ref, "data-thebe-passive-ref": "true" });
 }
@@ -48,7 +46,6 @@ export const JupyterOutputs = React.memo(({ id, outputs }) => {
     const { inCrossRef } = useXRefState();
     const { data, error } = useFetchAnyTruncatedContent(outputs);
     const [fullOutputs, setFullOutputs] = useState(null);
-    // const exec = useNotebookCellExecution(id);
     const exec = useCellExecution(id);
     useEffect(() => {
         if (core)
@@ -68,7 +65,7 @@ export const JupyterOutputs = React.memo(({ id, outputs }) => {
         return _jsxs("div", { className: "text-red-500", children: ["Error rendering output: ", error.message] });
     }
     if (!inCrossRef && (exec === null || exec === void 0 ? void 0 : exec.ready)) {
-        return (_jsxs("div", { children: [!fullOutputs && _jsx("div", { className: "p-2.5", children: "Loading..." }), fullOutputs && _jsx(ActiveOutputRenderer, { id: id, initialData: fullOutputs }, id)] }));
+        return (_jsxs("div", { children: [!fullOutputs && _jsx("div", { className: "p-2.5", children: "Fetching full output data..." }), core && fullOutputs && (_jsx(ActiveOutputRenderer, { id: id, initialData: fullOutputs, core: core }, id))] }));
     }
     return (_jsxs("div", { children: [!fullOutputs && _jsx("div", { className: "p-2.5", children: "Loading..." }), fullOutputs && core && (_jsx(PassiveOutputRenderer, { id: id, data: fullOutputs, core: core, kind: SourceFileKind.Notebook }))] }));
 });

package/dist/esm/output.d.ts

@@ -1,4 +1,4 @@
-import { type GenericNode } from 'myst-common';
+import type { GenericNode } from 'myst-common';
 import type { MinifiedOutput } from 'nbtx';
 export declare const DIRECT_OUTPUT_TYPES: Set<string>;
 export declare const DIRECT_MIME_TYPES: Set<string>;

package/dist/esm/output.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"output.d.ts","sourceRoot":"","sources":["../../src/output.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/D,OAAO,KAAK,EAAsB,cAAc,EAAE,MAAM,MAAM,CAAC;AAY/D,eAAO,MAAM,mBAAmB,aAA+B,CAAC;AAEhE,eAAO,MAAM,iBAAiB,aAMb,CAAC;AAElB,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,cAAc,EAAE,EACzB,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,EAC9B,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,WAY7B;AAwDD,wBAAgB,MAAM,CAAC,IAAI,EAAE,WAAW,2CAYvC"}
+{"version":3,"file":"output.d.ts","sourceRoot":"","sources":["../../src/output.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,KAAK,EAAsB,cAAc,EAAE,MAAM,MAAM,CAAC;AAO/D,eAAO,MAAM,mBAAmB,aAA+B,CAAC;AAEhE,eAAO,MAAM,iBAAiB,aAMb,CAAC;AAElB,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,cAAc,EAAE,EACzB,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,EAC9B,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,WAY7B;AA6CD,wBAAgB,MAAM,CAAC,IAAI,EAAE,WAAW,2CAYvC"}

package/dist/esm/output.js

@@ -1,12 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SourceFileKind } from 'myst-common';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { KnownCellOutputMimeTypes } from 'nbtx';
 import classNames from 'classnames';
 import { SafeOutputs } from './safe';
 import { JupyterOutputs } from './jupyter';
 import { useMemo } from 'react';
 import { useCellExecution } from './execute';
-import { ArticleResetNotebook, ArticleRunNotebook, ArticleStatusBadge, } from './controls/ArticleCellControls';
 export const DIRECT_OUTPUT_TYPES = new Set(['stream', 'error']);
 export const DIRECT_MIME_TYPES = new Set([
     KnownCellOutputMimeTypes.TextPlain,
@@ -28,7 +26,7 @@ export function allOutputsAreSafe(outputs, directOutputTypes, directMimeTypes) {
     }, true);
 }
 function JupyterOutput({ nodeKey, nodeType, identifier, data, align, }) {
-    const { kind, ready } = useCellExecution(nodeKey);
+    const { ready } = useCellExecution(nodeKey);
     const outputs = data;
     const allSafe = useMemo(() => allOutputsAreSafe(outputs, DIRECT_OUTPUT_TYPES, DIRECT_MIME_TYPES), [outputs]);
     let component;
@@ -38,12 +36,11 @@ function JupyterOutput({ nodeKey, nodeType, identifier, data, align, }) {
     else {
         component = _jsx(JupyterOutputs, { id: nodeKey, outputs: outputs });
     }
-    const showControls = kind === SourceFileKind.Article;
-    return (_jsxs("figure", { id: identifier || undefined, "data-mdast-node-type": nodeType, "data-mdast-node-id": nodeKey, className: classNames('max-w-full overflow-visible m-0 group not-prose relative', {
+    return (_jsx("figure", { id: identifier || undefined, "data-mdast-node-type": nodeType, "data-mdast-node-id": nodeKey, className: classNames('max-w-full overflow-visible m-0 group not-prose relative', {
             'text-left': !align || align === 'left',
             'text-center': align === 'center',
             'text-right': align === 'right',
-        }), children: [showControls && (_jsx("div", { className: "sticky top-[60px]", children: _jsxs("div", { className: "absolute -top-[28px] md:top-[30px] right-0 md:-right-[28px]", children: [_jsx(ArticleStatusBadge, { id: nodeKey }), _jsx(ArticleRunNotebook, { id: nodeKey }), _jsx(ArticleResetNotebook, { id: nodeKey })] }) })), component] }));
+        }), children: component }));
 }
 export function Output(node) {
     // Note, NodeRenderer's can't have hooks in it directly!

package/dist/types/embed.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type GenericNode } from 'myst-common';
+export declare function Embed(node: GenericNode, children: React.ReactNode): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=embed.d.ts.map

package/dist/types/embed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"embed.d.ts","sourceRoot":"","sources":["../../src/embed.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAwD/D,wBAAgB,KAAK,CAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,2CAajE"}

package/dist/types/index.d.ts

@@ -1,6 +1,8 @@
+import { Embed } from './embed';
 import { Output } from './output';
 declare const OUTPUT_RENDERERS: {
     output: typeof Output;
+    embed: typeof Embed;
 };
 export * from './BinderBadge';
 export * from './ErrorTray';

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,gBAAgB;;CAErB,CAAC;AAEF,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAE3B,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,gBAAgB;;;CAGrB,CAAC;AAEF,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAE3B,eAAe,gBAAgB,CAAC"}

package/dist/types/jupyter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"jupyter.d.ts","sourceRoot":"","sources":["../../src/jupyter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,MAAM,CAAC;AA6D3C,eAAO,MAAM,cAAc;QACD,MAAM;aAAW,cAAc,EAAE;8CAkD1D,CAAC"}
+{"version":3,"file":"jupyter.d.ts","sourceRoot":"","sources":["../../src/jupyter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,MAAM,CAAC;AAmE3C,eAAO,MAAM,cAAc;QACD,MAAM;aAAW,cAAc,EAAE;8CAmD1D,CAAC"}

package/dist/types/output.d.ts

@@ -1,4 +1,4 @@
-import { type GenericNode } from 'myst-common';
+import type { GenericNode } from 'myst-common';
 import type { MinifiedOutput } from 'nbtx';
 export declare const DIRECT_OUTPUT_TYPES: Set<string>;
 export declare const DIRECT_MIME_TYPES: Set<string>;

package/dist/types/output.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"output.d.ts","sourceRoot":"","sources":["../../src/output.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/D,OAAO,KAAK,EAAsB,cAAc,EAAE,MAAM,MAAM,CAAC;AAY/D,eAAO,MAAM,mBAAmB,aAA+B,CAAC;AAEhE,eAAO,MAAM,iBAAiB,aAMb,CAAC;AAElB,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,cAAc,EAAE,EACzB,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,EAC9B,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,WAY7B;AAwDD,wBAAgB,MAAM,CAAC,IAAI,EAAE,WAAW,2CAYvC"}
+{"version":3,"file":"output.d.ts","sourceRoot":"","sources":["../../src/output.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,KAAK,EAAsB,cAAc,EAAE,MAAM,MAAM,CAAC;AAO/D,eAAO,MAAM,mBAAmB,aAA+B,CAAC;AAEhE,eAAO,MAAM,iBAAiB,aAMb,CAAC;AAElB,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,cAAc,EAAE,EACzB,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,EAC9B,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,WAY7B;AA6CD,wBAAgB,MAAM,CAAC,IAAI,EAAE,WAAW,2CAYvC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/jupyter",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -23,7 +23,7 @@
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
-    "@myst-theme/providers": "^0.3.4",
+    "@myst-theme/providers": "^0.3.6",
     "ansi-to-react": "^6.1.6",
     "buffer": "^6.0.3",
     "classnames": "^2.3.2",
@@ -31,14 +31,14 @@
     "myst-config": "^1.0.0",
     "myst-frontmatter": "^1.0.0",
     "myst-spec": "^0.0.4",
-    "myst-to-react": "^0.3.4",
+    "myst-to-react": "^0.3.6",
     "nanoid": "^4.0.2",
     "nbtx": "^0.2.3",
     "react-syntax-highlighter": "^15.5.0",
     "swr": "^2.1.5",
-    "thebe-core": "^0.2.7",
-    "thebe-lite": "^0.2.7",
-    "thebe-react": "^0.2.7",
+    "thebe-core": "^0.2.9",
+    "thebe-lite": "^0.2.9",
+    "thebe-react": "^0.2.9",
     "unist-util-select": "^4.0.3"
   },
   "peerDependencies": {