@myst-theme/jupyter 0.17.1 → 1.0.0

package/dist/BinderBadge.js

@@ -5,5 +5,5 @@ function BinderBadgeLogo() {
 export function BinderBadge({ binder }) {
     if (!binder)
         return null;
-    return (_jsx("div", { className: "inline-block m-1 opacity-80 hover:opacity-100", children: _jsx("a", { href: binder, title: `Launch Jupyter Session: ${binder}`, target: "_blank", rel: "noopener noreferrer", className: "text-inherit hover:text-inherit", children: _jsx(BinderBadgeLogo, {}) }) }));
+    return (_jsx("div", { className: "myst-jp-binder-badge inline-block m-1 opacity-80 hover:opacity-100", children: _jsx("a", { href: binder, title: `Launch Jupyter Session: ${binder}`, target: "_blank", rel: "noopener noreferrer", className: "text-inherit hover:text-inherit", children: _jsx(BinderBadgeLogo, {}) }) }));
 }

package/dist/ConnectionStatusTray.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectionStatusTray.d.ts","sourceRoot":"","sources":["../src/ConnectionStatusTray.tsx"],"names":[],"mappings":"AAMA,wBAAgB,oBAAoB,CAAC,EAAE,eAAe,EAAE,EAAE;IAAE,eAAe,CAAC,EAAE,OAAO,CAAA;CAAE,kDAmFtF"}
+{"version":3,"file":"ConnectionStatusTray.d.ts","sourceRoot":"","sources":["../src/ConnectionStatusTray.tsx"],"names":[],"mappings":"AAMA,wBAAgB,oBAAoB,CAAC,EAAE,eAAe,EAAE,EAAE;IAAE,eAAe,CAAC,EAAE,OAAO,CAAA;CAAE,kDAiGtF"}

package/dist/ConnectionStatusTray.js

@@ -43,13 +43,13 @@ export function ConnectionStatusTray({ waitForSessions }) {
             : 'Local Server';
     // TODO radix ui toast!
     if (show && error) {
-        return (_jsxs("div", { className: "fixed p-3 z-[11] text-sm text-gray-700 bg-white border rounded shadow-lg bottom-2 sm:right-2 max-w-[90%] md:max-w-[300px] min-w-0", children: [_jsxs("div", { className: "mb-2 font-semibold text-center", children: ["\u26D4\uFE0F Error connecting to ", host, " \u26D4\uFE0F"] }), _jsx("div", { className: "my-1 max-h-[15rem] mono overflow-hidden text-ellipsis", children: error }), _jsx("div", { className: "flex justify-end", children: _jsx("div", { className: "text-xs cursor-pointer hover:underline", role: "button", onClick: () => setShow(false), children: "dismiss" }) })] }));
+        return (_jsxs("div", { className: "myst-jp-connect-status-tray fixed p-3 z-[11] text-sm text-gray-700 bg-white border rounded shadow-lg bottom-2 sm:right-2 max-w-[90%] md:max-w-[300px] min-w-0", children: [_jsxs("div", { className: "myst-jp-connect-status-header mb-2 font-semibold text-center", children: ["\u26D4\uFE0F Error connecting to ", host, " \u26D4\uFE0F"] }), _jsx("div", { className: "myst-jp-connect-status-message my-1 max-h-[15rem] mono overflow-hidden text-ellipsis", children: error }), _jsx("div", { className: "myst-jp-connect-status-dismiss flex justify-end", children: _jsx("div", { className: "myst-jp-connect-status-dismiss-btn text-xs cursor-pointer hover:underline", role: "button", onClick: () => setShow(false), children: "dismiss" }) })] }));
     }
     if (show && ((_c = options === null || options === void 0 ? void 0 : options.thebe) === null || _c === void 0 ? void 0 : _c.useJupyterLite)) {
-        return (_jsxs("div", { className: "fixed p-3 z-[11] text-sm text-gray-700 bg-white border rounded shadow-lg bottom-2 sm:right-2 max-w-[90%] md:max-w-[300px] min-w-0", children: [_jsxs("div", { className: "mb-1 font-semibold text-center", children: ["\u26A1\uFE0F Connecting to ", host, " \u26A1\uFE0F"] }), !ready && _jsx("div", { className: "max-h-[5rem] mono overflow-hidden text-ellipsis", children: status }), ready && (_jsx("div", { className: "max-h-[15rem] mono overflow-hidden text-ellipsis", children: "The in-browser JupyterLite server is ready, press run anytime." }))] }));
+        return (_jsxs("div", { className: "myst-jp-connect-status-tray fixed p-3 z-[11] text-sm text-gray-700 bg-white border rounded shadow-lg bottom-2 sm:right-2 max-w-[90%] md:max-w-[300px] min-w-0", children: [_jsxs("div", { className: "myst-jp-connect-status-header mb-1 font-semibold text-center", children: ["\u26A1\uFE0F Connecting to ", host, " \u26A1\uFE0F"] }), !ready && (_jsx("div", { className: "myst-jp-connect-status-notready max-h-[5rem] mono overflow-hidden text-ellipsis", children: status })), ready && (_jsx("div", { className: "myst-jp-connect-status-message max-h-[15rem] mono overflow-hidden text-ellipsis", children: "The in-browser JupyterLite server is ready, press run anytime." }))] }));
     }
     if (show) {
-        return (_jsxs("div", { className: "fixed p-3 z-[11] text-sm text-gray-700 bg-white border rounded shadow-lg bottom-2 sm:right-2 max-w-[90%] md:max-w-[300px] min-w-0", children: [_jsxs("div", { className: "mb-1 font-semibold text-center", children: ["\u26A1\uFE0F Connecting to ", host, " \u26A1\uFE0F"] }), _jsx("div", { className: "max-h-[15rem] mono overflow-hidden text-ellipsis", children: status })] }));
+        return (_jsxs("div", { className: "myst-jp-connect-status-tray fixed p-3 z-[11] text-sm text-gray-700 bg-white border rounded shadow-lg bottom-2 sm:right-2 max-w-[90%] md:max-w-[300px] min-w-0", children: [_jsxs("div", { className: "myst-jp-connect-status-header mb-1 font-semibold text-center", children: ["\u26A1\uFE0F Connecting to ", host, " \u26A1\uFE0F"] }), _jsx("div", { className: "myst-jp-connect-status-message max-h-[15rem] mono overflow-hidden text-ellipsis", children: status })] }));
     }
     return null;
 }

package/dist/ErrorTray.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorTray.d.ts","sourceRoot":"","sources":["../src/ErrorTray.tsx"],"names":[],"mappings":"AAmDA,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,kDAkBlF"}
+{"version":3,"file":"ErrorTray.d.ts","sourceRoot":"","sources":["../src/ErrorTray.tsx"],"names":[],"mappings":"AAuDA,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,kDAkBlF"}

package/dist/ErrorTray.js

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { useThebeLoader } from 'thebe-react';
 import { useBusyErrors } from './execute/busy.js';
 function ErrorDecoration({ children, idx }) {
-    return (_jsxs("div", { className: "relative py-3 mx-2 my-8 border rounded", children: [_jsx("div", { className: "absolute z-10 flex items-center bg-white -top-3 -left-2", children: idx && _jsxs("div", { className: "ml-1 text-sm text-gray-500", children: ["cell #: ", idx + 1] }) }), _jsx("div", { className: "mx-3", children: children })] }));
+    return (_jsxs("div", { className: "myst-jp-error-tray-decoration relative py-3 mx-2 my-8 border rounded", children: [_jsx("div", { className: "myst-jp-error-tray-cell absolute z-10 flex items-center bg-white -top-3 -left-2", children: idx && (_jsxs("div", { className: "myst-jp-error-tray-cell-number ml-1 text-sm text-gray-500", children: ["cell #: ", idx + 1] })) }), _jsx("div", { className: "myst-jp-error-tray-content mx-3", children: children })] }));
 }
 function ErrorTrayMessage({ errors }) {
     const { core } = useThebeLoader();
@@ -24,7 +24,7 @@ function ErrorTrayMessage({ errors }) {
     }, [core, errors]);
     if (!core)
         return null;
-    return (_jsx("div", { children: errors.map((error, idx) => (_jsx("div", { className: "not-prose min-w-[400px]", children: _jsx(ErrorDecoration, { idx: error.index, children: _jsx("div", { className: "z-100", ref: refs[idx] }, error.id) }) }, `error-${error.id}`))) }));
+    return (_jsx("div", { children: errors.map((error, idx) => (_jsx("div", { className: "myst-jp-error-tray-item not-prose min-w-[400px]", children: _jsx(ErrorDecoration, { idx: error.index, children: _jsx("div", { className: "z-100", ref: refs[idx] }, error.id) }) }, `error-${error.id}`))) }));
 }
 export function ErrorTray({ pageSlug, index }) {
     const { items } = useBusyErrors(pageSlug);
@@ -32,7 +32,7 @@ export function ErrorTray({ pageSlug, index }) {
         return null;
     if (index && index)
         return null;
-    return (_jsx("div", { className: "relative px-4 pt-3 my-8 text-sm text-red-600 border border-red-400 rounded border-1", children: items.map(({ notebookSlug, errors }, i) => {
+    return (_jsx("div", { className: "myst-jp-error-tray relative px-4 pt-3 my-8 text-sm text-red-600 border border-red-400 rounded border-1", children: items.map(({ notebookSlug, errors }, i) => {
             return (_jsxs("div", { children: [_jsxs("div", { children: [_jsx("span", { className: "font-bold", children: "Error" }), " in notebook ", _jsxs("span", { children: ["\"", notebookSlug, "\""] })] }), _jsx(ErrorTrayMessage, { errors: errors })] }, `${notebookSlug}-${i}`));
         }) }));
 }

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/block.js

@@ -7,10 +7,10 @@ import { usePageKind } from '@myst-theme/providers';
 export function NotebookBlock({ node, className }) {
     var _a, _b, _c, _d;
     const pageKind = usePageKind();
-    const block = (_jsxs("div", { id: (_b = (_a = node.html_id) !== null && _a !== void 0 ? _a : node.identifier) !== null && _b !== void 0 ? _b : node.key, className: classNames('relative group/block', className, node.class, {
+    const block = (_jsxs("div", { id: (_b = (_a = node.html_id) !== null && _a !== void 0 ? _a : node.identifier) !== null && _b !== void 0 ? _b : node.key, className: classNames('myst-jp-nb-block relative group/block', className, node.class, {
             [(_c = node.data) === null || _c === void 0 ? void 0 : _c.class]: typeof ((_d = node.data) === null || _d === void 0 ? void 0 : _d.class) === 'string',
             hidden: node.visibility === 'remove',
-        }), children: [pageKind === SourceFileKind.Notebook && node.kind === 'notebook-code' && (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex sticky top-[115px] z-10 opacity-90 group-hover/block:opacity-100 group-hover/block:hidden", children: _jsx("div", { className: "flex absolute top-0 right-0", children: _jsx(NotebookRunCellSpinnerOnly, { id: `spinner-${node.key}` }) }) }), _jsx("div", { className: "hidden sticky top-[80px] z-10 opacity-70 group-hover/block:opacity-100 group-hover/block:flex", children: _jsxs("div", { className: "absolute top-0 -right-[28px] flex md:flex-col", children: [_jsx(NotebookRunCell, { id: `run-${node.key}` }), _jsx(NotebookClearCell, { id: `clear-${node.key}` })] }) })] })), _jsx(MyST, { ast: node.children })] }));
+        }), children: [pageKind === SourceFileKind.Notebook && node.kind === 'notebook-code' && (_jsxs(_Fragment, { children: [_jsx("div", { className: "myst-jp-nb-block-spinner flex sticky top-[115px] z-10 opacity-90 group-hover/block:opacity-100 group-hover/block:hidden", children: _jsx("div", { className: "flex absolute top-0 right-0", children: _jsx(NotebookRunCellSpinnerOnly, { id: `spinner-${node.key}` }) }) }), _jsx("div", { className: "myst-jp-nb-block sticky top-[115px] z-10 opacity-90 group-hover/block:opacity-100 group-hover/block:flex", children: _jsxs("div", { className: "absolute -top-[12px] right-0 flex flex-row rounded bg-white dark:bg-slate-800", children: [_jsx(NotebookRunCell, { id: `run-${node.key}` }), _jsx(NotebookClearCell, { id: `clear-${node.key}` })] }) })] })), _jsx(MyST, { ast: node.children })] }));
     if (node.visibility === 'hide') {
         return _jsx(Details, { title: "Notebook Cell", children: block });
     }

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,4CASA,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/components.js

@@ -15,10 +15,10 @@ import { useLongContent } from './hooks.js';
 export const MaybeLongContent = ({ content, path, render, }) => {
     const { error, data } = useLongContent(content, path);
     if (error) {
-        return _jsxs("div", { className: "text-red-500", children: ["Error loading content: ", error.message] });
+        return (_jsxs("div", { className: "myst-jp-long-error text-red-500", children: ["Error loading content: ", error.message] }));
     }
     if (!data) {
-        return _jsx("div", { children: "Fetching long content...." });
+        return _jsx("div", { className: "myst-jp-long-loading", children: "Fetching long content...." });
     }
     return _jsx("div", { children: render(data.content) });
 };

package/dist/controls/Buttons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Buttons.d.ts","sourceRoot":"","sources":["../../src/controls/Buttons.tsx"],"names":[],"mappings":"AAwDA,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,GAAG,QAAQ,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,2CA6D9F;AAED,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,OAAO,GACR,EAAE;IACD,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,2CAuCA;AA0CD,wBAAgB,GAAG,CAAC,EAClB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,KAAK,EACL,OAAO,GACR,EAAE;IACD,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,2CAWA;AAED,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,KAAK,EACL,OAAO,GACR,EAAE;IACD,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,2CAiBA;AAED,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,KAAK,EACL,OAAO,GACR,EAAE;IACD,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,2CAWA;AAED,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,KAAK,EACL,OAAO,GACR,EAAE;IACD,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,2CAaA;AAED,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,QAAQ,EACR,KAAK,EACL,OAAO,GACR,EAAE;IACD,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,2CAeA;AAED,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,KAAK,EACL,OAAO,GACR,EAAE;IACD,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,2CAgBA"}
+{"version":3,"file":"Buttons.d.ts","sourceRoot":"","sources":["../../src/controls/Buttons.tsx"],"names":[],"mappings":"AA6DA,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,GAAG,QAAQ,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,2CA6D9F;AAED,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,OAAO,GACR,EAAE;IACD,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,2CAuCA;AA0CD,wBAAgB,GAAG,CAAC,EAClB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,KAAK,EACL,OAAO,GACR,EAAE;IACD,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,2CAiBA;AAED,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,KAAK,EACL,OAAO,GACR,EAAE;IACD,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,2CAiBA;AAED,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,KAAK,EACL,OAAO,GACR,EAAE;IACD,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,2CAiBA;AAED,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,KAAK,EACL,OAAO,GACR,EAAE;IACD,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,2CAiBA;AAED,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,QAAQ,EACR,KAAK,EACL,OAAO,GACR,EAAE;IACD,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,2CAeA;AAED,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,KAAK,EACL,OAAO,GACR,EAAE;IACD,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,2CAgBA"}

package/dist/controls/Buttons.js

@@ -12,7 +12,7 @@ function BinderButton({ icon, label, title, busy, error, className, onClick, })
     else if (busy) {
         iconToShow = _jsx(Spinner, { size: 16 });
     }
-    return (_jsx("button", { className: className, disabled: busy, onClick: onClick, title: title, children: _jsxs("div", { className: "flex items-center h-full", children: [iconToShow, _jsx("span", { children: label })] }) }));
+    return (_jsx("button", { className: classNames('myst-jp-btn-binder', className), disabled: busy, onClick: onClick, title: title, children: _jsxs("div", { className: "flex items-center h-full", children: [iconToShow, _jsx("span", { children: label })] }) }));
 }
 export function LaunchBinder({ type, location }) {
     const { connecting, ready, error, autoClickRef, handleStart, getUserServerUrl } = useLaunchBinder();
@@ -26,7 +26,7 @@ export function LaunchBinder({ type, location }) {
     if (ready) {
         // we expect ?token= to be in the url
         const userServerUrl = getUserServerUrl(location);
-        return (_jsx("a", { ref: autoClickRef, className: btnStyles, href: userServerUrl, target: "_blank", rel: "noopener noreferrer", title: "Binder server is available, click to open in a new tab", children: _jsxs("div", { className: "flex items-center h-full", children: [icon, _jsx("span", { children: "Open in Jupyter" })] }) }));
+        return (_jsx("a", { ref: autoClickRef, className: classNames('myst-jp-btn-launch-binder', btnStyles), href: userServerUrl, target: "_blank", rel: "noopener noreferrer", title: "Binder server is available, click to open in a new tab", children: _jsxs("div", { className: "flex items-center h-full", children: [icon, _jsx("span", { children: "Open in Jupyter" })] }) }));
     }
     let label = 'Launch Jupyter';
     let title = 'Click to start a new compute session';
@@ -54,37 +54,37 @@ export function SpinnerStatusButton({ ready, busy, modified, onClick, }) {
             icon = _jsx(BoltIconSolid, { width: "1.5rem", height: "1.5rem", className: "text-green-600" });
         }
     }
-    return (_jsxs("div", { className: "relative flex text-sm", children: [_jsx("button", { className: classNames('cursor-pointer text-gray-700 dark:text-white active:text-green-700 hover:opacity-100', {
+    return (_jsxs("div", { className: "myst-jp-btn-spinner-status relative flex text-sm", children: [_jsx("button", { className: classNames('cursor-pointer text-gray-700 dark:text-white active:text-green-700 hover:opacity-100', {
                     'opacity-10': busy,
                     'opacity-70': !busy,
-                }), disabled: ready, title: title, "aria-label": `status`, onClick: onClick !== null && onClick !== void 0 ? onClick : (() => ({})), children: icon }), busy && (_jsx("span", { className: "absolute top-0 left-0 z-10 opacity-100", children: _jsx(Spinner, { size: 24 }) }))] }));
+                }), disabled: ready, title: title, "aria-label": `status`, onClick: onClick !== null && onClick !== void 0 ? onClick : (() => ({})), children: icon }), busy && (_jsx("span", { className: "myst-jp-btn-spinner-overlay absolute top-0 left-0 z-10 opacity-100", children: _jsx(Spinner, { size: 24 }) }))] }));
 }
 function SpinnerButton({ ready, icon, busy, disabled, title, onClick, }) {
-    return (_jsxs("div", { className: "relative flex text-sm", children: [_jsx("button", { className: classNames(' text-gray-700 dark:text-white active:text-green-700 ', {
+    return (_jsxs("div", { className: "myst-jp-btn-spinner relative flex text-sm", children: [_jsx("button", { className: classNames(' text-gray-700 dark:text-white active:text-green-700 ', {
                     'opacity-10 hover:opacity-10': busy,
                     'opacity-70': !busy && !disabled,
                     'cursor-pointer hover:opacity-100': !disabled,
                     'cursor-not-allowed opacity-10 hover:opacity-10': disabled,
-                }), disabled: disabled || !ready || busy, onClick: () => onClick(), title: title !== null && title !== void 0 ? title : 'run all cells', "aria-label": title !== null && title !== void 0 ? title : 'run all cells', children: icon }), busy && (_jsx("span", { className: "absolute top-0 left-0 z-10 opacity-100", children: _jsx(Spinner, { size: 24 }) }))] }));
+                }), disabled: disabled || !ready || busy, onClick: () => onClick(), title: title !== null && title !== void 0 ? title : 'run all cells', "aria-label": title !== null && title !== void 0 ? title : 'run all cells', children: icon }), busy && (_jsx("span", { className: "myst-jp-btn-spinner-overlay absolute top-0 left-0 z-10 opacity-100", children: _jsx(Spinner, { size: 24 }) }))] }));
 }
 export function Run({ ready, executing, disabled, title, onClick, }) {
-    return (_jsx(SpinnerButton, { ready: ready, busy: executing, disabled: disabled, title: title !== null && title !== void 0 ? title : 'run all cells', onClick: onClick, icon: _jsx(PlayCircleIcon, { width: "1.5rem", height: "1.5rem", className: "inline-block align-top" }) }));
+    return (_jsx(SpinnerButton, { ready: ready, busy: executing, disabled: disabled, title: title !== null && title !== void 0 ? title : 'run all cells', onClick: onClick, icon: _jsx(PlayCircleIcon, { width: "1.5rem", height: "1.5rem", className: "myst-jp-btn-run inline-block align-top" }) }));
 }
 export function Power({ ready, executing, disabled, title, onClick, }) {
-    return (_jsx(SpinnerButton, { ready: ready, busy: executing, disabled: disabled, title: title !== null && title !== void 0 ? title : 'enable compute', onClick: onClick, icon: _jsx(PowerIcon, { width: "1.5rem", height: "1.5rem", className: "inline-block align-top dark:text-white" }) }));
+    return (_jsx(SpinnerButton, { ready: ready, busy: executing, disabled: disabled, title: title !== null && title !== void 0 ? title : 'enable compute', onClick: onClick, icon: _jsx(PowerIcon, { width: "1.5rem", height: "1.5rem", className: "myst-jp-btn-power inline-block align-top dark:text-white" }) }));
 }
 export function ReRun({ ready, executing, disabled, title, onClick, }) {
-    return (_jsx(SpinnerButton, { ready: ready, busy: executing, disabled: disabled, title: title !== null && title !== void 0 ? title : 'run all cells', onClick: onClick, icon: _jsx(ArrowPathIcon, { width: "1.5rem", height: "1.5rem", className: "inline-block align-top" }) }));
+    return (_jsx(SpinnerButton, { ready: ready, busy: executing, disabled: disabled, title: title !== null && title !== void 0 ? title : 'run all cells', onClick: onClick, icon: _jsx(ArrowPathIcon, { width: "1.5rem", height: "1.5rem", className: "myst-jp-btn-rerun inline-block align-top" }) }));
 }
 export function Restart({ ready, resetting, disabled, title, onClick, }) {
-    return (_jsx(SpinnerButton, { ready: ready, busy: resetting, disabled: disabled, title: title !== null && title !== void 0 ? title : 'reset notebook', onClick: onClick, icon: _jsx(ArrowUturnLeftIcon, { width: "1.5rem", height: "1.5rem", className: "inline-block align-top" }) }));
+    return (_jsx(SpinnerButton, { ready: ready, busy: resetting, disabled: disabled, title: title !== null && title !== void 0 ? title : 'reset notebook', onClick: onClick, icon: _jsx(ArrowUturnLeftIcon, { width: "1.5rem", height: "1.5rem", className: "myst-jp-btn-restart inline-block align-top" }) }));
 }
 export function Clear({ ready, disabled, title, onClick, }) {
-    return (_jsx("button", { className: classNames('flex text-gray-700 dark:text-white', {
+    return (_jsx("button", { className: classNames('myst-jp-btn-clear flex text-gray-700 dark:text-white', {
             'cursor-not-allowed opacity-10': disabled || !ready,
             'active:text-green-700 opacity-70 hover:opacity-100 cursor-pointer': !disabled,
         }), disabled: disabled || !ready, onClick: () => onClick(), title: title !== null && title !== void 0 ? title : 'clear', "aria-label": title !== null && title !== void 0 ? title : 'clear', children: _jsx(MinusCircleIcon, { width: "1.5rem", height: "1.5rem", className: "inline-block align-top" }) }));
 }
 export function Launch({ ready, disabled, title, onClick, }) {
-    return (_jsx("button", { className: "flex items-center text-gray-700 cursor-pointer dark:text-white active:text-green-700 opacity-70 hover:opacity-100", disabled: disabled || !ready, onClick: () => onClick(), title: title !== null && title !== void 0 ? title : 'launch in jupyter', "aria-label": title !== null && title !== void 0 ? title : 'launch in jupyter', children: _jsx(ArrowTopRightOnSquareIcon, { width: "1.5rem", height: "1.5rem", className: "inline-block align-top" }) }));
+    return (_jsx("button", { className: "myst-jp-btn-launch flex items-center text-gray-700 cursor-pointer dark:text-white active:text-green-700 opacity-70 hover:opacity-100", disabled: disabled || !ready, onClick: () => onClick(), title: title !== null && title !== void 0 ? title : 'launch in jupyter', "aria-label": title !== null && title !== void 0 ? title : 'launch in jupyter', children: _jsx(ArrowTopRightOnSquareIcon, { width: "1.5rem", height: "1.5rem", className: "inline-block align-top" }) }));
 }

package/dist/controls/NotebookToolbar.js

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

package/dist/controls/Spinner.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function Spinner({ size }) {
-    return (_jsxs("div", { role: "status", children: [_jsxs("svg", { "aria-hidden": "true", width: size, height: size, className: "mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-green-600", viewBox: "0 0 100 101", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z", fill: "currentColor" }), _jsx("path", { d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z", fill: "currentFill" })] }), _jsx("span", { className: "sr-only", children: "Loading..." })] }));
+    return (_jsxs("div", { className: "myst-jp-spinner", role: "status", children: [_jsxs("svg", { "aria-hidden": "true", width: size, height: size, className: "mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-green-600", viewBox: "0 0 100 101", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z", fill: "currentColor" }), _jsx("path", { d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z", fill: "currentFill" })] }), _jsx("span", { className: "sr-only", children: "Loading..." })] }));
 }

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: "mb-4 shadow", children: [_jsx("div", { className: "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", children: [_jsxs("div", { className: "flex items-center", children: [_jsx(JupyterIcon, { width: "1.25rem", height: "1.25rem", className: "inline-block" }), _jsx("span", { className: "ml-2", children: "Source:" }), url && (_jsx(Link, { to: withBaseurl(url, remoteBaseUrl !== null && remoteBaseUrl !== void 0 ? remoteBaseUrl : baseurl), className: "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: "flex items-center justify-end text-xs", children: [_jsx(JupyterIcon, { width: "0.75rem", height: "0.75rem", className: "inline-block" }), _jsx("div", { className: "ml-1", children: "Source:" }), url && (_jsx(Link, { to: withBaseurl(url, remoteBaseUrl !== null && remoteBaseUrl !== void 0 ? remoteBaseUrl : baseurl), className: "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/error.js

@@ -4,6 +4,6 @@ import { ensureString } from 'nbtx';
 import { MaybeLongContent } from './components.js';
 export default function Error({ output }) {
     return (_jsx(MaybeLongContent, { content: ensureString(output.traceback), path: output.path, render: (content) => {
-            return (_jsx("pre", { className: "text-sm font-thin font-system jupyter-error", children: _jsx(Ansi, { children: content !== null && content !== void 0 ? content : '' }) }));
+            return (_jsx("pre", { className: "myst-jp-error-output text-sm font-thin font-system jupyter-error", children: _jsx(Ansi, { children: content !== null && content !== void 0 ? content : '' }) }));
         } }));
 }

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({ 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"}