@myst-theme/site 0.3.2 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "files": [
@@ -16,20 +16,20 @@
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
-    "@myst-theme/diagrams": "^0.3.2",
-    "@myst-theme/frontmatter": "^0.3.2",
-    "@myst-theme/jupyter": "^0.3.2",
-    "@myst-theme/providers": "^0.3.2",
+    "@myst-theme/diagrams": "^0.3.4",
+    "@myst-theme/frontmatter": "^0.3.4",
+    "@myst-theme/jupyter": "^0.3.4",
+    "@myst-theme/providers": "^0.3.4",
     "classnames": "^2.3.2",
     "lodash.throttle": "^4.1.1",
     "myst-common": "^1.0.1",
     "myst-config": "^1.0.0",
-    "myst-demo": "^0.3.2",
-    "myst-to-react": "^0.3.2",
+    "myst-demo": "^0.3.4",
+    "myst-to-react": "^0.3.4",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.11",
-    "thebe-react": "^0.2.3",
+    "thebe-react": "^0.2.7",
     "unist-util-select": "^4.0.1"
   },
   "peerDependencies": {

package/src/components/Bibliography.tsx

@@ -16,14 +16,14 @@ export function Bibliography() {
         {filtered.length > HIDE_OVER_N_REFERENCES && (
           <button
             onClick={() => setHidden(!hidden)}
-            className="float-right text-xs p-1 px-2 border rounded hover:border-blue-500 dark:hover:border-blue-400"
+            className="float-right p-1 px-2 text-xs border rounded hover:border-blue-500 dark:hover:border-blue-400"
           >
             {hidden ? 'Show All' : 'Collapse'}
           </button>
         )}
         <header className="text-lg font-semibold text-stone-900 dark:text-white">References</header>
       </div>
-      <div className="text-xs mb-8 pl-3 text-stone-500 dark:text-stone-300">
+      <div className="pl-3 mb-8 text-xs text-stone-500 dark:text-stone-300">
         <ol>
           {refs.map((label) => {
             const { html } = data[label];
@@ -37,7 +37,7 @@ export function Bibliography() {
             );
           })}
           {filtered.length > HIDE_OVER_N_REFERENCES && (
-            <li className="list-none text-center">
+            <li className="text-center list-none">
               <button
                 onClick={() => setHidden(!hidden)}
                 className="p-2 border rounded hover:border-blue-500 dark:hover:border-blue-400"

package/src/components/ContentBlocks.tsx

@@ -3,7 +3,11 @@ import { SourceFileKind } from 'myst-common';
 import type { GenericParent } from 'myst-common';
 import { useNodeRenderers } from '@myst-theme/providers';
 import classNames from 'classnames';
-import { ClearCell, RunCell } from './ComputeControls';
+import {
+  NotebookClearCell,
+  NotebookRunCell,
+  NotebookRunCellSpinnerOnly,
+} from '@myst-theme/jupyter';
 
 function isACodeCell(node: GenericParent) {
   return (
@@ -18,6 +22,7 @@ function isACodeCell(node: GenericParent) {
 
 function Block({
   id,
+  pageKind,
   node,
   className,
 }: {
@@ -41,13 +46,22 @@ function Block({
         [subGrid]: !noSubGrid,
       })}
     >
-      {children}
-      {isACodeCell(node) && (
-        <div className="hidden group-hover/block:flex md:flex-col absolute -top-[28px] md:top-0 right-0 md:-right-[28px] mt-8">
-          <RunCell id={id} />
-          <ClearCell id={id} />
-        </div>
+      {pageKind === SourceFileKind.Notebook && isACodeCell(node) && (
+        <>
+          <div className="flex sticky top-[80px] z-10 opacity-70 group-hover/block:opacity-100 group-hover/block:hidden">
+            <div className="absolute top-0 -right-[28px] flex md:flex-col">
+              <NotebookRunCellSpinnerOnly id={id} />
+            </div>
+          </div>
+          <div className="hidden sticky top-[80px] z-10 opacity-70 group-hover/block:opacity-100 group-hover/block:flex">
+            <div className="absolute top-0 -right-[28px] flex md:flex-col">
+              <NotebookRunCell id={id} />
+              <NotebookClearCell id={id} />
+            </div>
+          </div>
+        </>
       )}
+      {children}
     </div>
   );
 }

package/src/components/DocumentOutline.tsx

@@ -26,7 +26,7 @@ type Props = {
  * scrollIntoView is used to ensure that when a user clicks on an item, it will smoothly scroll.
  */
 const Headings = ({ headings, activeId, highlight, selector }: Props) => (
-  <ul className="text-slate-400 text-sm leading-6">
+  <ul className="text-sm text-slate-400 leading-6">
     {headings.map((heading) => (
       <li
         key={heading.id}
@@ -213,7 +213,7 @@ export const DocumentOutline = ({
         maxHeight: `calc(100vh - ${(top ?? 0) + 20}px)`,
       }}
     >
-      <div className="text-slate-900 mb-4 text-sm leading-6 dark:text-slate-100 uppercase">
+      <div className="mb-4 text-sm uppercase text-slate-900 leading-6 dark:text-slate-100">
         In this article
       </div>
       <Headings headings={headings} activeId={activeId} highlight={highlight} selector={selector} />

package/src/components/FooterLinksBlock.tsx

@@ -16,19 +16,19 @@ const FooterLink = ({
   return (
     <Link
       prefetch="intent"
-      className="group flex-1 p-4 block border font-normal hover:border-blue-600 dark:hover:border-blue-400 no-underline hover:text-blue-600 dark:hover:text-blue-400 text-gray-600 dark:text-gray-100 border-gray-200 dark:border-gray-500 rounded shadow-sm hover:shadow-lg dark:shadow-neutral-700"
+      className="flex-1 block p-4 font-normal text-gray-600 no-underline border border-gray-200 rounded group hover:border-blue-600 dark:hover:border-blue-400 hover:text-blue-600 dark:hover:text-blue-400 dark:text-gray-100 dark:border-gray-500 shadow-sm hover:shadow-lg dark:shadow-neutral-700"
       to={withBaseurl(url, baseurl)}
     >
-      <div className="flex align-middle h-full">
+      <div className="flex h-full align-middle">
         {right && (
-          <ArrowLeftIcon className="w-6 h-6 self-center transition-transform group-hover:-translate-x-1 shrink-0" />
+          <ArrowLeftIcon className="self-center w-6 h-6 transition-transform group-hover:-translate-x-1 shrink-0" />
         )}
         <div className={classNames('flex-grow', { 'text-right': right })}>
           <div className="text-xs text-gray-500 dark:text-gray-400">{group || ' '}</div>
           {short_title || title}
         </div>
         {!right && (
-          <ArrowRightIcon className="w-6 h-6 self-center transition-transform group-hover:translate-x-1 shrink-0" />
+          <ArrowRightIcon className="self-center w-6 h-6 transition-transform group-hover:translate-x-1 shrink-0" />
         )}
       </div>
     </Link>
@@ -38,7 +38,7 @@ const FooterLink = ({
 export function FooterLinksBlock({ links }: { links?: FooterLinks }) {
   if (!links) return null;
   return (
-    <div className="flex space-x-4 pt-10 mb-10">
+    <div className="flex pt-10 mb-10 space-x-4">
       {links.navigation?.prev && <FooterLink {...links.navigation?.prev} right />}
       {links.navigation?.next && <FooterLink {...links.navigation?.next} />}
     </div>

package/src/components/Navigation/TableOfContents.tsx

@@ -48,7 +48,7 @@ const HeadingLink = ({
           'border-l pl-4 text-blue-500 border-current dark:text-blue-400': !isIndex && isActive,
           'font-semibold': isActive,
           'border-l pl-4 border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300':
-            !isActive,
+            !isIndex && !isActive,
         })
       }
       to={withBaseurl(path, baseurl)}
@@ -92,7 +92,7 @@ const Headings = ({ folder, headings, sections }: Props) => {
                   {heading.short_title || heading.title}
                 </HeadingLink>
               ) : (
-                <h5 className="mb-3 lg:mt-8 font-semibold break-words dark:text-white">
+                <h5 className="mb-3 font-semibold break-words lg:mt-8 dark:text-white">
                   {heading.short_title || heading.title}
                 </h5>
               )}
@@ -191,7 +191,7 @@ export const TableOfContents = ({
         </nav>
         {footer && (
           <div
-            className="flex-none py-4 opacity-0 transition-all duration-700 translate-y-6"
+            className="flex-none py-4 transition-all duration-700 translate-y-6 opacity-0"
             ref={footerRef}
           >
             {footer}

package/src/components/Navigation/ThemeButton.tsx

@@ -3,7 +3,7 @@ import MoonIcon from '@heroicons/react/24/solid/MoonIcon';
 import SunIcon from '@heroicons/react/24/outline/SunIcon';
 import classNames from 'classnames';
 
-export function ThemeButton({ className = 'mx-3 h-8 w-8' }: { className?: string }) {
+export function ThemeButton({ className = 'w-8 h-8 mx-3' }: { className?: string }) {
   const { isDark, nextTheme } = useTheme();
   return (
     <button

package/src/components/Navigation/TopNav.tsx

@@ -57,7 +57,7 @@ function ExternalOrInternalLink({
 function NavItem({ item }: { item: SiteNavItem }) {
   if (!('children' in item)) {
     return (
-      <div className="relative grow-0 inline-block mx-2">
+      <div className="relative inline-block mx-2 grow-0">
         <ExternalOrInternalLink
           nav
           to={item.url ?? ''}
@@ -76,9 +76,9 @@ function NavItem({ item }: { item: SiteNavItem }) {
     );
   }
   return (
-    <Menu as="div" className="relative grow-0 inline-block mx-2">
+    <Menu as="div" className="relative inline-block mx-2 grow-0">
       <div className="inline-block">
-        <Menu.Button className="inline-flex items-center justify-center w-full mx-2 py-1 text-md font-medium text-stone-900 dark:text-white rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
+        <Menu.Button className="inline-flex items-center justify-center w-full py-1 mx-2 font-medium rounded-md text-md text-stone-900 dark:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
           <span>{item.title}</span>
           <ChevronDownIcon className="w-5 h-5 ml-2 -mr-1 text-violet-200 hover:text-violet-100" />
         </Menu.Button>
@@ -92,7 +92,7 @@ function NavItem({ item }: { item: SiteNavItem }) {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="origin-top-left absolute left-4 mt-2 w-48 rounded-sm shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <Menu.Items className="absolute w-48 py-1 mt-2 origin-top-left bg-white rounded-sm shadow-lg left-4 ring-1 ring-black ring-opacity-5 focus:outline-none">
           {item.children?.map((action) => (
             <Menu.Item key={action.url}>
               {/* This is really ugly, BUT, the action needs to be defined HERE or the click away doesn't work for some reason */}
@@ -131,7 +131,7 @@ function NavItem({ item }: { item: SiteNavItem }) {
 function NavItems({ nav }: { nav?: SiteManifest['nav'] }) {
   if (!nav) return null;
   return (
-    <div className="text-md flex-grow hidden lg:block">
+    <div className="flex-grow hidden text-md lg:block">
       {nav.map((item) => {
         return <NavItem key={'url' in item ? item.url : item.title} item={item} />;
       })}
@@ -144,10 +144,10 @@ function ActionMenu({ actions }: { actions?: SiteManifest['actions'] }) {
   return (
     <Menu as="div" className="relative">
       <div>
-        <Menu.Button className="bg-transparent flex text-sm rounded-full focus:outline-none">
+        <Menu.Button className="flex text-sm bg-transparent rounded-full focus:outline-none">
           <span className="sr-only">Open Menu</span>
           <div className="flex items-center text-stone-200 hover:text-white">
-            <EllipsisVerticalIcon className="h-8 w-8 p-1" />
+            <EllipsisVerticalIcon className="w-8 h-8 p-1" />
           </div>
         </Menu.Button>
       </div>
@@ -160,7 +160,7 @@ function ActionMenu({ actions }: { actions?: SiteManifest['actions'] }) {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="origin-top-right absolute right-0 mt-2 w-48 rounded-sm shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <Menu.Items className="absolute right-0 w-48 py-1 mt-2 origin-top-right bg-white rounded-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
           {actions?.map((action) => (
             <Menu.Item key={action.url}>
               {({ active }) => (
@@ -182,19 +182,46 @@ function ActionMenu({ actions }: { actions?: SiteManifest['actions'] }) {
   );
 }
 
-function HomeLink({ logo, logoText, name }: { logo?: string; logoText?: string; name?: string }) {
+function HomeLink({
+  logo,
+  logoDark,
+  logoText,
+  name,
+}: {
+  logo?: string;
+  logoDark?: string;
+  logoText?: string;
+  name?: string;
+}) {
   const Link = useLinkProvider();
   const baseurl = useBaseurl();
   const nothingSet = !logo && !logoText;
   return (
     <Link
-      className="flex items-center dark:text-white w-fit ml-3 md:ml-5 xl:ml-7"
+      className="flex items-center ml-3 dark:text-white w-fit md:ml-5 xl:ml-7"
       to={withBaseurl('/', baseurl)}
       prefetch="intent"
     >
       {logo && (
-        <div className="dark:bg-white dark:rounded p-1 mr-3">
-          <img src={logo} className="h-9" alt={logoText || name} height="2.25rem"></img>
+        <div
+          className={classNames('p-1 mr-3', {
+            'dark:bg-white dark:rounded': !logoDark,
+          })}
+        >
+          <img
+            src={logo}
+            className={classNames('h-9', { 'dark:hidden': !!logoDark })}
+            alt={logoText || name}
+            height="2.25rem"
+          ></img>
+          {logoDark && (
+            <img
+              src={logoDark}
+              className="hidden h-9 dark:block"
+              alt={logoText || name}
+              height="2.25rem"
+            ></img>
+          )}
         </div>
       )}
       <span
@@ -211,7 +238,8 @@ function HomeLink({ logo, logoText, name }: { logo?: string; logoText?: string;
 export function TopNav() {
   const [open, setOpen] = useNavOpen();
   const config = useSiteManifest();
-  const { logo, logo_text, logoText, actions, title, nav } = config ?? ({} as SiteManifest);
+  const { logo, logo_dark, logo_text, logoText, actions, title, nav } =
+    config ?? ({} as SiteManifest);
   return (
     <div className="bg-white/80 backdrop-blur dark:bg-stone-900/80 shadow dark:shadow-stone-700 p-3 md:px-8 fixed w-screen top-0 z-30 h-[60px]">
       <nav className="flex items-center justify-between flex-wrap max-w-[1440px] mx-auto">
@@ -223,15 +251,20 @@ export function TopNav() {
                 setOpen(!open);
               }}
             >
-              <MenuIcon className="h-8 w-8 p-1" />
+              <MenuIcon className="w-8 h-8 p-1" />
               <span className="sr-only">Open Menu</span>
             </button>
           </div>
-          <HomeLink name={title} logo={logo} logoText={logo_text || logoText} />
+          <HomeLink
+            name={title}
+            logo={logo}
+            logoDark={logo_dark}
+            logoText={logo_text || logoText}
+          />
         </div>
-        <div className="flex-grow flex items-center w-auto">
+        <div className="flex items-center flex-grow w-auto">
           <NavItems nav={nav} />
-          <div className="block flex-grow"></div>
+          <div className="flex-grow block"></div>
           <ThemeButton />
           <div className="block sm:hidden">
             <ActionMenu actions={actions} />
@@ -240,7 +273,7 @@ export function TopNav() {
             {actions?.map((action, index) => (
               <ExternalOrInternalLink
                 key={action.url || index}
-                className="inline-block text-md px-4 py-2 mx-1 leading-none border rounded border-stone-700 dark:border-white text-stone-700 dark:text-white hover:text-stone-500 dark:hover:text-neutral-800 hover:bg-neutral-100 mt-0"
+                className="inline-block px-4 py-2 mx-1 mt-0 leading-none border rounded text-md border-stone-700 dark:border-white text-stone-700 dark:text-white hover:text-stone-500 dark:hover:text-neutral-800 hover:bg-neutral-100"
                 to={action.url}
               >
                 {action.title}

package/src/loaders/utils.ts

@@ -96,7 +96,9 @@ export function updateSiteManifestStaticLinksInplace(
     if (!action.static) return;
     action.url = updateUrl(action.url);
   });
+  // TODO: this needs to be based on the template.yml in the future
   if (data.logo) data.logo = updateUrl(data.logo);
+  if (data.logo_dark) data.logo_dark = updateUrl(data.logo_dark);
   // Update the thumbnails to point at the CDN
   data.projects?.forEach((project) => {
     project.pages

package/src/pages/Article.tsx

@@ -1,49 +1,52 @@
 import React from 'react';
 import { ReferencesProvider } from '@myst-theme/providers';
-import { FrontmatterBlock } from '@myst-theme/frontmatter';
 import { Bibliography, ContentBlocks, FooterLinksBlock } from '../components';
 import { ErrorDocumentNotFound } from './ErrorDocumentNotFound';
 import { ErrorProjectNotFound } from './ErrorProjectNotFound';
 import type { PageLoader } from '../types';
-import { ThebeRenderMimeRegistryProvider, ThebeSessionProvider } from 'thebe-react';
 import type { GenericParent } from 'myst-common';
 import { SourceFileKind } from 'myst-common';
-import { EnableCompute } from '../components/EnableCompute';
-import { NotebookRunAll } from '../components/ComputeControls';
-import { NotebookProvider, BinderBadge, useComputeOptions } from '@myst-theme/jupyter';
+import {
+  useComputeOptions,
+  ExecuteScopeProvider,
+  BusyScopeProvider,
+  NotebookToolbar,
+  ConnectionStatusTray,
+  BinderBadge,
+} from '@myst-theme/jupyter';
+import { FrontmatterBlock } from '@myst-theme/frontmatter';
 
 export const ArticlePage = React.memo(function ({ article }: { article: PageLoader }) {
   const computeOptions = useComputeOptions();
   const canCompute = computeOptions.canCompute && (article.frontmatter as any)?.thebe !== false;
-  const { hide_title_block, hide_footer_links, binder } =
-    (article.frontmatter as any)?.design ?? {};
-  const isJupyter = article?.kind && article.kind === SourceFileKind.Notebook;
+  const { hide_title_block, hide_footer_links } = (article.frontmatter as any)?.design ?? {};
+
+  // take binder url from article frontmatter or fallback to project
+  const binderUrl = article.frontmatter.binder ?? computeOptions.binderBadgeUrl;
+
   return (
     <ReferencesProvider
       references={{ ...article.references, article: article.mdast }}
       frontmatter={article.frontmatter}
     >
-      <ThebeRenderMimeRegistryProvider>
-        <ThebeSessionProvider start={false} name={article.slug}>
+      <BusyScopeProvider>
+        <ExecuteScopeProvider contents={article}>
           {!hide_title_block && (
             <FrontmatterBlock kind={article.kind} frontmatter={article.frontmatter} />
           )}
-          <NotebookProvider siteConfig={false} page={article}>
-            <div className="flex items-center">
-              <div className="flex-grow"></div>
-              {binder && <BinderBadge binder={binder} />}
-              {canCompute && isJupyter && (
-                <EnableCompute canCompute={true} key={article.slug}>
-                  <NotebookRunAll />
-                </EnableCompute>
-              )}
+          {binderUrl && !canCompute && (
+            <div className="flex justify-end">
+              <BinderBadge binder={binderUrl} />
             </div>
-            <ContentBlocks pageKind={article.kind} mdast={article.mdast as GenericParent} />
-            <Bibliography />
-            {!hide_footer_links && <FooterLinksBlock links={article.footer} />}
-          </NotebookProvider>
-        </ThebeSessionProvider>
-      </ThebeRenderMimeRegistryProvider>
+          )}
+          {canCompute && article.kind === SourceFileKind.Notebook && <NotebookToolbar showLaunch />}
+          {canCompute && article.kind === SourceFileKind.Article && <NotebookToolbar />}
+          <ContentBlocks pageKind={article.kind} mdast={article.mdast as GenericParent} />
+          <Bibliography />
+          <ConnectionStatusTray />
+          {!hide_footer_links && <FooterLinksBlock links={article.footer} />}
+        </ExecuteScopeProvider>
+      </BusyScopeProvider>
     </ReferencesProvider>
   );
 });

package/src/pages/Root.tsx

@@ -63,7 +63,7 @@ export function Document({
       <body className="m-0 transition-colors duration-500 bg-white dark:bg-stone-900">
         <ThemeProvider theme={theme} renderers={renderers} {...links}>
           <BaseUrlProvider baseurl={baseurl}>
-            <ThebeBundleLoaderProvider loadThebeLite>
+            <ThebeBundleLoaderProvider loadThebeLite publicPath={baseurl}>
               <SiteProvider config={config}>
                 <ConfiguredThebeServerProvider>{children}</ConfiguredThebeServerProvider>
               </SiteProvider>

package/src/components/ComputeControls.tsx

@@ -1,131 +0,0 @@
-import { Spinner } from './Spinner';
-import PlayCircleIcon from '@heroicons/react/24/outline/PlayCircleIcon';
-import ArrowPathIcon from '@heroicons/react/24/outline/ArrowPathIcon';
-import MinusCircleIcon from '@heroicons/react/24/outline/MinusCircleIcon';
-import ArrowTopRightOnSquareIcon from '@heroicons/react/24/outline/ArrowTopRightOnSquareIcon';
-import classNames from 'classnames';
-import type { NotebookExecuteOptions } from 'thebe-react';
-import { useThebeServer } from 'thebe-react';
-import type { IThebeCellExecuteReturn } from 'thebe-core';
-import { useMDASTNotebook, useNotebookCellExecution } from '@myst-theme/jupyter';
-
-export function Run({
-  ready,
-  executing,
-  disabled,
-  execute,
-}: {
-  ready: boolean;
-  executing: boolean;
-  disabled?: boolean;
-  execute: (
-    options?: NotebookExecuteOptions | undefined,
-  ) => Promise<(IThebeCellExecuteReturn | null)[]>;
-}) {
-  return (
-    <div className="flex relative text-sm">
-      <button
-        className={classNames(
-          'cursor-pointer text-gray-700 active:text-green-700 hover:opacity-100',
-          {
-            'opacity-10 hover:opacity-10': executing,
-            'opacity-60': !executing,
-          },
-        )}
-        disabled={disabled || !ready || executing}
-        onClick={() => execute()}
-      >
-        <PlayCircleIcon className="h-6 w-6 inline-block align-top" title="run all cells" />
-      </button>
-      {executing && (
-        <span className="absolute top-0 left-0 z-10 w-[22px] h-[22px] opacity-100">
-          <Spinner size={24} />
-        </span>
-      )}
-    </div>
-  );
-}
-
-export function Clear({
-  ready,
-  executing,
-  disabled,
-  clear,
-}: {
-  ready: boolean;
-  executing: boolean;
-  disabled?: boolean;
-  clear: () => void;
-}) {
-  return (
-    <button
-      className="flex cursor-pointer text-gray-700 active:text-green-700 opacity-60 hover:opacity-100"
-      disabled={disabled || !ready || executing}
-      onClick={() => clear()}
-    >
-      <MinusCircleIcon className="h-6 w-6 inline-block align-top" title="clear all outputs" />
-    </button>
-  );
-}
-
-export function RunCell({ id }: { id: string }) {
-  const exec = useNotebookCellExecution(id);
-  if (!exec?.ready) return null;
-  const { ready, executing, notebookIsExecuting, execute } = exec;
-  return (
-    <Run ready={ready} executing={executing} disabled={notebookIsExecuting} execute={execute} />
-  );
-}
-
-export function ClearCell({ id }: { id: string }) {
-  const exec = useNotebookCellExecution(id);
-  if (!exec?.ready) return null;
-  const { ready, executing, notebookIsExecuting, clear } = exec;
-  return <Clear ready={ready} executing={executing} disabled={notebookIsExecuting} clear={clear} />;
-}
-
-export function NotebookRunAll() {
-  const { ready: serverReady, server } = useThebeServer();
-  const exec = useMDASTNotebook();
-
-  if (!exec?.ready) return null;
-  const { ready, executing, executeAll, restart, clear } = exec;
-
-  const clickLaunchInJupyter = () => {
-    if (!serverReady || !server?.settings) return;
-    window.open(server.settings.baseUrl, '_blank');
-  };
-
-  return (
-    <div className="flex">
-      <div className="group flex relative space-x-1">
-        <Run
-          ready={ready}
-          executing={executing}
-          execute={(options) => {
-            clear();
-            return executeAll(options);
-          }}
-        />
-        <button
-          className="flex items-center cursor-pointer text-gray-700 active:text-green-700 opacity-60 hover:opacity-100"
-          disabled={!ready || executing}
-          onClick={() => restart()}
-        >
-          <ArrowPathIcon className="h-6 w-6" title="restart kernel" />
-        </button>
-        <Clear ready={ready} executing={executing} clear={clear} />
-        <button
-          className="flex items-center cursor-pointer text-gray-700 active:text-green-700 opacity-60 hover:opacity-100"
-          disabled={!ready}
-          onClick={clickLaunchInJupyter}
-        >
-          <ArrowTopRightOnSquareIcon
-            className="h-6 w-6 inline-block align-top"
-            title="launch in juptyer"
-          />
-        </button>
-      </div>
-    </div>
-  );
-}

package/src/components/EnableCompute.tsx

@@ -1,64 +0,0 @@
-import { useThebeLoader, useThebeServer, useThebeSession } from 'thebe-react';
-import PowerIcon from '@heroicons/react/24/outline/PowerIcon';
-import { useHasNotebookProvider } from '@myst-theme/jupyter';
-import { useNavigation } from '@remix-run/react';
-import { useEffect, useState } from 'react';
-
-export function EnableCompute({
-  canCompute,
-  children,
-}: React.PropsWithChildren<{ canCompute: boolean }>) {
-  const { load, loading, core } = useThebeLoader();
-  const { connect, connecting, ready: serverReady, error: serverError } = useThebeServer();
-  const {
-    start,
-    starting,
-    shutdown,
-    session,
-    ready: sessionReady,
-    error: sessionError,
-  } = useThebeSession();
-  const hasNotebookProvider = useHasNotebookProvider();
-  const navigation = useNavigation();
-  const [enabling, setEnabling] = useState(false);
-  const [enabled, setEnabled] = useState(false);
-  const busy = enabling || loading || connecting || starting;
-
-  useEffect(() => {
-    if (!enabling) return;
-    if (!core) return load();
-    if (!serverReady) return connect();
-    if (!sessionReady) start();
-    if (sessionReady) {
-      setEnabled(true);
-      setEnabling(false);
-    }
-  }, [enabling, core, serverReady, sessionReady]);
-
-  if (!canCompute || !hasNotebookProvider) return null;
-  let classes = 'flex text-center mr-1 cursor-pointer rounded-full';
-  const idleClasses = 'text-blue-700 hover:opacity-100 opacity-60';
-  const busyClasses = 'bg-yellow-700 text-yellow-700 opacity-100 font-semibold';
-  const readyClasses = 'bg-green-700 text-green-700 opacity-100 font-semibold';
-  const errorClasses = 'bg-red-700 text-red-700 opacity-100';
-
-  if (busy) classes += busyClasses;
-  else if (serverReady && sessionReady) classes += readyClasses;
-  else if (serverError || sessionError) classes += errorClasses;
-  else classes += idleClasses;
-
-  useEffect(() => {
-    if (navigation.state === 'loading') {
-      shutdown();
-    }
-  }, [shutdown, navigation]);
-
-  return (
-    <div className="flex mx-1 items-center mb-2">
-      <button className={classes} onClick={() => setEnabling(true)} disabled={enabling || enabled}>
-        <PowerIcon className="h-6 w-6 mx-1 inline-block align-top" title="enable compute" />
-      </button>
-      {enabled && <>{children}</>}
-    </div>
-  );
-}