@myst-theme/jupyter 0.17.1 → 1.0.0

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('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: "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/dist/stream.js

@@ -3,5 +3,5 @@ import Ansi from '@curvenote/ansi-to-react';
 import { ensureString } from 'nbtx';
 import { MaybeLongContent } from './components.js';
 export default function Stream({ output }) {
-    return (_jsx(MaybeLongContent, { content: ensureString(output.text), path: output.path, render: (content) => (_jsx("pre", { className: "text-sm font-thin font-system", children: _jsx(Ansi, { children: content !== null && content !== void 0 ? content : '' }) })) }));
+    return (_jsx(MaybeLongContent, { content: ensureString(output.text), path: output.path, render: (content) => (_jsx("pre", { className: "myst-jp-stream-output text-sm font-thin font-system", children: _jsx(Ansi, { children: content !== null && content !== void 0 ? content : '' }) })) }));
 }