@tutorialkit-rb/react 1.5.2-rb.0.1.0

package/dist/BootScreen.d.ts

@@ -0,0 +1,7 @@
+import type { TutorialStore } from '@tutorialkit-rb/runtime';
+interface Props {
+    className?: string;
+    tutorialStore: TutorialStore;
+}
+export declare function BootScreen({ className, tutorialStore }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/BootScreen.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStore } from '@nanostores/react';
+import { useEffect, useState } from 'react';
+import { classNames } from './utils/classnames.js';
+export function BootScreen({ className, tutorialStore }) {
+    const steps = useStore(tutorialStore.steps);
+    const { startWebContainerText, noPreviewNorStepsText } = tutorialStore.lesson?.data.i18n ?? {};
+    const bootStatus = useStore(tutorialStore.bootStatus);
+    // workaround to prevent the hydration error caused by bootStatus always being 'unknown' server-side
+    const [isClient, setIsClient] = useState(false);
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
+    return (_jsx("div", { className: classNames('flex-grow w-full flex justify-center items-center text-sm', className), children: isClient && bootStatus === 'blocked' ? (_jsx(Button, { onClick: () => tutorialStore.unblockBoot(), children: startWebContainerText })) : steps ? (_jsx("ul", { className: "space-y-1", children: steps.map((step, index) => (_jsxs("li", { className: "flex items-center", children: [step.status === 'idle' ? (_jsx("div", { className: "inline-block mr-2 i-ph-circle-duotone scale-120 text-tk-elements-status-disabled-iconColor" })) : step.status === 'running' ? (_jsx("div", { className: "inline-block mr-2 i-svg-spinners-90-ring-with-bg scale-105 text-tk-elements-status-active-iconColor" })) : step.status === 'completed' ? (_jsx("div", { className: "inline-block mr-2 i-ph-check-circle-duotone scale-120 text-tk-elements-status-positive-iconColor" })) : step.status === 'failed' ? (_jsx("div", { className: "inline-block mr-2 i-ph-x-circle-duotone scale-120 text-tk-elements-status-negative-iconColor" })) : (_jsx("div", { className: "inline-block mr-2 i-ph-minus-circle-duotone scale-120 text-tk-elements-status-skipped-iconColor" })), _jsx("span", { className: toTextColor(step.status), children: step.title })] }, index))) })) : (noPreviewNorStepsText) }));
+}
+function toTextColor(status) {
+    switch (status) {
+        case 'completed': {
+            return 'text-tk-elements-status-positive-textColor';
+        }
+        case 'failed': {
+            return 'text-tk-elements-status-negative-textColor';
+        }
+        case 'idle': {
+            return 'text-tk-elements-status-disabled-textColor';
+        }
+        case 'running': {
+            return 'text-tk-elements-status-active-textColor';
+        }
+        case 'skipped': {
+            return 'text-tk-elements-status-skipped-textColor';
+        }
+    }
+}
+function Button({ children, onClick }) {
+    return (_jsx("button", { className: "flex font-500 disabled:opacity-32 items-center text-sm ml-2 px-4 py-1 rounded-md bg-tk-elements-bootScreen-primaryButton-backgroundColor text-tk-elements-bootScreen-primaryButton-textColor hover:bg-tk-elements-bootScreen-primaryButton-backgroundColorHover hover:text-tk-elements-bootScreen-primaryButton-textColorHover", onClick: onClick, children: children }));
+}

package/dist/Button.d.ts

@@ -0,0 +1,6 @@
+import { type ComponentProps } from 'react';
+interface Props extends ComponentProps<'button'> {
+    variant?: 'primary' | 'secondary';
+}
+export declare const Button: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/Button.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { classNames } from './utils/classnames.js';
+export const Button = forwardRef(({ className, variant = 'primary', ...props }, ref) => {
+    return (_jsx("button", { ref: ref, ...props, className: classNames(className, 'flex items-center font-500 text-sm px-4 py-1 rounded-md disabled:opacity-32', variant === 'primary' &&
+            'bg-tk-elements-primaryButton-backgroundColor text-tk-elements-primaryButton-textColor', !props.disabled &&
+            variant === 'primary' &&
+            'hover:bg-tk-elements-primaryButton-backgroundColorHover hover:text-tk-elements-primaryButton-textColorHover', variant === 'secondary' &&
+            'bg-tk-elements-secondaryButton-backgroundColor text-tk-elements-secondaryButton-textColor', !props.disabled &&
+            variant === 'secondary' &&
+            'hover:bg-tk-elements-secondaryButton-backgroundColorHover hover:text-tk-elements-secondaryButton-textColorHover') }));
+});

package/dist/Nav.d.ts

@@ -0,0 +1,7 @@
+import { type Lesson, type NavList } from '@tutorialkit-rb/types';
+interface Props {
+    lesson: Lesson;
+    navList: NavList;
+}
+export declare function Nav({ lesson: currentLesson, navList }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Nav.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Accordion from '@radix-ui/react-accordion';
+import { interpolateString } from '@tutorialkit-rb/types';
+import { AnimatePresence, cubicBezier, motion } from 'framer-motion';
+import { useRef, useState } from 'react';
+import { useOutsideClick } from './hooks/useOutsideClick.js';
+import navStyles from './styles/nav.module.css';
+import { classNames } from './utils/classnames.js';
+const dropdownEasing = cubicBezier(0.4, 0, 0.2, 1);
+export function Nav({ lesson: currentLesson, navList }) {
+    const menuRef = useRef(null);
+    const [showDropdown, setShowDropdown] = useState(false);
+    const { prev, next } = currentLesson;
+    const activeItems = [
+        currentLesson.part?.id || currentLesson.id,
+        currentLesson.chapter?.id || currentLesson.id,
+        currentLesson.id,
+    ];
+    useOutsideClick(menuRef, () => setShowDropdown(false));
+    return (_jsxs("header", { className: "grid grid-cols-1 sm:grid-cols-[auto_minmax(0,1fr)_auto] h-[82px] gap-0.5 py-4 px-1 text-sm", children: [_jsx("a", { className: classNames('hidden sm:flex cursor-pointer h-full items-center justify-center w-[40px] text-tk-elements-breadcrumbs-navButton-iconColor', !prev ? 'opacity-32 pointer-events-none' : 'hover:text-tk-elements-breadcrumbs-navButton-iconColorHover'), "aria-disabled": !prev, href: prev?.href, children: _jsx("span", { className: "i-ph-arrow-left scale-120" }) }), _jsx("div", { className: "relative", children: _jsxs("div", { "data-state": `${showDropdown ? 'open' : 'closed'}`, className: classNames(navStyles.NavContainer, 'absolute mx-4 sm:mx-0 z-1 left-0 right-0 rounded-[8px] border overflow-hidden z-50'), ref: menuRef, children: [_jsxs("button", { className: classNames(navStyles.ToggleButton, 'flex-1 flex items-center text-left py-3 px-3 w-full overflow-hidden'), onClick: () => setShowDropdown(!showDropdown), children: [_jsxs("div", { className: "flex items-center gap-1 font-light truncate", children: [currentLesson.part && (_jsxs(_Fragment, { children: [_jsx("span", { className: "hidden sm:inline", children: currentLesson.part.title }), _jsx("span", { className: classNames('hidden sm:inline', navStyles.Divider), children: "/" })] })), currentLesson.chapter && (_jsxs(_Fragment, { children: [_jsx("span", { className: "hidden sm:inline", children: currentLesson.chapter.title }), _jsx("span", { className: classNames('hidden sm:inline', navStyles.Divider), children: "/" })] })), _jsx("strong", { className: "font-semibold", children: currentLesson.data.title })] }), _jsx("div", { className: classNames(navStyles.ToggleButtonIcon, 'ml-auto w-[30px]', {
+                                        'i-ph-caret-up-bold': showDropdown,
+                                        'i-ph-caret-down-bold': !showDropdown,
+                                    }) })] }), _jsx(AnimatePresence, { children: showDropdown && (_jsx(motion.nav, { initial: { height: 0, y: 0 }, animate: { height: 'auto', y: 0 }, exit: { height: 0, y: 0 }, transition: { duration: 0.2, ease: dropdownEasing }, className: " overflow-hidden transition-theme bg-tk-elements-breadcrumbs-dropdown-backgroundColor", children: _jsx(NavListComponent, { className: "py-5 pl-5 border-t border-tk-elements-breadcrumbs-dropdown-borderColor overflow-auto max-h-[60dvh]", items: navList, activeItems: activeItems, i18n: currentLesson.data.i18n, level: 0 }) })) })] }) }), _jsx("a", { className: classNames('hidden sm:flex cursor-pointer h-full items-center justify-center w-[40px] text-tk-elements-breadcrumbs-navButton-iconColor', !next ? 'opacity-32 pointer-events-none' : 'hover:text-tk-elements-breadcrumbs-navButton-iconColorHover'), "aria-disabled": !next, href: next?.href, children: _jsx("span", { className: "i-ph-arrow-right scale-120" }) })] }));
+}
+function NavListComponent({ items, level, activeItems, className, i18n, }) {
+    return (_jsx(Accordion.Root, { asChild: true, collapsible: true, type: "single", defaultValue: `${level}-${activeItems[level]}`, children: _jsx("ul", { className: classNames(className), children: items.map((item, index) => (_jsx(NavListItem, { ...item, index: index, level: level, activeItems: activeItems, i18n: i18n }, item.id))) }) }));
+}
+function NavListItem({ level, type, index, i18n, activeItems, id, title, href, sections }) {
+    const isActive = activeItems[level] === id;
+    if (!sections) {
+        return (_jsx("li", { className: "mr-3 pl-4.5", children: _jsx("a", { className: classNames('w-full inline-block border border-transparent pr-3 transition-theme text-tk-elements-breadcrumbs-dropdown-lessonTextColor hover:text-tk-elements-breadcrumbs-dropdown-lessonTextColorHover px-3 py-1 rounded-1', isActive
+                    ? 'font-semibold text-tk-elements-breadcrumbs-dropdown-lessonTextColorSelected bg-tk-elements-breadcrumbs-dropdown-lessonBackgroundColorSelected'
+                    : 'bg-tk-elements-breadcrumbs-dropdown-lessonBackgroundColor'), href: href, children: title }) }));
+    }
+    return (_jsx(Accordion.Item, { asChild: true, value: `${level}-${id}`, children: _jsxs("li", { className: "mt-1.5", children: [_jsxs(Accordion.Trigger, { className: classNames(navStyles.AccordionTrigger, 'flex items-center gap-1 w-full hover:text-primary-700', {
+                        [`font-semibold ${navStyles.AccordionTriggerActive}`]: isActive,
+                    }), children: [_jsx("span", { className: `${navStyles.AccordionTriggerIcon} i-ph-caret-right-bold scale-80 text-gray-300` }), _jsx("span", { children: type === 'part' ? interpolateString(i18n.partTemplate, { index: index + 1, title }) : title })] }), _jsx(Accordion.Content, { className: navStyles.AccordionContent, children: _jsx(NavListComponent, { className: "mt-1.5 pl-4.5", items: sections, activeItems: activeItems, i18n: i18n, level: level + 1 }) })] }) }));
+}

package/dist/Panels/EditorPanel.d.ts

@@ -0,0 +1,25 @@
+import type { I18n } from '@tutorialkit-rb/types';
+import { type ComponentProps } from 'react';
+import { type EditorDocument, type OnChangeCallback as OnEditorChange, type OnScrollCallback as OnEditorScroll } from '../core/CodeMirrorEditor/index.js';
+import { FileTree } from '../core/FileTree.js';
+import type { Theme } from '../core/types.js';
+interface Props {
+    theme: Theme;
+    id: unknown;
+    files: ComponentProps<typeof FileTree>['files'];
+    i18n: I18n;
+    hideRoot?: boolean;
+    fileTreeScope?: string;
+    showFileTree?: boolean;
+    helpAction?: 'solve' | 'reset';
+    editorDocument?: EditorDocument;
+    selectedFile?: string | undefined;
+    allowEditPatterns?: ComponentProps<typeof FileTree>['allowEditPatterns'];
+    onEditorChange?: OnEditorChange;
+    onEditorScroll?: OnEditorScroll;
+    onHelpClick?: () => void;
+    onFileSelect?: (value?: string) => void;
+    onFileTreeChange?: ComponentProps<typeof FileTree>['onFileChange'];
+}
+export declare function EditorPanel({ theme, id, files, i18n, hideRoot, fileTreeScope, showFileTree, helpAction, editorDocument, selectedFile, allowEditPatterns, onEditorChange, onEditorScroll, onHelpClick, onFileSelect, onFileTreeChange, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Panels/EditorPanel.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+import { CodeMirrorEditor, } from '../core/CodeMirrorEditor/index.js';
+import { FileTree } from '../core/FileTree.js';
+import resizePanelStyles from '../styles/resize-panel.module.css';
+import { isMobile } from '../utils/mobile.js';
+const DEFAULT_FILE_TREE_SIZE = 25;
+export function EditorPanel({ theme, id, files, i18n, hideRoot, fileTreeScope, showFileTree = true, helpAction, editorDocument, selectedFile, allowEditPatterns, onEditorChange, onEditorScroll, onHelpClick, onFileSelect, onFileTreeChange, }) {
+    const fileTreePanelRef = useRef(null);
+    useEffect(() => {
+        const { current: fileTreePanel } = fileTreePanelRef;
+        if (!fileTreePanel) {
+            return;
+        }
+        if (showFileTree) {
+            if (fileTreePanel.isCollapsed()) {
+                fileTreePanel.resize(DEFAULT_FILE_TREE_SIZE);
+            }
+        }
+        else if (!showFileTree) {
+            fileTreePanel.collapse();
+        }
+    }, [id]);
+    return (_jsxs(PanelGroup, { className: "bg-tk-elements-panel-backgroundColor", direction: "horizontal", children: [_jsxs(Panel, { className: "flex flex-col", collapsible: true, defaultSize: 0, minSize: 10, ref: fileTreePanelRef, children: [_jsx("div", { className: "panel-header border-r border-b border-tk-elements-app-borderColor", children: _jsxs("div", { className: "panel-title", children: [_jsx("div", { className: "panel-icon i-ph-tree-structure-duotone shrink-0" }), _jsx("span", { className: "text-sm", children: i18n.filesTitleText })] }) }), _jsx(FileTree, { className: "flex flex-col flex-grow py-2 border-r border-tk-elements-app-borderColor text-sm overflow-y-auto overflow-x-hidden", i18n: i18n, selectedFile: selectedFile, hideRoot: hideRoot ?? true, files: files, scope: fileTreeScope, allowEditPatterns: allowEditPatterns, onFileSelect: onFileSelect, onFileChange: onFileTreeChange })] }), _jsx(PanelResizeHandle, { disabled: !showFileTree, className: resizePanelStyles.PanelResizeHandle, hitAreaMargins: { fine: 8, coarse: 8 } }), _jsxs(Panel, { className: "flex flex-col", defaultSize: 100, minSize: 10, children: [_jsx(FileTab, { i18n: i18n, editorDocument: editorDocument, onHelpClick: onHelpClick, helpAction: helpAction }), _jsx("div", { className: "h-full flex-1 overflow-hidden", children: _jsx(CodeMirrorEditor, { className: "h-full", theme: theme, id: id, doc: editorDocument, autoFocusOnDocumentChange: !isMobile(), onScroll: onEditorScroll, onChange: onEditorChange }) })] })] }));
+}
+function FileTab({ i18n, editorDocument, helpAction, onHelpClick }) {
+    const filePath = editorDocument?.filePath;
+    const fileName = filePath?.split('/').at(-1) ?? '';
+    const icon = fileName ? getFileIcon(fileName) : '';
+    return (_jsxs("div", { className: "panel-header border-b border-tk-elements-app-borderColor flex justify-between", children: [_jsxs("div", { className: "panel-title", children: [_jsx("div", { className: `panel-icon scale-125 ${icon}` }), _jsx("span", { className: "text-sm", children: fileName })] }), !!helpAction && (_jsxs("button", { onClick: onHelpClick, disabled: !onHelpClick, className: "panel-button px-2 py-0.5 -mr-1 -my-1", children: [helpAction === 'solve' && _jsx("div", { className: "i-ph-lightbulb-duotone text-lg" }), helpAction === 'solve' && i18n.solveButtonText, helpAction === 'reset' && _jsx("div", { className: "i-ph-clock-counter-clockwise-duotone" }), helpAction === 'reset' && i18n.resetButtonText] }))] }));
+}
+function getFileIcon(fileName) {
+    const extension = fileName.split('.').at(-1);
+    if (!extension) {
+        console.error('Cannot infer file type');
+        return null;
+    }
+    switch (extension) {
+        case 'ts': {
+            return 'i-languages-ts?mask';
+        }
+        case 'cjs':
+        case 'mjs':
+        case 'js': {
+            return 'i-languages-js?mask';
+        }
+        case 'html': {
+            return 'i-languages-html?mask';
+        }
+        case 'css': {
+            return 'i-languages-css?mask';
+        }
+        case 'scss':
+        case 'sass': {
+            return 'i-languages-sass?mask';
+        }
+        case 'md': {
+            return 'i-languages-markdown?mask';
+        }
+        case 'json': {
+            return 'i-languages-json?mask';
+        }
+        case 'rb': {
+            return 'i-languages-ruby?mask';
+        }
+        case 'ru': {
+            return 'i-languages-ruby?mask';
+        }
+        case 'erb': {
+            return 'i-languages-erb?mask';
+        }
+        case 'gif':
+        case 'jpg':
+        case 'jpeg':
+        case 'png': {
+            return 'i-ph-image';
+        }
+        default: {
+            return null;
+        }
+    }
+}

package/dist/Panels/PreviewPanel.d.ts

@@ -0,0 +1,20 @@
+import type { TutorialStore } from '@tutorialkit-rb/runtime';
+import type { I18n } from '@tutorialkit-rb/types';
+interface Props {
+    showToggleTerminal?: boolean;
+    toggleTerminal?: () => void;
+    tutorialStore: TutorialStore;
+    i18n: I18n;
+}
+export type ImperativePreviewHandle = {
+    reload: () => void;
+};
+export declare const PreviewPanel: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<ImperativePreviewHandle>>>;
+declare global {
+    interface Document {
+        featurePolicy: {
+            allowedFeatures(): string[];
+        } | undefined;
+    }
+}
+export {};

package/dist/Panels/PreviewPanel.js

@@ -0,0 +1,166 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStore } from '@nanostores/react';
+import { reloadPreview } from '@webcontainer/api/utils';
+import { createElement, forwardRef, memo, useCallback, useState, useEffect, useImperativeHandle, useRef } from 'react';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+import { BootScreen } from '../BootScreen.js';
+import resizePanelStyles from '../styles/resize-panel.module.css';
+import { classNames } from '../utils/classnames.js';
+const previewsContainer = globalThis.document ? document.getElementById('previews-container') : {};
+export const PreviewPanel = memo(forwardRef(({ showToggleTerminal, toggleTerminal, i18n, tutorialStore }, ref) => {
+    const expectedPreviews = useStore(tutorialStore.previews);
+    const iframeRefs = useRef([]);
+    const onResize = useCallback(() => {
+        for (const { ref, container } of iframeRefs.current) {
+            if (!ref || !container) {
+                continue;
+            }
+            const { left, top, width, height } = container.getBoundingClientRect();
+            ref.style.left = `${left}px`;
+            ref.style.top = `${top}px`;
+            ref.style.height = `${height}px`;
+            ref.style.width = `${width}px`;
+        }
+    }, []);
+    const activePreviewsCount = expectedPreviews.reduce((count, preview) => (preview.ready ? count + 1 : count), 0);
+    const hasPreviews = activePreviewsCount > 0;
+    useImperativeHandle(ref, () => ({
+        reload: () => {
+            for (const iframe of iframeRefs.current) {
+                if (iframe.ref) {
+                    iframe.ref.src = iframe.ref.src;
+                }
+            }
+        },
+    }), []);
+    useEffect(() => {
+        // we update the iframes position at max fps if we have any
+        if (hasPreviews) {
+            const cancel = requestAnimationFrameLoop(onResize);
+            previewsContainer.style.display = 'block';
+            return () => {
+                previewsContainer.style.display = 'none';
+                cancel();
+            };
+        }
+        return undefined;
+    }, [hasPreviews]);
+    adjustLength(iframeRefs.current, activePreviewsCount, newIframeRef);
+    preparePreviewsContainer(activePreviewsCount);
+    // update preview refs
+    for (const [index, iframeRef] of iframeRefs.current.entries()) {
+        if (!iframeRef.ref) {
+            iframeRef.ref = previewsContainer.children.item(index);
+        }
+    }
+    if (!hasPreviews) {
+        return (_jsxs("div", { className: "panel-container transition-theme bg-tk-elements-panel-backgroundColor text-tk-elements-panel-textColor", children: [_jsxs("div", { className: "panel-header border-b border-tk-elements-app-borderColor justify-between", children: [_jsxs("div", { className: "panel-title", children: [_jsx("div", { className: "panel-icon i-ph-lightning-duotone" }), _jsx("span", { className: "text-sm", children: i18n.prepareEnvironmentTitleText })] }), showToggleTerminal && (_jsxs("button", { className: "panel-button px-2 py-0.5 -mr-1 -my-1", title: "Toggle Terminal", onClick: () => toggleTerminal?.(), children: [_jsx("span", { className: "panel-button-icon i-ph-terminal-window-duotone" }), _jsx("span", { className: "text-sm", children: i18n.toggleTerminalButtonText })] }))] }), _jsx(BootScreen, { tutorialStore: tutorialStore })] }));
+    }
+    const previews = expectedPreviews.filter((preview) => preview.ready);
+    const defaultSize = 100 / previews.length;
+    const minSize = 20;
+    const children = [];
+    for (const [index, preview] of previews.entries()) {
+        children.push(_jsx(Panel, { defaultSize: defaultSize, minSize: minSize, children: _jsx(Preview, { iframe: iframeRefs.current[index], preview: preview, previewCount: previews.length, first: index === 0, last: index === previews.length - 1, toggleTerminal: toggleTerminal, i18n: i18n }) }));
+        if (index !== previews.length - 1) {
+            children.push(_jsx(PanelResizeHandle, { className: resizePanelStyles.PanelResizeHandle }));
+        }
+    }
+    return createElement(PanelGroup, { direction: 'horizontal' }, ...children);
+}));
+PreviewPanel.displayName = 'PreviewPanel';
+function Preview({ preview, iframe, previewCount, first, last, toggleTerminal, i18n }) {
+    const previewContainerRef = useRef(null);
+    const [currentUrlPath, setCurrentUrlPath] = useState('');
+    useEffect(() => {
+        if (!iframe.ref) {
+            return;
+        }
+        iframe.container = previewContainerRef.current;
+        if (preview.url) {
+            iframe.ref.src = preview.url;
+        }
+        if (preview.title) {
+            iframe.ref.title = preview.title;
+        }
+    }, [preview.url, iframe.ref]);
+    useEffect(() => {
+        if (!iframe.ref) {
+            return;
+        }
+        const handleLoadMessage = (event) => {
+            if (event.data && event.data.type === '$locationChange') {
+                const iframeSrc = event.data.location.href;
+                if (iframeSrc) {
+                    const url = new URL(iframeSrc);
+                    const path = url.pathname.replace('/', '') + url.search;
+                    setCurrentUrlPath(path);
+                }
+            }
+        };
+        window.addEventListener('message', handleLoadMessage);
+        return () => {
+            window.removeEventListener('message', handleLoadMessage);
+        };
+    }, [iframe.ref]);
+    function reload() {
+        if (iframe.ref) {
+            reloadPreview(iframe.ref);
+        }
+    }
+    return (_jsxs("div", { className: "panel-container", children: [_jsxs("div", { className: classNames('panel-header border-b border-tk-elements-app-borderColor justify-between', {
+                    'border-l border-tk-elements-app-borderColor': !first,
+                }), children: [_jsxs("div", { className: "panel-title", children: [_jsx("button", { onClick: reload, title: i18n.reloadPreviewTitle, className: "panel-button rounded-full p-1.5 -my-1.5 -ml-2", children: _jsx("div", { className: "panel-icon i-ph-arrow-clockwise" }) }), _jsx("span", { className: "text-sm truncate", children: previewTitle(preview, previewCount, i18n) })] }), last && (_jsxs("button", { className: "panel-button px-2 py-0.5 -mr-1 -my-1", title: "Toggle Terminal", onClick: () => toggleTerminal?.(), children: [_jsx("div", { className: "panel-button-icon i-ph-terminal-window-duotone" }), _jsx("span", { className: "text-sm", children: i18n.toggleTerminalButtonText })] }))] }), _jsx("div", { ref: previewContainerRef, className: classNames('h-full w-full flex justify-center items-center', {
+                    'border-l border-tk-elements-previews-borderColor': !first,
+                }) })] }));
+}
+function requestAnimationFrameLoop(loop) {
+    let handle;
+    const callback = () => {
+        loop();
+        handle = requestAnimationFrame(callback);
+    };
+    handle = requestAnimationFrame(callback);
+    return () => {
+        cancelAnimationFrame(handle);
+    };
+}
+function previewTitle(preview, previewCount, i18n) {
+    if (preview.title) {
+        return preview.title;
+    }
+    if (previewCount === 1) {
+        return i18n.defaultPreviewTitleText;
+    }
+    return `Preview on port ${preview.port}`;
+}
+function preparePreviewsContainer(previewCount) {
+    while (previewsContainer.childElementCount < previewCount) {
+        const iframe = document.createElement('iframe');
+        iframe.className = 'absolute z-10';
+        iframe.allow =
+            document.featurePolicy?.allowedFeatures().join('; ') ??
+                'magnetometer; accelerometer; gyroscope; geolocation; microphone; camera; payment; autoplay; serial; xr-spatial-tracking; cross-origin-isolated';
+        previewsContainer.appendChild(iframe);
+    }
+    for (let i = 0; i < previewsContainer.childElementCount; i++) {
+        const preview = previewsContainer.children.item(i);
+        if (i < previewCount) {
+            preview.classList.remove('hidden');
+        }
+        else {
+            preview.classList.add('hidden');
+        }
+    }
+}
+function newIframeRef() {
+    return { ref: undefined, container: undefined };
+}
+function adjustLength(array, expectedSize, newElement) {
+    while (array.length < expectedSize) {
+        array.push(newElement());
+    }
+    while (array.length > expectedSize) {
+        array.pop();
+    }
+}

package/dist/Panels/TerminalPanel.d.ts

@@ -0,0 +1,7 @@
+import type { TutorialStore } from '@tutorialkit-rb/runtime';
+interface TerminalPanelProps {
+    theme: 'dark' | 'light';
+    tutorialStore: TutorialStore;
+}
+export declare function TerminalPanel({ theme, tutorialStore }: TerminalPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Panels/TerminalPanel.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStore } from '@nanostores/react';
+import { lazy, Suspense, useEffect, useRef, useState } from 'react';
+import { classNames } from '../utils/classnames.js';
+const Terminal = lazy(() => import('../core/Terminal/index.js'));
+const ICON_MAP = new Map([
+    ['output', 'i-ph-newspaper-duotone'],
+    ['terminal', 'i-ph-terminal-window-duotone'],
+]);
+export function TerminalPanel({ theme, tutorialStore }) {
+    const terminalConfig = useStore(tutorialStore.terminalConfig);
+    const terminalRefs = useRef({});
+    const [domLoaded, setDomLoaded] = useState(false);
+    // select the terminal tab by default
+    const [tabIndex, setTabIndex] = useState(terminalConfig.activePanel);
+    useEffect(() => {
+        setDomLoaded(true);
+    }, []);
+    useEffect(() => {
+        setTabIndex(terminalConfig.activePanel);
+    }, [terminalConfig]);
+    useEffect(() => {
+        return tutorialStore.themeRef.subscribe(() => {
+            for (const ref of Object.values(terminalRefs.current)) {
+                ref.reloadStyles();
+            }
+        });
+    }, []);
+    return (_jsxs("div", { className: "panel-container transition-theme bg-tk-elements-panel-backgroundColor text-tk-elements-panel-textColor", children: [_jsx("div", { className: "panel-tabs-header overflow-x-hidden", children: _jsx("div", { className: "panel-title w-full", children: _jsx("ul", { className: "flex h-full transition-theme border-b border-tk-elements-app-borderColor w-full", role: "tablist", "aria-orientation": "horizontal", children: terminalConfig.panels.map(({ type, title }, index) => {
+                            const selected = tabIndex === index;
+                            return (_jsx("li", { children: _jsxs("button", { className: classNames('group h-full px-4 flex items-center gap-1.5 whitespace-nowrap text-sm position-relative transition-theme border-r border-tk-elements-panel-headerTab-borderColor', {
+                                        'bg-tk-elements-panel-headerTab-backgroundColor text-tk-elements-panel-headerTab-textColor hover:bg-tk-elements-panel-headerTab-backgroundColorHover hover:text-tk-elements-panel-headerTab-textColorHover hover:border-tk-elements-panel-headerTab-borderColorHover': !selected,
+                                        'bg-tk-elements-panel-headerTab-backgroundColorActive text-tk-elements-panel-headerTab-textColorActive border-tk-elements-panel-headerTab-borderColorActive': selected,
+                                        'shadow-[0px_1px_0px_0px] shadow-tk-elements-panel-headerTab-backgroundColorActive': selected,
+                                        'border-l': index > 0,
+                                    }), title: title, id: `tk-terminal-tab-${index}`, role: "tab", "aria-selected": selected, "aria-controls": `tk-terminal-tapbanel-${index}`, onClick: () => setTabIndex(index), children: [_jsx("span", { className: classNames(`text-tk-elements-panel-headerTab-iconColor ${ICON_MAP.get(type) ?? ''}`, {
+                                                '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))) })) })] }));
+}

package/dist/Panels/WorkspacePanel.d.ts

@@ -0,0 +1,14 @@
+import type { TutorialStore } from '@tutorialkit-rb/runtime';
+import { type ComponentProps } from 'react';
+import { DialogProvider } from '../core/Dialog.js';
+import type { Theme } from '../core/types.js';
+interface Props {
+    tutorialStore: TutorialStore;
+    theme: Theme;
+    dialog: NonNullable<ComponentProps<typeof DialogProvider>['value']>;
+}
+/**
+ * This component is the orchestrator between various interactive components.
+ */
+export declare function WorkspacePanel({ tutorialStore, theme, dialog }: Props): import("react/jsx-runtime").JSX.Element;
+export {};