@tutorialkit-rb/react 0.1.5 → 0.1.6

package/dist/Panels/TerminalPanel.js

@@ -9,6 +9,7 @@ const ICON_MAP = new Map([
 ]);
 export function TerminalPanel({ theme, tutorialStore }) {
     const terminalConfig = useStore(tutorialStore.terminalConfig);
+    const isPreparing = useStore(tutorialStore.isPreparing);
     const terminalRefs = useRef({});
     const [domLoaded, setDomLoaded] = useState(false);
     // select the terminal tab by default
@@ -37,9 +38,13 @@ export function TerminalPanel({ theme, tutorialStore }) {
                                                 'group-hover:text-tk-elements-panel-headerTab-iconColorHover': !selected,
                                                 'text-tk-elements-panel-headerTab-iconColorActive': selected,
                                             }) }), title] }) }, index));
-                        }) }) }) }), _jsx("div", { className: "h-full overflow-hidden", children: domLoaded && (_jsx(Suspense, { children: terminalConfig.panels.map(({ id, type }, index) => (_jsx(Terminal, { role: "tabpanel", id: `tk-terminal-tapbanel-${index}`, "aria-labelledby": `tk-terminal-tab-${index}`, className: tabIndex !== index ? 'hidden h-full' : 'h-full', theme: theme, readonly: type === 'output', ref: (ref) => (terminalRefs.current[index] = ref), onTerminalReady: (terminal) => {
-                            tutorialStore.attachTerminal(id, terminal);
-                        }, onTerminalResize: (cols, rows) => {
-                            tutorialStore.onTerminalResize(cols, rows);
-                        } }, id))) })) })] }));
+                        }) }) }) }), _jsx("div", { className: "h-full overflow-hidden relative", children: domLoaded && (_jsx(Suspense, { children: terminalConfig.panels.map(({ id, type }, index) => {
+                        const isTerminalPanel = type === 'terminal';
+                        const showPreparingMessage = isTerminalPanel && isPreparing;
+                        return (_jsx("div", { role: "tabpanel", id: `tk-terminal-tapbanel-${index}`, "aria-labelledby": `tk-terminal-tab-${index}`, className: tabIndex !== index ? 'hidden h-full' : 'h-full', children: showPreparingMessage ? (_jsx("div", { className: "h-full bg-tk-elements-terminal-backgroundColor text-tk-elements-terminal-textColor px-4 py-2", style: { fontFamily: 'Menlo, courier-new, courier, monospace', fontSize: '13px' }, children: "Preparing runtime..." })) : (_jsx(Terminal, { className: "h-full", theme: theme, readonly: type === 'output', ref: (ref) => (terminalRefs.current[index] = ref), onTerminalReady: (terminal) => {
+                                    tutorialStore.attachTerminal(id, terminal);
+                                }, onTerminalResize: (cols, rows) => {
+                                    tutorialStore.onTerminalResize(cols, rows);
+                                } })) }, id));
+                    }) })) })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tutorialkit-rb/react",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "TutorialKit's React components and utilities",
   "author": "StackBlitz Inc.",
   "type": "module",
@@ -90,8 +90,8 @@
     "picomatch": "^4.0.2",
     "react": "^18.3.1",
     "react-resizable-panels": "^2.0.19",
-    "@tutorialkit-rb/runtime": "0.1.5",
-    "@tutorialkit-rb/theme": "0.1.5"
+    "@tutorialkit-rb/theme": "0.1.6",
+    "@tutorialkit-rb/runtime": "0.1.6"
   },
   "devDependencies": {
     "@codemirror/search": "^6.5.6",
@@ -101,7 +101,7 @@
     "execa": "^9.2.0",
     "typescript": "^5.4.5",
     "vitest": "^3.0.5",
-    "@tutorialkit-rb/types": "0.1.5"
+    "@tutorialkit-rb/types": "0.1.6"
   },
   "scripts": {
     "build": "node ./scripts/build.js",