@myst-theme/jupyter 0.0.1 → 0.0.3

package/dist/cjs/ClientOnly.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+export default function ClientOnly({ children }: {
+    children: ReactNode;
+}): JSX.Element | null;
+//# sourceMappingURL=ClientOnly.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClientOnly.d.ts","sourceRoot":"","sources":["../../src/ClientOnly.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,sBAMvE"}

package/dist/cjs/ClientOnly.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+function ClientOnly({ children }) {
+    const [mounted, setMounted] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setMounted(true);
+    }, []);
+    return mounted ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }) : null;
+}
+exports.default = ClientOnly;

package/dist/cjs/convertImages.d.ts

@@ -0,0 +1,3 @@
+import type { MinifiedOutput } from 'nbtx';
+export declare function fetchAndEncodeOutputImages(outputs: MinifiedOutput[]): Promise<MinifiedOutput[]>;
+//# sourceMappingURL=convertImages.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"convertImages.d.ts","sourceRoot":"","sources":["../../src/convertImages.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAsB,cAAc,EAAE,MAAM,MAAM,CAAC;AA6B/D,wBAAsB,0BAA0B,CAC9C,OAAO,EAAE,cAAc,EAAE,GACxB,OAAO,CAAC,cAAc,EAAE,CAAC,CAmC3B"}

package/dist/cjs/convertImages.js

@@ -0,0 +1,70 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fetchAndEncodeOutputImages = void 0;
+function requestImageAsBase64String(src) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const img = new Image();
+        img.crossOrigin = 'Anonymous';
+        const base64String = new Promise((resolve, reject) => {
+            img.onload = function ol() {
+                const canvas = document.createElement('canvas');
+                const ctx = canvas.getContext('2d');
+                if (!ctx) {
+                    // eslint-disable-next-line no-console
+                    console.error('Could not get canvas context');
+                    return reject();
+                }
+                canvas.height = img.naturalHeight;
+                canvas.width = img.naturalWidth;
+                ctx.drawImage(img, 0, 0);
+                const dataURL = canvas.toDataURL('image/png');
+                const [, base64] = dataURL.split(';base64,');
+                resolve(base64);
+            };
+            // trigger the load
+            img.src = src;
+        });
+        return base64String;
+    });
+}
+function fetchAndEncodeOutputImages(outputs) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return Promise.all(outputs.map((output) => __awaiter(this, void 0, void 0, function* () {
+            if (!('data' in output))
+                return output;
+            const imageMimetypes = Object.keys(output.data).filter((mimetype) => mimetype !== 'image/svg' && mimetype.startsWith('image/'));
+            if (imageMimetypes.length === 0)
+                return output;
+            // this is an async fetch, so we need to await the result
+            const images = yield Promise.all(imageMimetypes.map((mimetype) => __awaiter(this, void 0, void 0, function* () {
+                /*
+                  image/* types can be either raw svg, base64 encoded or a URL.
+                  base64 encoded images can include data:image/*;base64, or be naked
+                  svgs can also be base64 encoded, or plain '<svg ...></svg>'.
+                  URLs can be relative or absolute
+                */
+                const data = output.data[mimetype];
+                if (data.path) {
+                    const base64 = yield requestImageAsBase64String(data.path);
+                    return Object.assign(Object.assign({}, data), { content: base64 });
+                }
+                return data;
+            })));
+            imageMimetypes.forEach((mimetype, i) => {
+                // eslint-disable-next-line no-param-reassign
+                output.data[mimetype] = images[i];
+            });
+            return output;
+        })));
+    });
+}
+exports.fetchAndEncodeOutputImages = fetchAndEncodeOutputImages;

package/dist/cjs/error.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { MinifiedErrorOutput } from '@curvenote/nbtx';
+import type { MinifiedErrorOutput } from 'nbtx';
 export default function Error({ output }: {
     output: MinifiedErrorOutput;
 }): JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"error.d.ts","sourceRoot":"","sources":["../../src/error.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAG3D,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,mBAAmB,CAAA;CAAE,eAcxE"}
+{"version":3,"file":"error.d.ts","sourceRoot":"","sources":["../../src/error.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,MAAM,CAAC;AAGhD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,mBAAmB,CAAA;CAAE,eAcxE"}

package/dist/cjs/error.js

@@ -5,10 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ansi_to_react_1 = __importDefault(require("ansi-to-react"));
-const blocks_1 = require("@curvenote/blocks");
+const nbtx_1 = require("nbtx");
 const components_1 = require("./components");
 function Error({ output }) {
-    return ((0, jsx_runtime_1.jsx)(components_1.MaybeLongContent, { content: (0, blocks_1.ensureString)(output.traceback), path: output.path, render: (content) => {
+    return ((0, jsx_runtime_1.jsx)(components_1.MaybeLongContent, { content: (0, nbtx_1.ensureString)(output.traceback), path: output.path, render: (content) => {
             return ((0, jsx_runtime_1.jsx)("pre", Object.assign({ className: "text-sm font-thin font-system jupyter-error" }, { children: (0, jsx_runtime_1.jsx)(ansi_to_react_1.default, { children: content !== null && content !== void 0 ? content : '' }) })));
         } }));
 }

package/dist/cjs/hooks.d.ts

@@ -1,4 +1,4 @@
-import type { MinifiedOutput } from '@curvenote/nbtx/dist/minify/types';
+import type { MinifiedOutput } from 'nbtx';
 /**
  * Truncation vs Summarization
  *
@@ -25,39 +25,8 @@ export declare function useLongContent(content?: string, url?: string): {
     error?: Error;
 };
 export declare function useFetchAnyTruncatedContent(outputs: MinifiedOutput[]): {
-    data: ({
-        data: {};
-        path?: string | undefined;
-        traceback: string & string[];
-        output_type: "error";
-        ename: string;
-        evalue: string;
-    } | {
-        data: {};
-        path?: string | undefined;
-        output_type: "stream";
-        name: import("@jupyterlab/nbformat").StreamType;
-        text: import("@jupyterlab/nbformat").MultilineString;
-    } | {
-        data: {};
-        output_type: import("@curvenote/nbtx/dist/minify/types").MimeOutputType;
-        execution_count?: import("@jupyterlab/nbformat").ExecutionCount | undefined;
-        metadata: import("@lumino/coreutils").PartialJSONObject;
-    } | {
-        [x: string]: import("@lumino/coreutils").PartialJSONValue | undefined;
-        path?: string | undefined;
-        traceback: string & string[];
-        output_type: "error";
-        ename: string;
-        evalue: string;
-    } | {
-        [x: string]: import("@lumino/coreutils").PartialJSONValue | undefined;
-        path?: string | undefined;
-        output_type: "stream";
-        name: import("@jupyterlab/nbformat").StreamType;
-        text: import("@jupyterlab/nbformat").MultilineString;
-    })[] | undefined;
-    error: any;
+    data: MinifiedOutput[] | undefined;
+    error: any | undefined;
 };
 export default function useWindowSize(): {
     width: number;

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

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/hooks.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAIV,cAAc,EAEf,MAAM,mCAAmC,CAAC;AAI3C;;;;;;;;;;;;;;;;GAgBG;AAEH,UAAU,WAAW;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;CACjB;AAQD,wBAAgB,cAAc,CAC5B,OAAO,CAAC,EAAE,MAAM,EAChB,GAAG,CAAC,EAAE,MAAM,GACX;IAAE,IAAI,CAAC,EAAE,WAAW,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAQvC;AAuBD,wBAAgB,2BAA2B,CAAC,OAAO,EAAE,cAAc,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BpE;AAUD,MAAM,CAAC,OAAO,UAAU,aAAa;;;EAapC"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/hooks.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAIV,cAAc,EAEf,MAAM,MAAM,CAAC;AAId;;;;;;;;;;;;;;;;GAgBG;AAEH,UAAU,WAAW;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;CACjB;AA0BD,wBAAgB,cAAc,CAC5B,OAAO,CAAC,EAAE,MAAM,EAChB,GAAG,CAAC,EAAE,MAAM,GACX;IAAE,IAAI,CAAC,EAAE,WAAW,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAQvC;AAuBD,wBAAgB,2BAA2B,CAAC,OAAO,EAAE,cAAc,EAAE,GAAG;IACtE,IAAI,EAAE,cAAc,EAAE,GAAG,SAAS,CAAC;IACnC,KAAK,EAAE,GAAG,GAAG,SAAS,CAAC;CACxB,CAqCA;AAUD,MAAM,CAAC,OAAO,UAAU,aAAa;;;EAapC"}

package/dist/cjs/hooks.js

@@ -1,17 +1,47 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFetchAnyTruncatedContent = exports.useLongContent = void 0;
 const immutable_1 = __importDefault(require("swr/immutable"));
-const utils_1 = require("@curvenote/nbtx/dist/minify/utils");
+const nbtx_1 = require("nbtx");
 const react_1 = require("react");
-const fetcher = (...args) => fetch(...args).then((res) => {
-    if (res.status === 200)
-        return res.json();
-    throw new Error(`Content returned with status ${res.status}.`);
-});
+function fetcher(url) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const resp = yield fetch(url);
+        if (resp.status === 200) {
+            const content = yield resp.text();
+            if (url.endsWith('.json')) {
+                // This is for backward compatibility, previously we saved as:
+                // { content: string, content_type: string }
+                // This is now directly saved as the content (e.g. an image, json, html, text, etc.)
+                try {
+                    const data = JSON.parse(content);
+                    const keys = Object.keys(data);
+                    if (keys.length === 2 && keys.includes('content') && keys.includes('content_type')) {
+                        return data;
+                    }
+                    // pass
+                }
+                catch (error) {
+                    // pass
+                }
+            }
+            return { content };
+        }
+        throw new Error(`Content returned with status ${resp.status}.`);
+    });
+}
 function useLongContent(content, url) {
     if (typeof document === 'undefined') {
         // This is ONLY called on the server
@@ -40,22 +70,29 @@ function shallowCloneOutputs(outputs) {
 function useFetchAnyTruncatedContent(outputs) {
     const itemsWithPaths = [];
     const updated = shallowCloneOutputs(outputs);
-    (0, utils_1.walkPaths)(updated, (path, obj) => {
+    (0, nbtx_1.walkOutputs)(updated, (obj) => {
         // images have paths, but we don't need to fetch them
         if ('content_type' in obj && obj.content_type.startsWith('image/'))
             return;
-        obj.path = path;
-        itemsWithPaths.push(obj);
+        if (obj.path) {
+            itemsWithPaths.push(obj);
+        }
     });
     const { data, error } = (0, immutable_1.default)(itemsWithPaths.map(({ path }) => path), arrayFetcher);
     data === null || data === void 0 ? void 0 : data.forEach(({ content }, idx) => {
         const obj = itemsWithPaths[idx];
-        if ('text' in obj)
-            obj.text = content; // stream
-        if ('traceback' in obj)
-            obj.traceback = content; // error
-        if ('content' in obj)
-            obj.content = content; // mimeoutput
+        if ('text' in obj) {
+            // stream
+            obj.text = content;
+        }
+        else if ('traceback' in obj) {
+            // error
+            obj.traceback = content;
+        }
+        else {
+            // mimeoutput
+            obj.content = content;
+        }
         obj.path = undefined;
     });
     return {

package/dist/cjs/jupyter.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { MinifiedOutput } from '@curvenote/nbtx';
+import type { MinifiedOutput } from 'nbtx';
 export declare const NativeJupyterOutputs: ({ id, outputs, }: {
     id: string;
     outputs: MinifiedOutput[];

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

@@ -1 +1 @@
-{"version":3,"file":"jupyter.d.ts","sourceRoot":"","sources":["../../src/jupyter.tsx"],"names":[],"mappings":";AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAQtD,eAAO,MAAM,oBAAoB;QAI3B,MAAM;aACD,cAAc,EAAE;iBAmE1B,CAAC"}
+{"version":3,"file":"jupyter.d.ts","sourceRoot":"","sources":["../../src/jupyter.tsx"],"names":[],"mappings":";AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,MAAM,CAAC;AAS3C,eAAO,MAAM,oBAAoB;QAI3B,MAAM;aACD,cAAc,EAAE;iBAoE1B,CAAC"}

package/dist/cjs/jupyter.js

@@ -30,25 +30,28 @@ const hooks_1 = __importStar(require("./hooks"));
 const nanoid_1 = require("nanoid");
 const react_redux_1 = require("react-redux");
 const connect_1 = require("@curvenote/connect");
-const nbtx_1 = require("@curvenote/nbtx");
+const nbtx_1 = require("nbtx");
 const outline_1 = require("@heroicons/react/24/outline");
+const convertImages_1 = require("./convertImages");
 const selectors_1 = require("./selectors");
 const PERCENT_OF_WINDOW = 0.9;
 const NativeJupyterOutputs = ({ id, outputs, }) => {
+    var _a;
     const windowSize = (0, hooks_1.default)();
     const { data, error } = (0, hooks_1.useFetchAnyTruncatedContent)(outputs);
     const [loading, setLoading] = (0, react_1.useState)(true);
     const [frameHeight, setFrameHeight] = (0, react_1.useState)(0);
     const [clamped, setClamped] = (0, react_1.useState)(false);
     const uid = (0, react_1.useMemo)(nanoid_1.nanoid, []);
-    const height = (0, react_redux_1.useSelector)((state) => (0, selectors_1.selectIFrameHeight)(state, uid));
+    const { height } = (_a = (0, react_redux_1.useSelector)((state) => (0, selectors_1.selectIFrameHeight)(state, uid))) !== null && _a !== void 0 ? _a : {};
     const rendererReady = (0, react_redux_1.useSelector)((state) => (0, selectors_1.selectIFrameReady)(state, uid));
     const iframeRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (iframeRef.current == null || !rendererReady || !data)
             return;
-        (0, nbtx_1.fetchAndEncodeOutputImages)((0, nbtx_1.convertToIOutputs)(data)).then((out) => {
-            connect_1.host.commsDispatch(iframeRef.current, connect_1.actions.connectHostSendContent(uid, out));
+        (0, convertImages_1.fetchAndEncodeOutputImages)(data).then((out) => {
+            const compactOutputs = (0, nbtx_1.convertToIOutputs)(out, {});
+            connect_1.host.commsDispatch(iframeRef.current, connect_1.actions.connectHostSendContent(uid, compactOutputs));
         });
     }, [id, iframeRef.current, rendererReady]);
     (0, react_1.useEffect)(() => {

package/dist/cjs/output.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-import type { GenericNode } from 'mystjs';
-import type { MinifiedOutput } from '@curvenote/nbtx/dist/minify/types';
+import type { GenericNode } from 'myst-common';
+import type { MinifiedOutput } from 'nbtx';
 export declare function allOutputsAreSafe(outputs: MinifiedOutput[], directOutputTypes: Set<string>, directMimeTypes: Set<string>): boolean;
-export declare function anyErrors(outputs: MinifiedOutput[]): boolean;
 export declare function Output(node: GenericNode): JSX.Element;
 //# sourceMappingURL=output.d.ts.map

package/dist/cjs/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,QAAQ,CAAC;AAE1C,OAAO,KAAK,EAAsB,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAgB5F,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,cAAc,EAAE,EACzB,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,EAC9B,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,WAY7B;AAWD,wBAAgB,SAAS,CAAC,OAAO,EAAE,cAAc,EAAE,WAElD;AAED,wBAAgB,MAAM,CAAC,IAAI,EAAE,WAAW,eA8BvC"}
+{"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;AAgB/D,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,cAAc,EAAE,EACzB,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,EAC9B,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,WAY7B;AAED,wBAAgB,MAAM,CAAC,IAAI,EAAE,WAAW,eA6BvC"}

package/dist/cjs/output.js

@@ -3,20 +3,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Output = exports.anyErrors = exports.allOutputsAreSafe = void 0;
+exports.Output = exports.allOutputsAreSafe = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const blocks_1 = require("@curvenote/blocks");
+const nbtx_1 = require("nbtx");
 const classnames_1 = __importDefault(require("classnames"));
 const safe_1 = require("./safe");
 const jupyter_1 = require("./jupyter");
-const outputBlock_1 = require("./outputBlock");
+const ClientOnly_1 = __importDefault(require("./ClientOnly"));
 const DIRECT_OUTPUT_TYPES = new Set(['stream', 'error']);
 const DIRECT_MIME_TYPES = new Set([
-    blocks_1.KnownCellOutputMimeTypes.TextPlain,
-    blocks_1.KnownCellOutputMimeTypes.ImagePng,
-    blocks_1.KnownCellOutputMimeTypes.ImageGif,
-    blocks_1.KnownCellOutputMimeTypes.ImageJpeg,
-    blocks_1.KnownCellOutputMimeTypes.ImageBmp,
+    nbtx_1.KnownCellOutputMimeTypes.TextPlain,
+    nbtx_1.KnownCellOutputMimeTypes.ImagePng,
+    nbtx_1.KnownCellOutputMimeTypes.ImageGif,
+    nbtx_1.KnownCellOutputMimeTypes.ImageJpeg,
+    nbtx_1.KnownCellOutputMimeTypes.ImageBmp,
 ]);
 function allOutputsAreSafe(outputs, directOutputTypes, directMimeTypes) {
     return outputs.reduce((flag, output) => {
@@ -31,36 +31,21 @@ function allOutputsAreSafe(outputs, directOutputTypes, directMimeTypes) {
     }, true);
 }
 exports.allOutputsAreSafe = allOutputsAreSafe;
-function listMimetypes(outputs, directOutputTypes) {
-    return outputs.map((output) => {
-        if (directOutputTypes.has(output.output_type))
-            return [output.output_type];
-        const data = output.data;
-        const mimetypes = data ? Object.keys(data) : [];
-        return [output.output_type, mimetypes];
-    });
-}
-function anyErrors(outputs) {
-    return outputs.reduce((flag, output) => flag || output.output_type === 'error', false);
-}
-exports.anyErrors = anyErrors;
 function Output(node) {
     const outputs = node.data;
     const allSafe = allOutputsAreSafe(outputs, DIRECT_OUTPUT_TYPES, DIRECT_MIME_TYPES);
-    const hasError = anyErrors(outputs);
     let component;
     if (allSafe) {
         component = (0, jsx_runtime_1.jsx)(safe_1.SafeOutputs, { keyStub: node.key, outputs: outputs });
     }
     else {
         // Hide the iframe if rendering on the server
-        component =
-            typeof document === 'undefined' ? null : (0, jsx_runtime_1.jsx)(jupyter_1.NativeJupyterOutputs, { id: node.key, outputs: outputs });
+        component = ((0, jsx_runtime_1.jsx)(ClientOnly_1.default, { children: (0, jsx_runtime_1.jsx)(jupyter_1.NativeJupyterOutputs, { id: node.key, outputs: outputs }) }));
     }
-    return ((0, jsx_runtime_1.jsx)("figure", Object.assign({ suppressHydrationWarning: !allSafe, id: node.identifier || undefined, className: (0, classnames_1.default)('max-w-full overflow-auto m-0', {
+    return ((0, jsx_runtime_1.jsx)("figure", Object.assign({ id: node.identifier || undefined, className: (0, classnames_1.default)('max-w-full overflow-auto m-0 group not-prose relative', {
             'text-left': !node.align || node.align === 'left',
             'text-center': node.align === 'center',
             'text-right': node.align === 'right',
-        }) }, { children: (0, jsx_runtime_1.jsx)(outputBlock_1.OutputBlock, Object.assign({ allSafe: allSafe, hasError: hasError }, { children: component })) }), node.key));
+        }) }, { children: component }), node.key));
 }
 exports.Output = Output;

package/dist/cjs/safe.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { MinifiedOutput } from '@curvenote/nbtx/dist/minify/types';
+import type { MinifiedOutput } from 'nbtx';
 export declare function SafeOutputs({ keyStub, outputs }: {
     keyStub: string;
     outputs: MinifiedOutput[];

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

@@ -1 +1 @@
-{"version":3,"file":"safe.d.ts","sourceRoot":"","sources":["../../src/safe.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAGV,cAAc,EACf,MAAM,mCAAmC,CAAC;AAwE3C,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,cAAc,EAAE,CAAA;CAAE,eAM/F"}
+{"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,eAM/F"}

package/dist/cjs/safe.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SafeOutputs = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const jupyter_1 = require("@curvenote/blocks/dist/blocks/types/jupyter");
+const nbtx_1 = require("nbtx");
 const stream_1 = __importDefault(require("./stream"));
 const error_1 = __importDefault(require("./error"));
 const ansi_to_react_1 = __importDefault(require("ansi-to-react"));
@@ -25,10 +25,10 @@ const ansi_to_react_1 = __importDefault(require("ansi-to-react"));
       - "text/plain"
  */
 const RENDER_PRIORITY = [
-    jupyter_1.KnownCellOutputMimeTypes.ImagePng,
-    jupyter_1.KnownCellOutputMimeTypes.ImageJpeg,
-    jupyter_1.KnownCellOutputMimeTypes.ImageGif,
-    jupyter_1.KnownCellOutputMimeTypes.ImageBmp,
+    nbtx_1.KnownCellOutputMimeTypes.ImagePng,
+    nbtx_1.KnownCellOutputMimeTypes.ImageJpeg,
+    nbtx_1.KnownCellOutputMimeTypes.ImageGif,
+    nbtx_1.KnownCellOutputMimeTypes.ImageBmp,
 ];
 function findSafeMimeOutputs(output) {
     const data = output.data;

package/dist/cjs/selectors.d.ts

@@ -2,8 +2,8 @@ import type { HostState } from '@curvenote/connect';
 export interface State {
     app: HostState;
 }
-export declare const selectIFrameHeight: (state: State, id: string) => number | null;
-export declare const selectIFrameReady: (state: State, id: string) => boolean;
+export declare const selectIFrameHeight: (state: State, id: string) => Pick<import("@curvenote/connect").HostStateItem, "height" | "width"> | undefined;
+export declare const selectIFrameReady: (state: State, id: string) => Boolean;
 export declare const selectIFrameSendFailed: (state: State, id: string) => false | {
     message: string | undefined;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../src/selectors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGpD,MAAM,WAAW,KAAK;IACpB,GAAG,EAAE,SAAS,CAAC;CAChB;AAED,eAAO,MAAM,kBAAkB,UAAW,KAAK,MAAM,MAAM,kBACX,CAAC;AAEjD,eAAO,MAAM,iBAAiB,UAAW,KAAK,MAAM,MAAM,YACT,CAAC;AAElD,eAAO,MAAM,sBAAsB,UAAW,KAAK,MAAM,MAAM;;CACb,CAAC"}
+{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../src/selectors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGpD,MAAM,WAAW,KAAK;IACpB,GAAG,EAAE,SAAS,CAAC;CAChB;AAED,eAAO,MAAM,kBAAkB,UAAW,KAAK,MAAM,MAAM,qFACX,CAAC;AAEjD,eAAO,MAAM,iBAAiB,UAAW,KAAK,MAAM,MAAM,YACT,CAAC;AAElD,eAAO,MAAM,sBAAsB,UAAW,KAAK,MAAM,MAAM;;CACb,CAAC"}

package/dist/cjs/stream.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { MinifiedStreamOutput } from '@curvenote/nbtx';
+import type { MinifiedStreamOutput } from 'nbtx';
 export default function Stream({ output }: {
     output: MinifiedStreamOutput;
 }): JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"stream.d.ts","sourceRoot":"","sources":["../../src/stream.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAG5D,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,oBAAoB,CAAA;CAAE,eAY1E"}
+{"version":3,"file":"stream.d.ts","sourceRoot":"","sources":["../../src/stream.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,MAAM,CAAC;AAGjD,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,oBAAoB,CAAA;CAAE,eAY1E"}

package/dist/cjs/stream.js

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ansi_to_react_1 = __importDefault(require("ansi-to-react"));
-const blocks_1 = require("@curvenote/blocks");
+const nbtx_1 = require("nbtx");
 const components_1 = require("./components");
 function Stream({ output }) {
-    return ((0, jsx_runtime_1.jsx)(components_1.MaybeLongContent, { content: (0, blocks_1.ensureString)(output.text), path: output.path, render: (content) => ((0, jsx_runtime_1.jsx)("pre", Object.assign({ className: "text-sm font-thin font-system" }, { children: (0, jsx_runtime_1.jsx)(ansi_to_react_1.default, { children: content !== null && content !== void 0 ? content : '' }) }))) }));
+    return ((0, jsx_runtime_1.jsx)(components_1.MaybeLongContent, { content: (0, nbtx_1.ensureString)(output.text), path: output.path, render: (content) => ((0, jsx_runtime_1.jsx)("pre", Object.assign({ className: "text-sm font-thin font-system" }, { children: (0, jsx_runtime_1.jsx)(ansi_to_react_1.default, { children: content !== null && content !== void 0 ? content : '' }) }))) }));
 }
 exports.default = Stream;

package/dist/esm/ClientOnly.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+export default function ClientOnly({ children }: {
+    children: ReactNode;
+}): JSX.Element | null;
+//# sourceMappingURL=ClientOnly.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClientOnly.d.ts","sourceRoot":"","sources":["../../src/ClientOnly.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,sBAMvE"}

package/dist/esm/ClientOnly.js

@@ -0,0 +1,9 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+export default function ClientOnly({ children }) {
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    return mounted ? _jsx(_Fragment, { children: children }) : null;
+}

package/dist/esm/convertImages.d.ts

@@ -0,0 +1,3 @@
+import type { MinifiedOutput } from 'nbtx';
+export declare function fetchAndEncodeOutputImages(outputs: MinifiedOutput[]): Promise<MinifiedOutput[]>;
+//# sourceMappingURL=convertImages.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"convertImages.d.ts","sourceRoot":"","sources":["../../src/convertImages.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAsB,cAAc,EAAE,MAAM,MAAM,CAAC;AA6B/D,wBAAsB,0BAA0B,CAC9C,OAAO,EAAE,cAAc,EAAE,GACxB,OAAO,CAAC,cAAc,EAAE,CAAC,CAmC3B"}

package/dist/esm/convertImages.js

@@ -0,0 +1,66 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+function requestImageAsBase64String(src) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const img = new Image();
+        img.crossOrigin = 'Anonymous';
+        const base64String = new Promise((resolve, reject) => {
+            img.onload = function ol() {
+                const canvas = document.createElement('canvas');
+                const ctx = canvas.getContext('2d');
+                if (!ctx) {
+                    // eslint-disable-next-line no-console
+                    console.error('Could not get canvas context');
+                    return reject();
+                }
+                canvas.height = img.naturalHeight;
+                canvas.width = img.naturalWidth;
+                ctx.drawImage(img, 0, 0);
+                const dataURL = canvas.toDataURL('image/png');
+                const [, base64] = dataURL.split(';base64,');
+                resolve(base64);
+            };
+            // trigger the load
+            img.src = src;
+        });
+        return base64String;
+    });
+}
+export function fetchAndEncodeOutputImages(outputs) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return Promise.all(outputs.map((output) => __awaiter(this, void 0, void 0, function* () {
+            if (!('data' in output))
+                return output;
+            const imageMimetypes = Object.keys(output.data).filter((mimetype) => mimetype !== 'image/svg' && mimetype.startsWith('image/'));
+            if (imageMimetypes.length === 0)
+                return output;
+            // this is an async fetch, so we need to await the result
+            const images = yield Promise.all(imageMimetypes.map((mimetype) => __awaiter(this, void 0, void 0, function* () {
+                /*
+                  image/* types can be either raw svg, base64 encoded or a URL.
+                  base64 encoded images can include data:image/*;base64, or be naked
+                  svgs can also be base64 encoded, or plain '<svg ...></svg>'.
+                  URLs can be relative or absolute
+                */
+                const data = output.data[mimetype];
+                if (data.path) {
+                    const base64 = yield requestImageAsBase64String(data.path);
+                    return Object.assign(Object.assign({}, data), { content: base64 });
+                }
+                return data;
+            })));
+            imageMimetypes.forEach((mimetype, i) => {
+                // eslint-disable-next-line no-param-reassign
+                output.data[mimetype] = images[i];
+            });
+            return output;
+        })));
+    });
+}

package/dist/esm/error.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { MinifiedErrorOutput } from '@curvenote/nbtx';
+import type { MinifiedErrorOutput } from 'nbtx';
 export default function Error({ output }: {
     output: MinifiedErrorOutput;
 }): JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"error.d.ts","sourceRoot":"","sources":["../../src/error.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAG3D,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,mBAAmB,CAAA;CAAE,eAcxE"}
+{"version":3,"file":"error.d.ts","sourceRoot":"","sources":["../../src/error.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,MAAM,CAAC;AAGhD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,mBAAmB,CAAA;CAAE,eAcxE"}

package/dist/esm/error.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Ansi from 'ansi-to-react';
-import { ensureString } from '@curvenote/blocks';
+import { ensureString } from 'nbtx';
 import { MaybeLongContent } from './components';
 export default function Error({ output }) {
     return (_jsx(MaybeLongContent, { content: ensureString(output.traceback), path: output.path, render: (content) => {