@myst-theme/jupyter 0.18.0 → 1.0.0

package/dist/active.d.ts

@@ -0,0 +1,13 @@
+import type { IOutput } from '@jupyterlab/nbformat';
+import type { ThebeCore } from 'thebe-core';
+import { type MinifiedOutput } from 'nbtx';
+export declare function ActiveOutputRenderer({ outputsId, initialData, core, }: {
+    outputsId: string;
+    initialData: IOutput[];
+    core: ThebeCore;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ActiveJupyterCellOutputs({ outputsId, outputs, }: {
+    outputsId: string;
+    outputs: MinifiedOutput[];
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=active.d.ts.map

package/dist/active.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"active.d.ts","sourceRoot":"","sources":["../src/active.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAK5C,OAAO,EAAqB,KAAK,cAAc,EAAE,MAAM,MAAM,CAAC;AAM9D,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,WAAW,EACX,IAAI,GACL,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,OAAO,EAAE,CAAC;IACvB,IAAI,EAAE,SAAS,CAAC;CACjB,2CA0CA;AAED,wBAAgB,wBAAwB,CAAC,EACvC,SAAS,EACT,OAAO,GACR,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,cAAc,EAAE,CAAC;CAC3B,2CA6CA"}

package/dist/active.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useCellExecution } from './execute/index.js';
+import { usePlaceholder } from './decoration.js';
+import { MyST } from 'myst-to-react';
+import classNames from 'classnames';
+import { convertToIOutputs } from 'nbtx';
+import { useThebeLoader } from 'thebe-react';
+import { useFetchAnyTruncatedContent } from './hooks.js';
+import { useXRefState } from '@myst-theme/providers';
+import { fetchAndEncodeOutputImages } from './convertImages.js';
+export function ActiveOutputRenderer({ outputsId, initialData, core, }) {
+    var _a;
+    const exec = useCellExecution(outputsId);
+    const placeholder = usePlaceholder();
+    const ref = useRef(null);
+    useEffect(() => {
+        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 ${outputsId}:${(_a = exec === null || exec === void 0 ? void 0 : exec.cell) === null || _a === void 0 ? void 0 : _a.id}`);
+            return;
+        }
+        const verb = exec.cell.isAttachedToDOM ? 'reattaching' : 'attaching';
+        console.debug(`${verb} cell ${exec.cell.id} to DOM at:`, {
+            el: ref.current,
+            connected: ref.current.isConnected,
+            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((_c = core === null || core === void 0 ? void 0 : core.stripWidgets(initialData, true, placeholder ? () => '' : undefined)) !== null && _c !== void 0 ? _c : initialData);
+        }
+    }, [ref === null || ref === void 0 ? void 0 : ref.current, exec === null || exec === void 0 ? void 0 : exec.cell]);
+    const executed = ((_a = exec === null || exec === void 0 ? void 0 : exec.cell) === null || _a === void 0 ? void 0 : _a.executionCount) != null;
+    console.debug(`Jupyter: Cell ${outputsId} executed: ${executed}; Show output: ${executed || !placeholder}`);
+    return (_jsxs("div", { children: [_jsx("div", { ref: ref, "data-thebe-active-ref": "true", className: classNames('relative', { 'invisible h-0': !executed && placeholder }) }), exec.ready && placeholder && !executed && _jsx(MyST, { ast: placeholder })] }));
+}
+export function ActiveJupyterCellOutputs({ outputsId, outputs, }) {
+    const { core, load } = useThebeLoader();
+    const { inCrossRef } = useXRefState();
+    const exec = useCellExecution(outputsId);
+    // NOTE: could maybe lift this into the outputs renderer,  from here and the passive renderer
+    // but the images will be cached anywways, so there is limited benefit
+    const { data, error } = useFetchAnyTruncatedContent(outputs);
+    const [fullOutputs, setFullOutputs] = useState(null);
+    useEffect(() => {
+        if (core)
+            return;
+        load();
+    }, [core, load]);
+    useEffect(() => {
+        if (!data || fullOutputs != null)
+            return;
+        fetchAndEncodeOutputImages(data).then((out) => {
+            const compactOutputs = convertToIOutputs(out, {});
+            setFullOutputs(compactOutputs);
+        });
+    }, [outputsId, data, fullOutputs]);
+    if (error) {
+        console.error(error);
+        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: "Fetching full output data..." }), core && fullOutputs && (_jsx(ActiveOutputRenderer, { outputsId: outputsId, initialData: fullOutputs, core: core }, outputsId))] }));
+    }
+    return _jsx("div", { children: "ActiveJupyterCellOutputs in cross reference" });
+}

package/dist/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,+BAI1B;IACD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,GAAG,CAAC,OAAO,CAAC;CAC1C,4CAWA,CAAC;AAEF,eAAO,MAAM,aAAa,yBAA0B;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,4CAWtE,CAAC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,GAAI,4BAI9B;IACD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,GAAG,CAAC,OAAO,CAAC;CAC1C,4CAWA,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,sBAAsB;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,4CAWtE,CAAC"}

package/dist/decoration.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"decoration.d.ts","sourceRoot":"","sources":["../src/decoration.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAsB/C,wBAAgB,cAAc,4BAG7B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,KAA0B,EAC1B,GAAG,EACH,aAAa,GACd,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,2CAkEA"}
+{"version":3,"file":"decoration.d.ts","sourceRoot":"","sources":["../src/decoration.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AA4B/C,wBAAgB,cAAc,4BAG7B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,KAA0B,EAC1B,GAAG,EACH,aAAa,GACd,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,2CAuEA"}

package/dist/decoration.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { SourceFileKind } from 'myst-spec-ext';
 import { useCellExecution } from './execute/index.js';
 import { ArticleResetNotebook, ArticleRunNotebook, ArticleStatusBadge, } from './controls/ArticleCellControls.js';
 import { JupyterIcon } from '@scienceicons/react/24/solid';
-import { useLinkProvider, useBaseurl, withBaseurl, useThemeTop } from '@myst-theme/providers';
+import { useLinkProvider, useBaseurl, withBaseurl, useThemeTop, useXRefState, } from '@myst-theme/providers';
 import { useComputeOptions } from './providers.js';
 const PlaceholderContext = React.createContext({});
 function PlaceholderProvider({ placeholder, children, }) {
@@ -21,17 +21,19 @@ export function OutputDecoration({ outputId, placeholder, children, title = 'Jup
     const Link = useLinkProvider();
     const top = useThemeTop();
     const baseurl = useBaseurl();
+    const { inCrossRef } = useXRefState();
     const showComputeControls = (compute === null || compute === void 0 ? void 0 : compute.enabled) &&
         (compute === null || compute === void 0 ? void 0 : compute.features.figureCompute) &&
         kind === SourceFileKind.Article &&
-        !remoteBaseUrl;
+        !remoteBaseUrl &&
+        !inCrossRef;
     if (showComputeControls) {
-        return (_jsxs("div", { className: "myst-jp-output-deco mb-4 shadow", children: [_jsx("div", { className: "myst-jp-output-deco-header sticky z-[2] w-full bg-gray-100/80 backdrop-blur dark:bg-neutral-800/80 py-1 px-2", style: { top }, children: _jsxs("div", { className: "myst-jp-output-deco-inner flex items-center", children: [_jsxs("div", { className: "myst-jp-output-deco-source flex items-center", children: [_jsx(JupyterIcon, { width: "1.25rem", height: "1.25rem", className: "inline-block" }), _jsx("span", { className: "myst-jp-output-deco-label ml-2", children: "Source:" }), url && (_jsx(Link, { to: withBaseurl(url, remoteBaseUrl !== null && remoteBaseUrl !== void 0 ? remoteBaseUrl : baseurl), className: "myst-jp-output-deco-link ml-2 no-underline text-normal hover:underline", children: title }))] }), _jsx("div", { className: "flex-grow" }), _jsx(ArticleStatusBadge, { id: outputId }), _jsx(ArticleRunNotebook, { id: outputId }), _jsx(ArticleResetNotebook, { id: outputId })] }) }), _jsx(PlaceholderProvider, { placeholder: placeholder, children: children })] }));
+        return (_jsxs("div", { "data-name": "output-decoration-with-compute-ctrls", className: "mb-4 shadow myst-jp-output-deco", children: [_jsx("div", { className: "myst-jp-output-deco-header sticky z-[2] w-full bg-gray-100/80 backdrop-blur dark:bg-neutral-800/80 py-1 px-2", style: { top }, children: _jsxs("div", { className: "flex items-center myst-jp-output-deco-inner", children: [_jsxs("div", { className: "flex items-center myst-jp-output-deco-source", children: [_jsx(JupyterIcon, { width: "1.25rem", height: "1.25rem", className: "inline-block" }), _jsx("span", { className: "ml-2 myst-jp-output-deco-label", children: "Source:" }), url && (_jsx(Link, { to: withBaseurl(url, remoteBaseUrl !== null && remoteBaseUrl !== void 0 ? remoteBaseUrl : baseurl), className: "ml-2 no-underline myst-jp-output-deco-link text-normal hover:underline", children: title }))] }), _jsx("div", { className: "flex-grow" }), _jsx(ArticleStatusBadge, { id: outputId }), _jsx(ArticleRunNotebook, { id: outputId }), _jsx(ArticleResetNotebook, { id: outputId })] }) }), _jsx(PlaceholderProvider, { placeholder: placeholder, children: children })] }));
     }
     // light
     if (kind === SourceFileKind.Article) {
-        return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "myst-jp-output-deco-light flex items-center justify-end text-xs", children: [_jsx(JupyterIcon, { width: "0.75rem", height: "0.75rem", className: "inline-block" }), _jsx("div", { className: "myst-jp-output-deco-label ml-1", children: "Source:" }), url && (_jsx(Link, { to: withBaseurl(url, remoteBaseUrl !== null && remoteBaseUrl !== void 0 ? remoteBaseUrl : baseurl), className: "myst-jp-output-deco-link ml-1 no-underline text-normal hover:underline", children: title }))] }), _jsx(PlaceholderProvider, { placeholder: placeholder, children: children })] }));
+        return (_jsxs("div", { "data-name": "output-decoration-article", children: [_jsxs("div", { className: "flex justify-end items-center text-xsmyst-jp-output-deco-light", children: [_jsx(JupyterIcon, { width: "0.75rem", height: "0.75rem", className: "inline-block" }), _jsx("div", { className: "ml-1 myst-jp-output-deco-label", children: "Source:" }), url && (_jsx(Link, { to: withBaseurl(url, remoteBaseUrl !== null && remoteBaseUrl !== void 0 ? remoteBaseUrl : baseurl), className: "ml-1 no-underline myst-jp-output-deco-link text-normal hover:underline", children: title }))] }), _jsx(PlaceholderProvider, { placeholder: placeholder, children: children })] }));
     }
     // Notebook outputs do not need any decoration
-    return _jsx(_Fragment, { children: children });
+    return _jsx("div", { "data-name": "output-decoration-notebook-output", children: children });
 }

package/dist/embed.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"embed.d.ts","sourceRoot":"","sources":["../src/embed.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAI/C,wBAAgB,KAAK,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,2CAcpD"}
+{"version":3,"file":"embed.d.ts","sourceRoot":"","sources":["../src/embed.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAO/C,wBAAgB,KAAK,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,2CA6BpD"}

package/dist/embed.js

@@ -1,10 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { OutputDecoration } from './decoration.js';
 import { MyST } from 'myst-to-react';
+import { OutputsContextProvider } from './providers.js';
 export function Embed({ node }) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g;
     const output = (_a = node.children) === null || _a === void 0 ? void 0 : _a.find((child) => child.type === 'output');
-    if (!output)
-        return _jsx(MyST, { ast: node.children });
-    return (_jsx(OutputDecoration, { outputId: output.id, title: (_b = node.source) === null || _b === void 0 ? void 0 : _b.title, url: (_c = node.source) === null || _c === void 0 ? void 0 : _c.url, remoteBaseUrl: (_d = node.source) === null || _d === void 0 ? void 0 : _d.remoteBaseUrl, children: _jsx(MyST, { ast: node.children }) }, node.key));
+    const outputs = (_b = node.children) === null || _b === void 0 ? void 0 : _b.find((child) => child.type === 'outputs');
+    if (outputs) {
+        return (_jsx(OutputDecoration, { outputId: (_c = outputs.id) !== null && _c !== void 0 ? _c : outputs.key, title: (_d = node.source) === null || _d === void 0 ? void 0 : _d.title, url: (_e = node.source) === null || _e === void 0 ? void 0 : _e.url, remoteBaseUrl: (_f = node.source) === null || _f === void 0 ? void 0 : _f.remoteBaseUrl, children: _jsx(OutputsContextProvider, { outputsId: (_g = outputs.id) !== null && _g !== void 0 ? _g : outputs.key, children: _jsx(MyST, { ast: node.children }) }) }, node.key));
+    }
+    else if (output) {
+        return (_jsx(OutputsContextProvider, { outputsId: output.key, children: _jsx(MyST, { ast: node.children }) }));
+    }
+    return _jsx(MyST, { ast: node.children });
 }

package/dist/execute/utils.js

@@ -38,7 +38,7 @@ export function notebookFromMdast(core, config, pageSlug, notebookSlug, mdast, i
     // no metadata included in mdast yet
     //Object.assign(notebook.metadata, ipynb.metadata);
     notebook.cells = mdast.children.map((block) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         if (block.type !== 'block')
             console.warn(`Unexpected block type ${block.type}`);
         const executableNodes = executableNodesFromBlock(block);
@@ -53,7 +53,7 @@ export function notebookFromMdast(core, config, pageSlug, notebookSlug, mdast, i
                 cellId: block.key,
             };
             idkmap[block.key] = target; // can reference from block in notebook views
-            idkmap[output.id] = target; // can reference from output in article views
+            idkmap[(_a = output.id) !== null && _a !== void 0 ? _a : output.key] = target; // can reference from output in article views
             // include identifiers to enable lookup by (normalized) labels
             if (block.identifier)
                 idkmap[block.identifier] = target;
@@ -61,12 +61,12 @@ export function notebookFromMdast(core, config, pageSlug, notebookSlug, mdast, i
                 idkmap[codeCell.identifier] = target;
             if (output.identifier)
                 idkmap[output.identifier] = target;
-            return new core.ThebeCodeCell(target.cellId, notebook.id, (_a = codeCell.value) !== null && _a !== void 0 ? _a : '', config, (_b = block.data) !== null && _b !== void 0 ? _b : {}, notebook.rendermime);
+            return new core.ThebeCodeCell(target.cellId, notebook.id, (_b = codeCell.value) !== null && _b !== void 0 ? _b : '', config, (_c = block.data) !== null && _c !== void 0 ? _c : {}, notebook.rendermime);
         }
         else {
             // assume content - concatenate it
             // TODO inject cell metadata
-            const cell = new core.ThebeMarkdownCell(block.key, notebook.id, block.children.reduce((acc, child) => { var _a; return acc + '\n' + ((_a = child.value) !== null && _a !== void 0 ? _a : ''); }, ''), (_c = block.data) !== null && _c !== void 0 ? _c : {}, notebook.rendermime);
+            const cell = new core.ThebeMarkdownCell(block.key, notebook.id, block.children.reduce((acc, child) => { var _a; return acc + '\n' + ((_a = child.value) !== null && _a !== void 0 ? _a : ''); }, ''), (_d = block.data) !== null && _d !== void 0 ? _d : {}, notebook.rendermime);
             return cell;
         }
     });

package/dist/figure.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"figure.d.ts","sourceRoot":"","sources":["../src/figure.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAK/C,wBAAgB,MAAM,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,2CA0BrD"}
+{"version":3,"file":"figure.d.ts","sourceRoot":"","sources":["../src/figure.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAQ/C,wBAAgB,MAAM,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,2CAgDrD"}

package/dist/figure.js

@@ -1,17 +1,24 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SourceFileKind } from 'myst-spec-ext';
 import { DEFAULT_RENDERERS, MyST } from 'myst-to-react';
 import classNames from 'classnames';
 import { OutputDecoration } from './decoration.js';
+import { OutputsContextProvider } from './providers.js';
 export function Figure({ node }) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const { base: Container } = DEFAULT_RENDERERS['container'];
     const isFromJupyer = ((_a = node.source) === null || _a === void 0 ? void 0 : _a.kind) === SourceFileKind.Notebook;
     const output = (_b = node.children) === null || _b === void 0 ? void 0 : _b.find((child) => child.type === 'output');
-    if (isFromJupyer && !!output) {
-        const placeholder = (_c = node.children) === null || _c === void 0 ? void 0 : _c.find((child) => child.type === 'image' && child.placeholder);
-        const others = (_d = node.children) === null || _d === void 0 ? void 0 : _d.filter((child) => !(child.type === 'image' && child.placeholder));
-        return (_jsx("figure", { id: node.html_id || node.identifier || node.key, className: classNames('myst-jp-figure', { subcontainer: node.subcontainer }, node.class), children: _jsx(OutputDecoration, { outputId: output.id, placeholder: placeholder, title: (_e = node.source) === null || _e === void 0 ? void 0 : _e.title, url: (_f = node.source) === null || _f === void 0 ? void 0 : _f.url, remoteBaseUrl: (_g = node.source) === null || _g === void 0 ? void 0 : _g.remoteBaseUrl, children: _jsx(MyST, { ast: others }) }, node.key) }));
+    const outputs = (_c = node.children) === null || _c === void 0 ? void 0 : _c.find((child) => child.type === 'outputs');
+    if (isFromJupyer) {
+        if (outputs) {
+            const placeholder = (_d = node.children) === null || _d === void 0 ? void 0 : _d.find((child) => child.type === 'image' && child.placeholder);
+            const others = (_e = node.children) === null || _e === void 0 ? void 0 : _e.filter((child) => !(child.type === 'image' && child.placeholder));
+            return (_jsx("figure", { id: node.html_id || node.identifier || node.key, className: classNames('myst-jp-figure', { subcontainer: node.subcontainer }, node.class), children: _jsx(OutputDecoration, { outputId: (_f = outputs.id) !== null && _f !== void 0 ? _f : outputs.key, placeholder: placeholder, title: (_g = node.source) === null || _g === void 0 ? void 0 : _g.title, url: (_h = node.source) === null || _h === void 0 ? void 0 : _h.url, remoteBaseUrl: (_j = node.source) === null || _j === void 0 ? void 0 : _j.remoteBaseUrl, children: _jsx(OutputsContextProvider, { outputsId: (_k = outputs.id) !== null && _k !== void 0 ? _k : outputs.key, children: _jsx(MyST, { ast: others }) }) }, node.key) }));
+        }
+        else if (output) {
+            return (_jsx("div", { className: "border border-gred-500", children: _jsxs("details", { children: [_jsx("summary", { children: "Legacy Output Embedded" }), _jsx("pre", { children: JSON.stringify(output, null, 2) })] }) }));
+        }
     }
     return _jsx(Container, { node: node });
 }

package/dist/jupyter.d.ts

@@ -1,7 +1,13 @@
 import React from 'react';
 import type { MinifiedOutput } from 'nbtx';
-export declare const JupyterOutputs: React.MemoExoticComponent<({ id, outputs }: {
-    id: string;
-    outputs: MinifiedOutput[];
+/**
+ * Render a single output as a Jupyter output.
+ *
+ * @param id - The id of the cell.
+ * @param output - The output data.
+ */
+export declare const JupyterOutput: React.MemoExoticComponent<({ outputsId, output }: {
+    outputsId: string;
+    output: MinifiedOutput;
 }) => import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=jupyter.d.ts.map

package/dist/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;AA4F3C,eAAO,MAAM,cAAc,8CACP;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,cAAc,EAAE,CAAA;CAAE,6CAwD5D,CAAC"}
+{"version":3,"file":"jupyter.d.ts","sourceRoot":"","sources":["../src/jupyter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,MAAM,CAAC;AAO3C;;;;;GAKG;AACH,eAAO,MAAM,aAAa,oDACA;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,cAAc,CAAA;CAAE,6CAiDtE,CAAC"}

package/dist/jupyter.js

@@ -1,86 +1,47 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useRef, useState } from 'react';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
 import { useFetchAnyTruncatedContent } from './hooks.js';
 import { convertToIOutputs } from 'nbtx';
 import { fetchAndEncodeOutputImages } from './convertImages.js';
 import { SourceFileKind } from 'myst-spec-ext';
-import { useXRefState } from '@myst-theme/providers';
 import { useThebeLoader } from 'thebe-react';
-import { useCellExecution } from './execute/index.js';
-import { usePlaceholder } from './decoration.js';
-import { MyST } from 'myst-to-react';
-import classNames from 'classnames';
-import { usePlotlyPassively } from './plotly.js';
-function ActiveOutputRenderer({ id, initialData, core, }) {
-    var _a;
-    const exec = useCellExecution(id);
-    const placeholder = usePlaceholder();
-    const ref = useRef(null);
-    useEffect(() => {
-        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 ${id}:${(_a = exec === null || exec === void 0 ? void 0 : exec.cell) === null || _a === void 0 ? void 0 : _a.id}`);
-            return;
-        }
-        const verb = exec.cell.isAttachedToDOM ? 'reattaching' : 'attaching';
-        console.debug(`${verb} cell ${exec.cell.id} to DOM at:`, {
-            el: ref.current,
-            connected: ref.current.isConnected,
-            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((_c = core === null || core === void 0 ? void 0 : core.stripWidgets(initialData, true, placeholder ? () => '' : undefined)) !== null && _c !== void 0 ? _c : initialData);
-        }
-    }, [ref === null || ref === void 0 ? void 0 : ref.current, exec === null || exec === void 0 ? void 0 : exec.cell]);
-    const executed = ((_a = exec === null || exec === void 0 ? void 0 : exec.cell) === null || _a === void 0 ? void 0 : _a.executionCount) != null;
-    console.debug(`Jupyter: Cell ${id} executed: ${executed}; Show output: ${executed || !placeholder}`);
-    return (_jsxs("div", { children: [_jsx("div", { ref: ref, "data-thebe-active-ref": "true", className: classNames('relative', { 'invisible h-0': !executed && placeholder }) }), placeholder && !executed && _jsx(MyST, { ast: placeholder })] }));
-}
-function PassiveOutputRenderer({ id, data, core, }) {
-    const rendermime = core.makeRenderMimeRegistry();
-    const cell = useRef(new core.PassiveCellRenderer(id, rendermime, undefined));
-    const ref = useRef(null);
-    const { loaded } = usePlotlyPassively(rendermime, data);
-    useEffect(() => {
-        var _a, _b;
-        if (!ref.current || !loaded)
-            return;
-        // eslint-disable-next-line import/no-extraneous-dependencies
-        cell.current.attachToDOM((_a = ref.current) !== null && _a !== void 0 ? _a : undefined, true);
-        cell.current.render((_b = core === null || core === void 0 ? void 0 : core.stripWidgets(data)) !== null && _b !== void 0 ? _b : data);
-    }, [ref, loaded]);
-    return _jsx("div", { ref: ref, "data-thebe-passive-ref": "true" });
-}
-export const JupyterOutputs = React.memo(({ id, outputs }) => {
+import { PassiveOutputRenderer } from './passive.js';
+/**
+ * Render a single output as a Jupyter output.
+ *
+ * @param id - The id of the cell.
+ * @param output - The output data.
+ */
+export const JupyterOutput = React.memo(({ outputsId, output }) => {
     const { core, load } = useThebeLoader();
-    const { inCrossRef } = useXRefState();
-    const { data, error } = useFetchAnyTruncatedContent(outputs);
-    const [fullOutputs, setFullOutputs] = useState(null);
-    const exec = useCellExecution(id);
-    const placeholder = usePlaceholder();
+    const { data, error } = useFetchAnyTruncatedContent([output]);
+    const [fullOutput, setFullOutput] = useState(null);
     useEffect(() => {
         if (core)
             return;
         load();
     }, [core, load]);
     useEffect(() => {
-        if (!data || fullOutputs != null)
+        if (!data || fullOutput != null)
             return;
         fetchAndEncodeOutputImages(data).then((out) => {
             const compactOutputs = convertToIOutputs(out, {});
-            setFullOutputs(compactOutputs);
+            setFullOutput(compactOutputs[0]);
         });
-    }, [id, data, fullOutputs]);
+    }, [outputsId, data, fullOutput]);
     if (error) {
         console.error(error);
         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: "Fetching full output data..." }), core && fullOutputs && (_jsx(ActiveOutputRenderer, { id: id, initialData: fullOutputs, core: core }, id))] }));
-    }
-    if (placeholder) {
-        return _jsx(MyST, { ast: placeholder });
-    }
-    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 }))] }));
+    // if (!inCrossRef && exec?.ready) {
+    //   return (
+    //     <div>
+    //       {!fullOutputs && <div className="p-2.5">Fetching full output data...</div>}
+    //       {core && fullOutputs && (
+    //         <ActiveOutputRenderer key={id} id={id} initialData={fullOutputs} core={core} />
+    //       )}
+    //     </div>
+    //   );
+    // }
+    return (_jsxs("div", { children: [!fullOutput && _jsx("div", { className: "p-2.5", children: "Loading..." }), fullOutput && core && (_jsx(PassiveOutputRenderer, { id: outputsId, data: fullOutput, core: core, kind: SourceFileKind.Notebook }))] }));
 });

package/dist/output.d.ts

@@ -2,14 +2,7 @@ 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>;
-export declare function allOutputsAreSafe(outputs: MinifiedOutput[], directOutputTypes: Set<string>, directMimeTypes: Set<string>): boolean;
-export declare function JupyterOutput({ outputId, identifier, data, align, className, }: {
-    outputId: string;
-    identifier?: string;
-    data: MinifiedOutput[];
-    align?: 'left' | 'center' | 'right';
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+export declare function isOutputSafe(output: MinifiedOutput, directOutputTypes: Set<string>, directMimeTypes: Set<string>): boolean;
 export declare function Output({ node }: {
     node: GenericNode;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/output.d.ts.map

@@ -1 +1 @@
-{"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;AAS/D,eAAO,MAAM,mBAAmB,aAA+B,CAAC;AAEhE,eAAO,MAAM,iBAAiB,EAMxB,GAAG,CAAC,MAAM,CAAC,CAAC;AAElB,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,cAAc,EAAE,EACzB,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,EAC9B,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,WAa7B;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,UAAU,EACV,IAAI,EACJ,KAAK,EACL,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAuCA;AAED,wBAAgB,MAAM,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,2CAcrD"}
+{"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,EAMxB,GAAG,CAAC,MAAM,CAAC,CAAC;AAElB,wBAAgB,YAAY,CAC1B,MAAM,EAAE,cAAc,EACtB,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,EAC9B,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,WAU7B;AAED,wBAAgB,MAAM,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,2CAYrD"}

package/dist/output.js

@@ -1,12 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { KnownCellOutputMimeTypes } from 'nbtx';
-import classNames from 'classnames';
-import { SafeOutputs } from './safe.js';
-import { JupyterOutputs } from './jupyter.js';
+import { SafeOutput } from './safe.js';
+import { JupyterOutput } from './jupyter.js';
 import { useMemo } from 'react';
 import { useCellExecution } from './execute/index.js';
-import { usePlaceholder } from './decoration.js';
-import { Details, MyST } from 'myst-to-react';
+import { useOutputsContext } from './providers.js';
 export const DIRECT_OUTPUT_TYPES = new Set(['stream', 'error']);
 export const DIRECT_MIME_TYPES = new Set([
     KnownCellOutputMimeTypes.TextPlain,
@@ -15,48 +13,24 @@ export const DIRECT_MIME_TYPES = new Set([
     KnownCellOutputMimeTypes.ImageJpeg,
     KnownCellOutputMimeTypes.ImageBmp,
 ]);
-export function allOutputsAreSafe(outputs, directOutputTypes, directMimeTypes) {
-    if (!outputs || outputs.length === 0)
+export function isOutputSafe(output, directOutputTypes, directMimeTypes) {
+    if (directOutputTypes.has(output.output_type))
         return true;
-    return outputs.reduce((flag, output) => {
-        if (directOutputTypes.has(output.output_type))
-            return flag && true;
-        const data = output.data;
-        const mimetypes = data ? Object.keys(data) : [];
-        const safe = 'data' in output &&
-            Boolean(output.data) &&
-            mimetypes.every((mimetype) => directMimeTypes.has(mimetype));
-        return flag && safe;
-    }, true);
-}
-export function JupyterOutput({ outputId, identifier, data, align, className, }) {
-    const { ready } = useCellExecution(outputId);
-    const outputs = data;
-    const allSafe = useMemo(() => allOutputsAreSafe(outputs, DIRECT_OUTPUT_TYPES, DIRECT_MIME_TYPES), [outputs]);
-    const placeholder = usePlaceholder();
-    let component;
-    if (allSafe && !ready) {
-        if (placeholder && (!outputs || outputs.length === 0)) {
-            if (placeholder) {
-                return _jsx(MyST, { ast: placeholder });
-            }
-        }
-        component = _jsx(SafeOutputs, { keyStub: outputId, outputs: outputs });
-    }
-    else {
-        component = _jsx(JupyterOutputs, { id: outputId, outputs: outputs });
-    }
-    return (_jsx("div", { id: identifier || undefined, "data-mdast-node-id": outputId, className: classNames('myst-jp-output max-w-full overflow-y-visible overflow-x-auto m-0 group not-prose relative', {
-            'text-left': !align || align === 'left',
-            'text-center': align === 'center',
-            'text-right': align === 'right',
-            'mb-5': outputs && outputs.length > 0,
-        }, className), children: component }));
+    const data = output.data;
+    const mimetypes = data ? Object.keys(data) : [];
+    return ('data' in output &&
+        Boolean(output.data) &&
+        mimetypes.every((mimetype) => directMimeTypes.has(mimetype)));
 }
 export function Output({ node }) {
-    const output = (_jsx(JupyterOutput, { className: classNames({ hidden: node.visibility === 'remove' }), outputId: node.id, identifier: node.identifier, align: node.align, data: node.data }));
-    if (node.visibility === 'hide') {
-        return _jsx(Details, { title: "Output", children: output });
+    const { outputsId } = useOutputsContext();
+    const { ready } = useCellExecution(outputsId);
+    // FUTURE: we'll be rendering AST outputs directly in future
+    const maybeSafeOutput = useMemo(() => node.jupyter_data, [node]);
+    const isSafe = isOutputSafe(maybeSafeOutput, DIRECT_OUTPUT_TYPES, DIRECT_MIME_TYPES);
+    if (isSafe && !ready) {
+        return _jsx(SafeOutput, { output: maybeSafeOutput });
     }
-    return output;
+    // TODO: myst-jp-output should be added to the first child div
+    return _jsx(JupyterOutput, { outputsId: outputsId, output: maybeSafeOutput });
 }

package/dist/output.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=output.spec.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"output.spec.d.ts","sourceRoot":"","sources":["../src/output.spec.ts"],"names":[],"mappings":""}

package/dist/output.spec.js

@@ -0,0 +1,133 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { describe, it, expect } from 'vitest';
+import { isOutputSafe, DIRECT_OUTPUT_TYPES, DIRECT_MIME_TYPES } from './output.js';
+import { KnownCellOutputMimeTypes } from 'nbtx';
+describe('Output Safety Functions', () => {
+    describe('isOutputSafe', () => {
+        it('should return true for direct output types', () => {
+            const output = {
+                output_type: 'stream',
+                name: 'stdout',
+                text: 'some output',
+            };
+            expect(isOutputSafe(output, DIRECT_OUTPUT_TYPES, DIRECT_MIME_TYPES)).toBe(true);
+        });
+        it('should return true for safe mime types', () => {
+            const output = {
+                output_type: 'display_data',
+                data: {
+                    [KnownCellOutputMimeTypes.TextPlain]: {
+                        content_type: 'text/plain',
+                        content: 'some text',
+                    },
+                    [KnownCellOutputMimeTypes.ImagePng]: {
+                        content_type: 'image/png',
+                        content: 'base64data',
+                    },
+                },
+                metadata: {},
+            };
+            expect(isOutputSafe(output, DIRECT_OUTPUT_TYPES, DIRECT_MIME_TYPES)).toBe(true);
+        });
+        it('should return false for unsafe mime types', () => {
+            const output = {
+                output_type: 'display_data',
+                data: {
+                    'application/javascript': {
+                        content_type: 'application/javascript',
+                        content: 'alert("unsafe")',
+                    },
+                },
+                metadata: {},
+            };
+            expect(isOutputSafe(output, DIRECT_OUTPUT_TYPES, DIRECT_MIME_TYPES)).toBe(false);
+        });
+        it('should return false for output without data', () => {
+            // technically malformed input, but we'll handle it gracefully
+            const output = {
+                output_type: 'display_data',
+                metadata: {},
+            };
+            expect(isOutputSafe(output, DIRECT_OUTPUT_TYPES, DIRECT_MIME_TYPES)).toBe(false);
+        });
+    });
+    // describe('allOutputsAreSafe', () => {
+    //   it('should return true for empty outputs', () => {
+    //     expect(allOutputsAreSafe([], DIRECT_OUTPUT_TYPES, DIRECT_MIME_TYPES)).toBe(true);
+    //   });
+    //   it('should return true when all outputs are safe', () => {
+    //     const outputs: MinifiedOutput[] = [
+    //       {
+    //         output_type: 'stream',
+    //         name: 'stdout',
+    //         text: 'some output',
+    //       },
+    //       {
+    //         output_type: 'display_data',
+    //         data: {
+    //           [KnownCellOutputMimeTypes.TextPlain]: {
+    //             content_type: 'text/plain',
+    //             content: 'text',
+    //           },
+    //           [KnownCellOutputMimeTypes.ImagePng]: {
+    //             content_type: 'image/png',
+    //             content: 'data',
+    //           },
+    //         },
+    //         metadata: {},
+    //       },
+    //     ];
+    //     expect(allOutputsAreSafe(outputs, DIRECT_OUTPUT_TYPES, DIRECT_MIME_TYPES)).toBe(true);
+    //   });
+    //   it('should return false when any output is unsafe', () => {
+    //     const outputs: MinifiedOutput[] = [
+    //       {
+    //         output_type: 'stream',
+    //         name: 'stdout',
+    //         text: 'some output',
+    //       },
+    //       {
+    //         output_type: 'display_data',
+    //         data: {
+    //           'application/javascript': {
+    //             content_type: 'application/javascript',
+    //             content: 'alert("unsafe")',
+    //           },
+    //         },
+    //         metadata: {},
+    //       },
+    //     ];
+    //     expect(allOutputsAreSafe(outputs, DIRECT_OUTPUT_TYPES, DIRECT_MIME_TYPES)).toBe(false);
+    //   });
+    //   it('should handle mixed safe and unsafe outputs', () => {
+    //     const outputs: MinifiedOutput[] = [
+    //       {
+    //         output_type: 'stream',
+    //         name: 'stdout',
+    //         text: 'some output',
+    //       },
+    //       {
+    //         output_type: 'display_data',
+    //         data: {
+    //           [KnownCellOutputMimeTypes.TextPlain]: {
+    //             content_type: 'text/plain',
+    //             content: 'text',
+    //           },
+    //         },
+    //         metadata: {},
+    //       },
+    //       {
+    //         output_type: 'display_data',
+    //         data: {
+    //           'application/javascript': {
+    //             content_type: 'application/javascript',
+    //             content: 'alert("unsafe")',
+    //           },
+    //         },
+    //         metadata: {},
+    //       },
+    //     ];
+    //     expect(allOutputsAreSafe(outputs, DIRECT_OUTPUT_TYPES, DIRECT_MIME_TYPES)).toBe(false);
+    //   });
+    // });
+});

package/dist/outputs.d.ts

@@ -0,0 +1,5 @@
+import type { GenericNode } from 'myst-common';
+export declare function Outputs({ node }: {
+    node: GenericNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=outputs.d.ts.map

package/dist/outputs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"outputs.d.ts","sourceRoot":"","sources":["../src/outputs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAU/C,wBAAgB,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,2CAoDtD"}

package/dist/outputs.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { useMemo } from 'react';
+import { useCellExecution } from './execute/index.js';
+import { usePlaceholder } from './decoration.js';
+import { Details, MyST } from 'myst-to-react';
+import { selectAll } from 'unist-util-select';
+import { OutputsContextProvider } from './providers.js';
+import { ActiveJupyterCellOutputs } from './active.js';
+export function Outputs({ node }) {
+    var _a;
+    const className = classNames({ hidden: node.visibility === 'remove' });
+    const { children, identifier, align } = node;
+    const outputsId = (_a = node.id) !== null && _a !== void 0 ? _a : node.key;
+    const cellExecutionContext = useCellExecution(outputsId);
+    const { ready } = cellExecutionContext;
+    const legacyOutputsArray = useMemo(() => {
+        return selectAll('output', node).map((child) => child.jupyter_data);
+    }, [children]);
+    const atLeastOneChildHasJupyterData = legacyOutputsArray.length > 0;
+    // NOTE: a placeholder is actually an option on the figure node, not the outputs node
+    // perhaps we should move the placeholder to the figure renderer?
+    const placeholder = usePlaceholder();
+    if (!ready && placeholder) {
+        return _jsx(MyST, { ast: placeholder });
+    }
+    // if not ready, we leave each output to independently render
+    // NOTE: we need to see that bokeh & plotly can render ok in this way
+    if (!ready) {
+        const passiveOutputs = (_jsx("div", { "data-name": "outputs-container", id: identifier || undefined, "data-mdast-node-id": outputsId, className: classNames('max-w-full overflow-y-visible overflow-x-auto m-0 group not-prose relative', {
+                'text-left': !align || align === 'left',
+                'text-center': align === 'center',
+                'text-right': align === 'right',
+                'mb-5': atLeastOneChildHasJupyterData,
+            }, className), children: _jsx(OutputsContextProvider, { outputsId: outputsId, children: _jsx(MyST, { ast: children }) }) }));
+        if (node.visibility === 'hide') {
+            return _jsx(Details, { title: "Output", children: passiveOutputs });
+        }
+        return passiveOutputs;
+    }
+    // else compute is ready, and we need to treat the whole cell output as one unit
+    return _jsx(ActiveJupyterCellOutputs, { outputsId: outputsId, outputs: legacyOutputsArray });
+}

package/dist/passive.d.ts

@@ -0,0 +1,20 @@
+import type { IOutput } from '@jupyterlab/nbformat';
+import type { ThebeCore } from 'thebe-core';
+import type { SourceFileKind } from 'myst-spec-ext';
+/**
+ * Render a single output as a passive cell output.
+ *
+ * This is used for outputs that require jupyters rendermime support, such as Plotly.
+ *
+ * @param id - The id of the cell.
+ * @param data - The output data.
+ * @param core - The Thebe core.
+ * @param kind - The kind of source file.
+ */
+export declare function PassiveOutputRenderer({ id, data, core, }: {
+    id: string;
+    data: IOutput;
+    core: ThebeCore;
+    kind: SourceFileKind;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=passive.d.ts.map

package/dist/passive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"passive.d.ts","sourceRoot":"","sources":["../src/passive.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAGpD;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,EAAE,EACF,IAAI,EACJ,IAAI,GACL,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE,cAAc,CAAC;CACtB,2CAgBA"}

package/dist/passive.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { usePlotlyPassively } from './plotly.js';
+/**
+ * Render a single output as a passive cell output.
+ *
+ * This is used for outputs that require jupyters rendermime support, such as Plotly.
+ *
+ * @param id - The id of the cell.
+ * @param data - The output data.
+ * @param core - The Thebe core.
+ * @param kind - The kind of source file.
+ */
+export function PassiveOutputRenderer({ id, data, core, }) {
+    const rendermime = core.makeRenderMimeRegistry();
+    const cell = useRef(new core.PassiveCellRenderer(id, rendermime, undefined));
+    const ref = useRef(null);
+    const { loaded } = usePlotlyPassively(rendermime, [data]);
+    useEffect(() => {
+        var _a, _b;
+        if (!ref.current || !loaded)
+            return;
+        // eslint-disable-next-line import/no-extraneous-dependencies
+        cell.current.attachToDOM((_a = ref.current) !== null && _a !== void 0 ? _a : undefined, true);
+        cell.current.render((_b = core === null || core === void 0 ? void 0 : core.stripWidgets([data])) !== null && _b !== void 0 ? _b : data);
+    }, [ref, loaded]);
+    return _jsx("div", { ref: ref, "data-thebe-passive-ref": "true", "data-output-id": id });
+}

package/dist/providers.d.ts

@@ -3,6 +3,7 @@ import React from 'react';
 import { type ExtendedCoreOptions } from './utils.js';
 import type { GenericParent } from 'myst-common';
 import type { RepoProviderSpec } from 'thebe-core';
+import type { IdOrKey } from './execute/types.js';
 type ComputeOptionsContextType = {
     enabled: boolean;
     features: {
@@ -41,5 +42,13 @@ export declare function ThebeLoaderAndServer({ baseurl, connect, children, }: Re
     connect?: boolean;
     baseurl?: string;
 }>): import("react/jsx-runtime").JSX.Element;
+type OutputsContextType = {
+    outputsId: IdOrKey;
+};
+export declare function useOutputsContext(): OutputsContextType;
+export declare function OutputsContextProvider({ outputsId, children, }: {
+    children: React.ReactNode;
+    outputsId: IdOrKey;
+}): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=providers.d.ts.map

package/dist/providers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"providers.d.ts","sourceRoot":"","sources":["../src/providers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,KAAK,mBAAmB,EAA6B,MAAM,YAAY,CAAC;AACjF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAGnD,KAAK,yBAAyB,GAAG;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE;QACR,eAAe,EAAE,OAAO,CAAC;QACzB,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;KACvB,CAAC;IACF,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,mBAAmB,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAC1C,CAAC;AAIF,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,gBAAgB,EAChB,mBAAmB,EACnB,QAAQ,GACT,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACzB,QAAQ,EAAE;QACR,eAAe,EAAE,OAAO,CAAC;QACzB,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;KACvB,CAAC;IACF,gBAAgB,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,mBAAmB,KAAK,mBAAmB,GAAG,SAAS,CAAC;IACnF,mBAAmB,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAC1C,CAAC,2CA2BD;AAED,wBAAgB,aAAa,wBAG5B;AAED,wBAAgB,iBAAiB,0CAEhC;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,cAAc,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,OAAO,EACP,QAAQ,GACT,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,2CAkBlE"}
+{"version":3,"file":"providers.d.ts","sourceRoot":"","sources":["../src/providers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,KAAK,mBAAmB,EAA6B,MAAM,YAAY,CAAC;AACjF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAElD,KAAK,yBAAyB,GAAG;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE;QACR,eAAe,EAAE,OAAO,CAAC;QACzB,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;KACvB,CAAC;IACF,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,mBAAmB,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAC1C,CAAC;AAIF,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,gBAAgB,EAChB,mBAAmB,EACnB,QAAQ,GACT,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACzB,QAAQ,EAAE;QACR,eAAe,EAAE,OAAO,CAAC;QACzB,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;KACvB,CAAC;IACF,gBAAgB,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,mBAAmB,KAAK,mBAAmB,GAAG,SAAS,CAAC;IACnF,mBAAmB,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAC1C,CAAC,2CA2BD;AAED,wBAAgB,aAAa,wBAG5B;AAED,wBAAgB,iBAAiB,0CAEhC;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,cAAc,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,OAAO,EACP,QAAQ,GACT,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,2CAkBlE;AAED,KAAK,kBAAkB,GAAG;IACxB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAGF,wBAAgB,iBAAiB,uBAMhC;AACD,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;CACpB,2CAEA"}

package/dist/providers.js

@@ -44,3 +44,14 @@ export function ThebeLoaderAndServer({ baseurl, connect, children, }) {
     const compute = useComputeOptions();
     return (_jsx(ThebeBundleLoaderProvider, { loadThebeLite: (_b = (_a = compute === null || compute === void 0 ? void 0 : compute.thebe) === null || _a === void 0 ? void 0 : _a.useJupyterLite) !== null && _b !== void 0 ? _b : false, publicPath: baseurl, children: _jsx(ThebeServerProvider, { connect: connect !== null && connect !== void 0 ? connect : false, options: compute === null || compute === void 0 ? void 0 : compute.thebe, useBinder: (_d = (_c = compute === null || compute === void 0 ? void 0 : compute.thebe) === null || _c === void 0 ? void 0 : _c.useBinder) !== null && _d !== void 0 ? _d : false, useJupyterLite: (_f = (_e = compute === null || compute === void 0 ? void 0 : compute.thebe) === null || _e === void 0 ? void 0 : _e.useJupyterLite) !== null && _f !== void 0 ? _f : false, customRepoProviders: (_g = compute === null || compute === void 0 ? void 0 : compute.customRepoProviders) !== null && _g !== void 0 ? _g : [], children: children }) }));
 }
+const OutputsContext = React.createContext(null);
+export function useOutputsContext() {
+    const context = useContext(OutputsContext);
+    if (context === null) {
+        throw new Error('useOutputsContext must be used within a OutputsContextProvider');
+    }
+    return context;
+}
+export function OutputsContextProvider({ outputsId, children, }) {
+    return _jsx(OutputsContext.Provider, { value: { outputsId }, children: children });
+}

package/dist/renderers.d.ts

@@ -1,8 +1,10 @@
 import { Embed } from './embed.js';
+import { Outputs } from './outputs.js';
 import { Output } from './output.js';
 import { Figure } from './figure.js';
 export { NOTEBOOK_BLOCK_RENDERERS } from './block.js';
 export declare const OUTPUT_RENDERERS: {
+    outputs: typeof Outputs;
     output: typeof Output;
     embed: typeof Embed;
     container: typeof Figure;

package/dist/renderers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderers.d.ts","sourceRoot":"","sources":["../src/renderers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAIrC,OAAO,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;AACtD,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAC;AACF,eAAO,MAAM,iBAAiB,+CAA+D,CAAC"}
+{"version":3,"file":"renderers.d.ts","sourceRoot":"","sources":["../src/renderers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAIrC,OAAO,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;AACtD,eAAO,MAAM,gBAAgB;;;;;CAK5B,CAAC;AACF,eAAO,MAAM,iBAAiB,+CAA+D,CAAC"}

package/dist/renderers.js

@@ -1,10 +1,12 @@
 import { Embed } from './embed.js';
+import { Outputs } from './outputs.js';
 import { Output } from './output.js';
 import { Figure } from './figure.js';
 import { mergeRenderers } from '@myst-theme/providers';
 import { NOTEBOOK_BLOCK_RENDERERS } from './block.js';
 export { NOTEBOOK_BLOCK_RENDERERS } from './block.js';
 export const OUTPUT_RENDERERS = {
+    outputs: Outputs,
     output: Output,
     embed: Embed,
     container: Figure,

package/dist/safe.d.ts

@@ -1,6 +1,5 @@
 import type { MinifiedOutput } from 'nbtx';
-export declare function SafeOutputs({ keyStub, outputs }: {
-    keyStub: string;
-    outputs: MinifiedOutput[];
+export declare function SafeOutput({ output }: {
+    output: MinifiedOutput;
 }): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=safe.d.ts.map

package/dist/safe.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"safe.d.ts","sourceRoot":"","sources":["../src/safe.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA2C,cAAc,EAAE,MAAM,MAAM,CAAC;AAwEpF,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,cAAc,EAAE,CAAA;CAAE,kDAO/F"}
+{"version":3,"file":"safe.d.ts","sourceRoot":"","sources":["../src/safe.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA2C,cAAc,EAAE,MAAM,MAAM,CAAC;AA8CpF,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,cAAc,CAAA;CAAE,kDAwChE"}

package/dist/safe.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { KnownCellOutputMimeTypes } from 'nbtx';
 import Stream from './stream.js';
 import Error from './error.js';
@@ -40,12 +40,12 @@ function OutputImage({ image, text }) {
     var _a;
     return _jsx("img", { src: image === null || image === void 0 ? void 0 : image.path, alt: (_a = text === null || text === void 0 ? void 0 : text.content) !== null && _a !== void 0 ? _a : 'Image produced in Jupyter' });
 }
-function SafeOutput({ output }) {
+export function SafeOutput({ output }) {
     switch (output.output_type) {
         case 'stream':
-            return _jsx(Stream, { output: output });
+            return (_jsx("div", { "data-name": "safe-output-stream", children: _jsx(Stream, { output: output }) }));
         case 'error':
-            return _jsx(Error, { output: output });
+            return (_jsx("div", { "data-name": "safe-output-error", children: _jsx(Error, { output: output }) }));
         case 'display_data':
         case 'execute_result':
         case 'update_display_data': {
@@ -53,9 +53,9 @@ function SafeOutput({ output }) {
             if (!image && !text)
                 return null;
             if (image)
-                return _jsx(OutputImage, { image: image, text: text });
+                return (_jsx("div", { "data-name": "safe-output-image", children: _jsx(OutputImage, { image: image, text: text }) }));
             if (text)
-                return (_jsx("div", { className: "myst-jp-safe-output-text font-mono text-sm whitespace-pre-wrap", children: _jsx(Ansi, { children: text.content }) }));
+                return (_jsx("div", { "data-name": "safe-output-text", className: "font-mono text-sm whitespace-pre-wrap myst-jp-safe-output-text", children: _jsx(Ansi, { children: text.content }) }));
             return null;
         }
         default:
@@ -63,10 +63,3 @@ function SafeOutput({ output }) {
             return null;
     }
 }
-export function SafeOutputs({ keyStub, outputs }) {
-    if (!outputs)
-        return null;
-    // TODO better key - add keys during content creation?
-    const components = outputs.map((output, idx) => (_jsx(SafeOutput, { output: output }, `${keyStub}-${idx}`)));
-    return _jsx(_Fragment, { children: components });
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/jupyter",
-  "version": "0.18.0",
+  "version": "1.0.0",
   "type": "module",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -25,7 +25,7 @@
     "@curvenote/ansi-to-react": "^7.0.0",
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
-    "@myst-theme/providers": "^0.18.0",
+    "@myst-theme/providers": "^1.0.0",
     "@scienceicons/react": "^0.0.13",
     "buffer": "^6.0.3",
     "classnames": "^2.5.1",
@@ -35,7 +35,7 @@
     "myst-frontmatter": "^1.7.9",
     "myst-spec": "^0.0.5",
     "myst-spec-ext": "^1.8.1",
-    "myst-to-react": "^0.18.0",
+    "myst-to-react": "^1.0.0",
     "nanoid": "^4.0.2",
     "nbtx": "^0.2.3",
     "react-syntax-highlighter": "^15.5.0",
@@ -45,6 +45,11 @@
     "thebe-react": "0.5.0",
     "unist-util-select": "^4.0.3"
   },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "vitest": "^1.0.0"
+  },
   "peerDependencies": {
     "@types/react": "^16.8 || ^17.0 || ^18.0",
     "@types/react-dom": "^16.8 || ^17.0 || ^18.0",