@myst-theme/jupyter 1.2.0 → 1.3.0

package/dist/active.d.ts

@@ -1,6 +1,12 @@
 import type { IOutput } from '@jupyterlab/nbformat';
 import type { ThebeCore } from 'thebe-core';
 import { type MinifiedOutput } from 'nbtx';
+/**
+ * Attaches a live thebe kernel cell to the DOM so outputs update on re-execution.
+ * Used when thebe compute is "ready" (a kernel is connected). The passive
+ * counterpart, `PassiveOutputRenderer`, renders a fresh MIME bundle into a
+ * disposable cell instead.
+ */
 export declare function ActiveOutputRenderer({ outputsId, initialData, core, }: {
     outputsId: string;
     initialData: IOutput[];

package/dist/active.d.ts.map

@@ -1 +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"}
+{"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;AAO9D;;;;;GAKG;AACH,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,2CA8CA;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

@@ -9,6 +9,13 @@ import { useThebeLoader } from 'thebe-react';
 import { useFetchAnyTruncatedContent } from './hooks.js';
 import { useXRefState } from '@myst-theme/providers';
 import { fetchAndEncodeOutputImages } from './convertImages.js';
+import { observeScrollableA11y } from './passive.js';
+/**
+ * Attaches a live thebe kernel cell to the DOM so outputs update on re-execution.
+ * Used when thebe compute is "ready" (a kernel is connected). The passive
+ * counterpart, `PassiveOutputRenderer`, renders a fresh MIME bundle into a
+ * disposable cell instead.
+ */
 export function ActiveOutputRenderer({ outputsId, initialData, core, }) {
     var _a;
     const exec = useCellExecution(outputsId);
@@ -30,10 +37,13 @@ export function ActiveOutputRenderer({ outputsId, initialData, core, }) {
         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);
         }
+        return observeScrollableA11y(ref.current);
     }, [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 })] }));
+    return (_jsxs("div", { children: [_jsx("div", { ref: ref, "data-thebe-active-ref": "true", className: classNames('relative not-prose', {
+                    'invisible h-0': !executed && placeholder,
+                }) }), exec.ready && placeholder && !executed && _jsx(MyST, { ast: placeholder })] }));
 }
 export function ActiveJupyterCellOutputs({ outputsId, outputs, }) {
     const { core, load } = useThebeLoader();
@@ -61,7 +71,7 @@ export function ActiveJupyterCellOutputs({ outputsId, outputs, }) {
         return _jsxs("div", { className: "text-red-500", children: ["Error rendering output: ", error.message] });
     }
     if (!inCrossRef && (exec === null || exec === void 0 ? void 0 : exec.ready)) {
-        return (_jsxs("div", { children: [!fullOutputs && _jsx("div", { className: "p-2.5", children: "Fetching full output data..." }), core && fullOutputs && (_jsx(ActiveOutputRenderer, { outputsId: outputsId, initialData: fullOutputs, core: core }, outputsId))] }));
+        return (_jsxs("div", { "data-name": "active-outputs-container", className: "not-prose mb-5", 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/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,MAAM,CAAC;AAGhD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,mBAAmB,CAAA;CAAE,2CAcxE"}
+{"version":3,"file":"error.d.ts","sourceRoot":"","sources":["../src/error.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,MAAM,CAAC;AAIhD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,mBAAmB,CAAA;CAAE,2CAoBxE"}

package/dist/error.js

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import Ansi from '@curvenote/ansi-to-react';
 import { ensureString } from 'nbtx';
 import { MaybeLongContent } from './components.js';
+import { useIsScrollable } from '@myst-theme/providers';
 export default function Error({ output }) {
-    return (_jsx(MaybeLongContent, { content: ensureString(output.traceback), path: output.path, render: (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 : '' }) }));
-        } }));
+    const { ref, isScrollable } = useIsScrollable();
+    return (_jsx(MaybeLongContent, { content: ensureString(output.traceback), path: output.path, render: (content) => (_jsx("pre", { ref: ref, tabIndex: isScrollable ? 0 : undefined, role: isScrollable ? 'region' : undefined, "aria-label": "cell error output", className: "myst-jp-error-output text-sm font-thin font-system overflow-auto jupyter-error", children: _jsx(Ansi, { useClasses: true, children: content !== null && content !== void 0 ? content : '' }) })) }));
 }

package/dist/jupyter.d.ts

@@ -1,9 +1,14 @@
 import React from 'react';
 import type { MinifiedOutput } from 'nbtx';
 /**
- * Render a single output as a Jupyter output.
+ * Render one output whose MIME bundle can't be displayed with plain HTML
+ * (e.g. text/html from pandas, plotly JSON, Jupyter widgets).
+ * Outputs that CAN render directly go through `SafeOutput` instead (see `output.tsx`).
  *
- * @param id - The id of the cell.
+ * Uses thebe-core's rendermime registry via `PassiveOutputRenderer`.
+ * "thebe" here does NOT mean a live kernel, we're only using its MIME→DOM renderers.
+ *
+ * @param outputsId - The id of the cell.
  * @param output - The output data.
  */
 export declare const JupyterOutput: React.MemoExoticComponent<({ outputsId, output }: {

package/dist/jupyter.d.ts.map

@@ -1 +1 @@
-{"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"}
+{"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;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,oDACA;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,cAAc,CAAA;CAAE,6CAiDtE,CAAC"}

package/dist/jupyter.js

@@ -7,9 +7,14 @@ import { SourceFileKind } from 'myst-spec-ext';
 import { useThebeLoader } from 'thebe-react';
 import { PassiveOutputRenderer } from './passive.js';
 /**
- * Render a single output as a Jupyter output.
+ * Render one output whose MIME bundle can't be displayed with plain HTML
+ * (e.g. text/html from pandas, plotly JSON, Jupyter widgets).
+ * Outputs that CAN render directly go through `SafeOutput` instead (see `output.tsx`).
  *
- * @param id - The id of the cell.
+ * Uses thebe-core's rendermime registry via `PassiveOutputRenderer`.
+ * "thebe" here does NOT mean a live kernel, we're only using its MIME→DOM renderers.
+ *
+ * @param outputsId - The id of the cell.
  * @param output - The output data.
  */
 export const JupyterOutput = React.memo(({ outputsId, output }) => {

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,YAAY,CAC1B,MAAM,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,EACzC,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,EAC9B,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,WAgB7B;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,OAAO,GAAG;IAC/C,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAWA;AAED,wBAAgB,MAAM,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAoCpF"}
+{"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;AAe/D,eAAO,MAAM,mBAAmB,aAA+B,CAAC;AAEhE,eAAO,MAAM,iBAAiB,EAMxB,GAAG,CAAC,MAAM,CAAC,CAAC;AAElB,wBAAgB,YAAY,CAC1B,MAAM,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,EACzC,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,EAC9B,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,WAgB7B;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,OAAO,GAAG;IAC/C,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAWA;AAED,wBAAgB,MAAM,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAoCpF"}

package/dist/output.js

@@ -7,6 +7,12 @@ import { useCellExecution } from './execute/index.js';
 import { useOutputsContext } from './providers.js';
 import { Callout } from 'myst-to-react';
 import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+// Output types and MIME types that can be rendered with plain HTML. For example:
+// - stream/error or text/plain becomes <pre>
+// - images become <img>, etc...
+//
+// Anything else (e.g., MIME outputs from pandas or plotly) use
+// thebe-core's rendermime registry to turn the MIME bundle into DOM (see jupyter.tsx).
 export const DIRECT_OUTPUT_TYPES = new Set(['stream', 'error']);
 export const DIRECT_MIME_TYPES = new Set([
     KnownCellOutputMimeTypes.TextPlain,

package/dist/outputs.d.ts

@@ -1,4 +1,15 @@
 import type { GenericNode } from 'myst-common';
+/**
+ * Renders all outputs for a single cell.
+ *
+ * Two rendering paths:
+ * - Passive (no live compute, or live compute not ready): each child output renders
+ *   itself via <Output />, which uses either `SafeOutput (output.tsx) or
+ *   `JupyterOutput` (jupyter.tsx) to render the output depending on its type/MIME types.
+ * - Active (live thebe kernel ready): the whole cell is handed to
+ *   `ActiveJupyterCellOutputs`, which attaches a live Jupyter cell so outputs
+ *   can be re-rendered on execution.
+ */
 export declare function Outputs({ node }: {
     node: GenericNode;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/outputs.d.ts.map

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

package/dist/outputs.js

@@ -7,6 +7,17 @@ import { Details, MyST } from 'myst-to-react';
 import { selectAll } from 'unist-util-select';
 import { OutputsContextProvider } from './providers.js';
 import { ActiveJupyterCellOutputs } from './active.js';
+/**
+ * Renders all outputs for a single cell.
+ *
+ * Two rendering paths:
+ * - Passive (no live compute, or live compute not ready): each child output renders
+ *   itself via <Output />, which uses either `SafeOutput (output.tsx) or
+ *   `JupyterOutput` (jupyter.tsx) to render the output depending on its type/MIME types.
+ * - Active (live thebe kernel ready): the whole cell is handed to
+ *   `ActiveJupyterCellOutputs`, which attaches a live Jupyter cell so outputs
+ *   can be re-rendered on execution.
+ */
 export function Outputs({ node }) {
     var _a;
     const className = classNames({ hidden: node.visibility === 'remove' });
@@ -27,7 +38,7 @@ export function Outputs({ node }) {
     // 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', {
+        const passiveOutputs = (_jsx("div", { "data-name": "outputs-container", id: identifier || undefined, "data-mdast-node-id": outputsId, className: classNames('max-w-full overflow-y-visible m-0 group not-prose relative', {
                 'text-left': !align || align === 'left',
                 'text-center': align === 'center',
                 'text-right': align === 'right',

package/dist/passive.d.ts

@@ -2,9 +2,25 @@ 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.
+ * Mark each `.jp-OutputArea-output` descendant of `root` as keyboard-focusable
+ * (tabIndex/role/aria-label) when its content overflows horizontally, so wide
+ * outputs (tables, plots) are reachable via keyboard.
+ */
+export declare function stampScrollableA11y(root: HTMLElement | null): void;
+/**
+ * Stamp `root` now and re-stamp on any DOM mutation. Needed because some
+ * renderers (e.g. Plotly) insert content asynchronously, and re-execution
+ * can swap the output DOM. Returns a disconnect function for effect cleanup.
+ */
+export declare function observeScrollableA11y(root: HTMLElement | null): () => void;
+/**
+ * Render one output without a live kernel, using thebe-core's rendermime registry
+ * to turn the MIME bundle into DOM.
+ *
+ * Used for outputs that browsers can't render directly
+ * (e.g., pandas or plotly MIME types).
  *
- * This is used for outputs that require jupyters rendermime support, such as Plotly.
+ * With live thebe kernels, the counterpart is `ActiveOutputRenderer` in `active.tsx`.
  *
  * @param id - The id of the cell.
  * @param data - The output data.

package/dist/passive.d.ts.map

@@ -1 +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"}
+{"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;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,QAQ3D;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,cAM7D;AAED;;;;;;;;;;;;;GAaG;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,2CAiBA"}

package/dist/passive.js

@@ -2,9 +2,40 @@ 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.
+ * Mark each `.jp-OutputArea-output` descendant of `root` as keyboard-focusable
+ * (tabIndex/role/aria-label) when its content overflows horizontally, so wide
+ * outputs (tables, plots) are reachable via keyboard.
+ */
+export function stampScrollableA11y(root) {
+    root === null || root === void 0 ? void 0 : root.querySelectorAll('.jp-OutputArea-output').forEach((el) => {
+        if (el.scrollWidth > el.clientWidth) {
+            el.tabIndex = 0;
+            el.setAttribute('role', 'region');
+            el.setAttribute('aria-label', 'cell output');
+        }
+    });
+}
+/**
+ * Stamp `root` now and re-stamp on any DOM mutation. Needed because some
+ * renderers (e.g. Plotly) insert content asynchronously, and re-execution
+ * can swap the output DOM. Returns a disconnect function for effect cleanup.
+ */
+export function observeScrollableA11y(root) {
+    if (!root)
+        return () => { };
+    stampScrollableA11y(root);
+    const observer = new MutationObserver(() => stampScrollableA11y(root));
+    observer.observe(root, { childList: true, subtree: true });
+    return () => observer.disconnect();
+}
+/**
+ * Render one output without a live kernel, using thebe-core's rendermime registry
+ * to turn the MIME bundle into DOM.
+ *
+ * Used for outputs that browsers can't render directly
+ * (e.g., pandas or plotly MIME types).
  *
- * This is used for outputs that require jupyters rendermime support, such as Plotly.
+ * With live thebe kernels, the counterpart is `ActiveOutputRenderer` in `active.tsx`.
  *
  * @param id - The id of the cell.
  * @param data - The output data.
@@ -23,6 +54,7 @@ export function PassiveOutputRenderer({ id, data, core, }) {
         // 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);
+        return observeScrollableA11y(ref.current);
     }, [ref, loaded]);
     return _jsx("div", { ref: ref, "data-thebe-passive-ref": "true", "data-output-id": id });
 }

package/dist/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,MAAM,CAAC;AAGjD,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,oBAAoB,CAAA;CAAE,2CAY1E"}
+{"version":3,"file":"stream.d.ts","sourceRoot":"","sources":["../src/stream.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,MAAM,CAAC;AAMjD,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,oBAAoB,CAAA;CAAE,2CAwB1E"}

package/dist/stream.js

@@ -2,6 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import Ansi from '@curvenote/ansi-to-react';
 import { ensureString } from 'nbtx';
 import { MaybeLongContent } from './components.js';
+import { useIsScrollable } from '@myst-theme/providers';
+import classNames from 'classnames';
 export default function Stream({ output }) {
-    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 : '' }) })) }));
+    const { ref, isScrollable } = useIsScrollable();
+    const isError = output.name === 'stderr';
+    return (_jsx(MaybeLongContent, { content: ensureString(output.text), path: output.path, render: (content) => (_jsx("pre", { ref: ref, tabIndex: isScrollable ? 0 : undefined, role: isScrollable ? 'region' : undefined, "aria-label": "cell output stream", className: classNames('myst-jp-stream-output text-sm font-thin font-system overflow-auto', isError ? 'jupyter-error' : 'jupyter-output'), children: _jsx(Ansi, { useClasses: true, children: content !== null && content !== void 0 ? content : '' }) })) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/jupyter",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "type": "module",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -29,7 +29,7 @@
     "@curvenote/ansi-to-react": "^7.0.0",
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
-    "@myst-theme/providers": "^1.2.0",
+    "@myst-theme/providers": "^1.3.0",
     "@scienceicons/react": "^0.0.13",
     "buffer": "^6.0.3",
     "classnames": "^2.5.1",
@@ -39,7 +39,7 @@
     "myst-frontmatter": "^1.7.9",
     "myst-spec": "^0.0.5",
     "myst-spec-ext": "^1.8.1",
-    "myst-to-react": "^1.2.0",
+    "myst-to-react": "^1.3.0",
     "nanoid": "^4.0.2",
     "nbtx": "^0.2.3",
     "react-syntax-highlighter": "^15.5.0",