@tutorialkit-rb/react 1.5.2-rb.0.1.0

package/dist/core/CodeMirrorEditor/languages.js

@@ -0,0 +1,118 @@
+import { LanguageDescription, LanguageSupport, StreamLanguage } from '@codemirror/language';
+export const supportedLanguages = [
+    LanguageDescription.of({
+        name: 'TS',
+        extensions: ['ts'],
+        async load() {
+            return import('@codemirror/lang-javascript').then((module) => module.javascript({ typescript: true }));
+        },
+    }),
+    LanguageDescription.of({
+        name: 'JS',
+        extensions: ['js', 'mjs', 'cjs'],
+        async load() {
+            return import('@codemirror/lang-javascript').then((module) => module.javascript());
+        },
+    }),
+    LanguageDescription.of({
+        name: 'TSX',
+        extensions: ['tsx'],
+        async load() {
+            return import('@codemirror/lang-javascript').then((module) => module.javascript({ jsx: true, typescript: true }));
+        },
+    }),
+    LanguageDescription.of({
+        name: 'JSX',
+        extensions: ['jsx'],
+        async load() {
+            return import('@codemirror/lang-javascript').then((module) => module.javascript({ jsx: true }));
+        },
+    }),
+    LanguageDescription.of({
+        name: 'HTML',
+        extensions: ['html'],
+        async load() {
+            return import('@codemirror/lang-html').then((module) => module.html());
+        },
+    }),
+    LanguageDescription.of({
+        name: 'CSS',
+        extensions: ['css'],
+        async load() {
+            return import('@codemirror/lang-css').then((module) => module.css());
+        },
+    }),
+    LanguageDescription.of({
+        name: 'SASS',
+        extensions: ['sass'],
+        async load() {
+            return import('@codemirror/lang-sass').then((module) => module.sass({ indented: true }));
+        },
+    }),
+    LanguageDescription.of({
+        name: 'SCSS',
+        extensions: ['scss'],
+        async load() {
+            return import('@codemirror/lang-sass').then((module) => module.sass({ indented: false }));
+        },
+    }),
+    LanguageDescription.of({
+        name: 'JSON',
+        extensions: ['json'],
+        async load() {
+            return import('@codemirror/lang-json').then((module) => module.json());
+        },
+    }),
+    LanguageDescription.of({
+        name: 'Markdown',
+        extensions: ['md'],
+        async load() {
+            return import('@codemirror/lang-markdown').then((module) => module.markdown());
+        },
+    }),
+    LanguageDescription.of({
+        name: 'Wasm',
+        extensions: ['wat'],
+        async load() {
+            return import('@codemirror/lang-wast').then((module) => module.wast());
+        },
+    }),
+    LanguageDescription.of({
+        name: 'Vue',
+        extensions: ['vue'],
+        async load() {
+            return import('@codemirror/lang-vue').then((module) => module.vue());
+        },
+    }),
+    LanguageDescription.of({
+        name: 'Svelte',
+        extensions: ['svelte'],
+        async load() {
+            return import('@replit/codemirror-lang-svelte').then((module) => module.svelte());
+        },
+    }),
+    LanguageDescription.of({
+        name: 'Ruby',
+        extensions: ['rb', 'rake', 'erb'],
+        filename: /(Gemfile|Rakefile|config\.ru|bin\/(rails|rubocop))/,
+        async load() {
+            return import('@codemirror/legacy-modes/mode/ruby').then((module) => {
+                return new LanguageSupport(StreamLanguage.define(module.ruby));
+            });
+        },
+    }),
+    LanguageDescription.of({
+        name: 'YAML',
+        extensions: ['yaml', 'yml'],
+        async load() {
+            return import('@codemirror/lang-yaml').then((module) => module.yaml());
+        },
+    }),
+];
+export async function getLanguage(fileName) {
+    const languageDescription = LanguageDescription.matchFilename(supportedLanguages, fileName);
+    if (languageDescription) {
+        return await languageDescription.load();
+    }
+    return undefined;
+}

package/dist/core/CodeMirrorEditor/themes/vscode-dark.d.ts

@@ -0,0 +1,2 @@
+import { HighlightStyle } from '@codemirror/language';
+export declare const vscodeDarkTheme: HighlightStyle;

package/dist/core/CodeMirrorEditor/themes/vscode-dark.js

@@ -0,0 +1,75 @@
+import { HighlightStyle } from '@codemirror/language';
+import { tags } from '@lezer/highlight';
+export const vscodeDarkTheme = HighlightStyle.define([
+    {
+        tag: [
+            tags.keyword,
+            tags.operatorKeyword,
+            tags.modifier,
+            tags.color,
+            tags.constant(tags.name),
+            tags.standard(tags.name),
+            tags.standard(tags.tagName),
+            tags.special(tags.brace),
+            tags.atom,
+            tags.bool,
+            tags.special(tags.variableName),
+        ],
+        color: '#569cd6',
+    },
+    {
+        tag: [tags.controlKeyword, tags.moduleKeyword],
+        color: '#c586c0',
+    },
+    {
+        tag: [
+            tags.name,
+            tags.deleted,
+            tags.character,
+            tags.macroName,
+            tags.propertyName,
+            tags.variableName,
+            tags.labelName,
+            tags.definition(tags.name),
+        ],
+        color: '#9cdcfe',
+    },
+    { tag: tags.heading, fontWeight: 'bold', color: '#9cdcfe' },
+    {
+        tag: [
+            tags.typeName,
+            tags.className,
+            tags.tagName,
+            tags.number,
+            tags.changed,
+            tags.annotation,
+            tags.self,
+            tags.namespace,
+        ],
+        color: '#4ec9b0',
+    },
+    {
+        tag: [tags.function(tags.variableName), tags.function(tags.propertyName)],
+        color: '#dcdcaa',
+    },
+    { tag: [tags.number], color: '#b5cea8' },
+    {
+        tag: [tags.operator, tags.punctuation, tags.separator, tags.url, tags.escape, tags.regexp],
+        color: '#d4d4d4',
+    },
+    {
+        tag: [tags.regexp],
+        color: '#d16969',
+    },
+    {
+        tag: [tags.special(tags.string), tags.processingInstruction, tags.string, tags.inserted],
+        color: '#ce9178',
+    },
+    { tag: [tags.angleBracket], color: '#808080' },
+    { tag: tags.strong, fontWeight: 'bold' },
+    { tag: tags.emphasis, fontStyle: 'italic' },
+    { tag: tags.strikethrough, textDecoration: 'line-through' },
+    { tag: [tags.meta, tags.comment], color: '#6a9955' },
+    { tag: tags.link, color: '#6a9955', textDecoration: 'underline' },
+    { tag: tags.invalid, color: '#ff0000' },
+]);

package/dist/core/ContextMenu.d.ts

@@ -0,0 +1,29 @@
+import { type FileDescriptor, type I18n } from '@tutorialkit-rb/types';
+import { type ComponentProps } from 'react';
+interface FileChangeEvent {
+    type: FileDescriptor['type'];
+    method: 'add' | 'remove' | 'rename';
+    value: string;
+}
+interface FileRenameEvent extends FileChangeEvent {
+    method: 'rename';
+    oldValue: string;
+}
+interface Props extends ComponentProps<'div'> {
+    /** Callback invoked when file is changed. This callback should throw errors with {@link FilesystemError} messages. */
+    onFileChange?: (event: FileChangeEvent | FileRenameEvent) => Promise<void>;
+    /** Glob patterns for paths that allow editing files and folders. Disabled by default. */
+    allowEditPatterns?: string[];
+    /** Directory of the clicked file. */
+    directory: string;
+    /** Whether to render new files/directories before or after the trigger element. Defaults to `'before'`. */
+    position?: 'before' | 'after';
+    /** Localized texts for menu. */
+    i18n?: Pick<I18n, 'fileTreeCreateFileText' | 'fileTreeCreateFolderText' | 'fileTreeActionNotAllowedText' | 'fileTreeAllowedPatternsText' | 'fileTreeFileExistsAlreadyText' | 'confirmationText'>;
+    /** Props for trigger wrapper. */
+    triggerProps?: ComponentProps<'div'> & {
+        'data-testid'?: string;
+    };
+}
+export declare function ContextMenu({ onFileChange, allowEditPatterns, directory, i18n, position, children, triggerProps, ...props }: Props): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | null | undefined;
+export {};

package/dist/core/ContextMenu.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Root, Portal, Content, Item, Trigger } from '@radix-ui/react-context-menu';
+import { DEFAULT_LOCALIZATION } from '@tutorialkit-rb/types';
+import picomatch from 'picomatch/posix';
+import { useRef, useState } from 'react';
+import { classNames } from '../utils/classnames.js';
+import { useDialog } from './Dialog.js';
+export function ContextMenu({ onFileChange, allowEditPatterns, directory, i18n, position = 'before', children, triggerProps, ...props }) {
+    const [state, setState] = useState('idle');
+    const inputRef = useRef(null);
+    const Dialog = useDialog();
+    if (!allowEditPatterns?.length) {
+        return children;
+    }
+    async function onFileNameEnd(event) {
+        if (state !== 'add_file' && state !== 'add_folder') {
+            return;
+        }
+        const name = event.currentTarget.value;
+        if (name) {
+            const value = `${directory}/${name}`;
+            const isAllowed = picomatch.isMatch(value, allowEditPatterns);
+            if (!isAllowed) {
+                return setState('add_failed_not_allowed');
+            }
+            try {
+                await onFileChange?.({
+                    value,
+                    type: state === 'add_file' ? 'file' : 'folder',
+                    method: 'add',
+                });
+            }
+            catch (error) {
+                const message = error?.message;
+                if (message === 'FILE_EXISTS' || message === 'FOLDER_EXISTS') {
+                    return setState('add_failed_exists');
+                }
+            }
+        }
+        setState('idle');
+    }
+    function onFileNameKeyPress(event) {
+        if (event.key === 'Enter' && event.currentTarget.value !== '') {
+            onFileNameEnd(event);
+        }
+    }
+    function onCloseAutoFocus(event) {
+        if ((state === 'add_file' || state === 'add_folder') && inputRef.current) {
+            event.preventDefault();
+            inputRef.current.focus();
+        }
+    }
+    const element = (_jsx(Trigger, { asChild: true, children: _jsx("div", { ...triggerProps, children: children }) }));
+    return (_jsxs(Root, { children: [position === 'before' && element, state !== 'idle' && (_jsxs("div", { className: "flex items-center gap-2 border-2 border-solid border-transparent", ...props, children: [_jsx("div", { className: `scale-120 shrink-0 ${state === 'add_file' ? 'i-ph-file-duotone' : 'i-ph-folder-duotone'}` }), _jsx("input", { ref: inputRef, autoFocus: true, type: "text", onBlur: onFileNameEnd, onKeyUp: onFileNameKeyPress, className: "text-current bg-transparent w-20 outline-var(--tk-border-accent)" })] })), position === 'after' && element, _jsx(Portal, { children: _jsxs(Content, { onCloseAutoFocus: onCloseAutoFocus, className: "border border-tk-border-brighter b-rounded-md bg-tk-background-brighter py-2", children: [_jsx(MenuItem, { icon: "i-ph-file-plus", onClick: () => setState('add_file'), children: i18n?.fileTreeCreateFileText || DEFAULT_LOCALIZATION.fileTreeCreateFileText }), _jsx(MenuItem, { icon: "i-ph-folder-plus", onClick: () => setState('add_folder'), children: i18n?.fileTreeCreateFolderText || DEFAULT_LOCALIZATION.fileTreeCreateFolderText })] }) }), (state === 'add_failed_not_allowed' || state === 'add_failed_exists') && (_jsx(Dialog, { title: i18n?.fileTreeActionNotAllowedText || DEFAULT_LOCALIZATION.fileTreeActionNotAllowedText, confirmText: i18n?.confirmationText || DEFAULT_LOCALIZATION.confirmationText, onClose: () => setState('idle'), children: state === 'add_failed_not_allowed' ? (_jsxs(_Fragment, { children: [i18n?.fileTreeAllowedPatternsText || DEFAULT_LOCALIZATION.fileTreeAllowedPatternsText, _jsx(AllowPatternsList, { allowEditPatterns: allowEditPatterns })] })) : (_jsx(_Fragment, { children: i18n?.fileTreeFileExistsAlreadyText || DEFAULT_LOCALIZATION.fileTreeFileExistsAlreadyText })) }))] }));
+}
+function MenuItem({ icon, children, ...props }) {
+    return (_jsxs(Item, { ...props, className: "flex items-center gap-2 px-4 py-1 text-sm cursor-pointer ws-nowrap text-tk-elements-fileTree-folder-textColor hover:bg-tk-elements-fileTree-file-backgroundColorHover", children: [_jsx("span", { className: `${icon} scale-120 shrink-0` }), _jsx("span", { children: children })] }));
+}
+function AllowPatternsList({ allowEditPatterns }) {
+    return (_jsx("ul", { className: classNames('mt-2', allowEditPatterns.length > 1 && 'list-disc ml-4'), children: allowEditPatterns.map((pattern) => (_jsx("li", { className: "mb-1", children: _jsx("code", { children: pattern }) }, pattern))) }));
+}

package/dist/core/Dialog.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+interface Props {
+    /** Title of the dialog */
+    title: string;
+    /** Text for the confirmation button */
+    confirmText: string;
+    /** Callback invoked when dialog is closed */
+    onClose: () => void;
+    /** Content of the dialog */
+    children: ReactNode;
+}
+export declare const DialogProvider: import("react").Provider<typeof Dialog>;
+export declare function useDialog(): typeof Dialog;
+export default function Dialog({ title, confirmText, onClose, children }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/core/Dialog.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { createContext, useContext } from 'react';
+import { Button } from '../Button.js';
+const context = createContext(Dialog);
+export const DialogProvider = context.Provider;
+export function useDialog() {
+    return useContext(context);
+}
+export default function Dialog({ title, confirmText, onClose, children }) {
+    return (_jsx(RadixDialog.Root, { open: true, onOpenChange: (open) => !open && onClose(), children: _jsxs(RadixDialog.Portal, { children: [_jsx(RadixDialog.Overlay, { className: "fixed z-11 inset-0 opacity-50 bg-black" }), _jsx(RadixDialog.Content, { className: "fixed z-11 top-50% left-50% transform-translate--50% w-90vw max-w-450px max-h-85vh rounded-xl text-tk-text-primary bg-tk-background-primary", children: _jsxs("div", { className: "relative p-10", children: [_jsx(RadixDialog.Title, { className: "text-6", children: title }), _jsx("div", { className: "my-4", children: children }), _jsx(RadixDialog.Close, { asChild: true, children: _jsx(Button, { className: "min-w-20 justify-center", children: confirmText }) })] }) })] }) }));
+}

package/dist/core/FileTree.d.ts

@@ -0,0 +1,18 @@
+import type { FileDescriptor } from '@tutorialkit-rb/types';
+import { type ComponentProps } from 'react';
+import { ContextMenu } from './ContextMenu.js';
+interface Props {
+    files: FileDescriptor[];
+    selectedFile?: string;
+    onFileSelect?: (filePath: string) => void;
+    onFileChange?: ComponentProps<typeof ContextMenu>['onFileChange'];
+    allowEditPatterns?: ComponentProps<typeof ContextMenu>['allowEditPatterns'];
+    i18n?: ComponentProps<typeof ContextMenu>['i18n'];
+    hideRoot: boolean;
+    scope?: string;
+    hiddenFiles?: Array<string | RegExp>;
+    className?: string;
+}
+export declare function FileTree({ files, onFileSelect, onFileChange, allowEditPatterns, selectedFile, hideRoot, scope, hiddenFiles, i18n, className, }: Props): import("react/jsx-runtime").JSX.Element;
+export default FileTree;
+export declare function sortFiles(fileA: FileDescriptor, fileB: FileDescriptor): 0 | 1 | -1;

package/dist/core/FileTree.js

@@ -0,0 +1,194 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { classNames } from '../utils/classnames.js';
+import { ContextMenu } from './ContextMenu.js';
+const NODE_PADDING_LEFT = 12;
+const DEFAULT_HIDDEN_FILES = [/\/node_modules\//];
+export function FileTree({ files, onFileSelect, onFileChange, allowEditPatterns, selectedFile, hideRoot, scope, hiddenFiles, i18n, className, }) {
+    const computedHiddenFiles = useMemo(() => [...DEFAULT_HIDDEN_FILES, ...(hiddenFiles ?? [])], [hiddenFiles]);
+    const fileList = useMemo(() => buildFileList(files, hideRoot, scope, computedHiddenFiles), [files, hideRoot, scope, computedHiddenFiles]);
+    const [collapsedFolders, setCollapsedFolders] = useState(() => new Set());
+    // reset collapsed folders when the list of files changes
+    useEffect(() => {
+        setCollapsedFolders(new Set());
+    }, [files]);
+    const filteredFileList = useMemo(() => {
+        const list = [];
+        let lastDepth = Number.MAX_SAFE_INTEGER;
+        for (const fileOrFolder of fileList) {
+            const depth = fileOrFolder.depth;
+            // if the depth is equal we reached the end of the collaped group
+            if (lastDepth === depth) {
+                lastDepth = Number.MAX_SAFE_INTEGER;
+            }
+            // ignore collapsed folders
+            if (collapsedFolders.has(fileOrFolder.id)) {
+                lastDepth = Math.min(lastDepth, depth);
+            }
+            // ignore files and folders below the last collapsed folder
+            if (lastDepth < depth) {
+                continue;
+            }
+            list.push(fileOrFolder);
+        }
+        return list;
+    }, [fileList, collapsedFolders]);
+    function toggleCollapseState(id) {
+        setCollapsedFolders((prevSet) => {
+            const newSet = new Set(prevSet);
+            if (newSet.has(id)) {
+                newSet.delete(id);
+            }
+            else {
+                newSet.add(id);
+            }
+            return newSet;
+        });
+    }
+    return (_jsxs("div", { className: classNames(className, 'h-full transition-theme bg-tk-elements-fileTree-backgroundColor'), children: [filteredFileList.map((fileOrFolder) => {
+                switch (fileOrFolder.kind) {
+                    case 'file': {
+                        return (_jsx(File, { selected: selectedFile === fileOrFolder.fullPath, file: fileOrFolder, onClick: () => onFileSelect?.(fileOrFolder.fullPath) }, fileOrFolder.id));
+                    }
+                    case 'folder': {
+                        return (_jsx(Folder, { folder: fileOrFolder, i18n: i18n, collapsed: collapsedFolders.has(fileOrFolder.id), onClick: () => toggleCollapseState(fileOrFolder.id), onFileChange: onFileChange, allowEditPatterns: allowEditPatterns }, fileOrFolder.id));
+                    }
+                }
+            }), _jsx(ContextMenu // context menu for the remaining free space area
+            , { position: "after", i18n: i18n, style: getDepthStyle(0), directory: "", onFileChange: onFileChange, allowEditPatterns: allowEditPatterns, triggerProps: { className: 'h-full min-h-4', 'data-testid': 'file-tree-root-context-menu' } })] }));
+}
+export default FileTree;
+function Folder({ folder: { depth, name, fullPath }, i18n, collapsed, onClick, onFileChange, allowEditPatterns, }) {
+    return (_jsx(ContextMenu, { onFileChange: onFileChange, allowEditPatterns: allowEditPatterns, i18n: i18n, directory: fullPath, style: getDepthStyle(1 + depth), children: _jsx(NodeButton, { className: "group transition-theme bg-tk-elements-fileTree-folder-backgroundColor hover:bg-tk-elements-fileTree-folder-backgroundColorHover text-tk-elements-fileTree-folder-textColor hover:text-tk-elements-fileTree-folder-textColor", depth: depth, iconClasses: classNames('text-tk-elements-fileTree-folder-iconColor group-hover:text-tk-elements-fileTree-folder-iconColorHover', {
+                'i-ph-folder-simple-duotone': collapsed,
+                'i-ph-folder-open-duotone': !collapsed,
+            }), onClick: onClick, children: name }) }));
+}
+function File({ file: { depth, name }, onClick, selected }) {
+    const extension = getFileExtension(name);
+    const fileIcon = extensionsToIcons.get(extension) || 'i-ph-file-duotone';
+    return (_jsx(NodeButton, { className: classNames('group transition-theme', {
+            'bg-tk-elements-fileTree-file-backgroundColor hover:bg-tk-elements-fileTree-file-backgroundColorHover text-tk-elements-fileTree-file-textColor hover:text-tk-elements-fileTree-file-textColorHover': !selected,
+            'bg-tk-elements-fileTree-file-backgroundColorSelected text-tk-elements-fileTree-file-textColorSelected': selected,
+        }), depth: depth, iconClasses: classNames(fileIcon, {
+            'text-tk-elements-fileTree-file-iconColor group-hover:text-tk-elements-fileTree-file-iconColorHover': !selected,
+            'text-tk-elements-fileTree-file-iconColorSelected': selected,
+        }), onClick: onClick, "aria-pressed": selected, children: name }));
+}
+function NodeButton({ depth, iconClasses, onClick, className, 'aria-pressed': ariaPressed, children }) {
+    return (_jsxs("button", { className: `flex items-center gap-2 w-full pr-2 border-2 border-transparent text-faded ${className ?? ''}`, style: getDepthStyle(depth), onClick: onClick, "aria-pressed": ariaPressed === true ? 'true' : undefined, children: [_jsx("div", { className: classNames('scale-120 shrink-0', iconClasses) }), _jsx("span", { children: children })] }));
+}
+function buildFileList(files, hideRoot, scope, hiddenFiles) {
+    const folderPaths = new Set();
+    const fileList = [];
+    const defaultDepth = hideRoot ? 0 : 1;
+    if (!hideRoot) {
+        fileList.push({ kind: 'folder', name: '/', fullPath: '/', depth: 0, id: 0 });
+    }
+    for (const file of [...files].sort(sortFiles)) {
+        if (scope && !file.path.startsWith(scope)) {
+            continue;
+        }
+        const segments = file.path.split('/').filter((s) => s);
+        const fileName = segments.at(-1);
+        if (!fileName || isHiddenFile(file.path, fileName, hiddenFiles)) {
+            continue;
+        }
+        let currentPath = '';
+        for (let depth = 0; depth < segments.length; ++depth) {
+            const name = segments[depth];
+            const fullPath = (currentPath += `/${name}`);
+            if (depth === segments.length - 1) {
+                fileList.push({
+                    kind: file.type,
+                    id: fileList.length,
+                    name,
+                    fullPath,
+                    depth: depth + defaultDepth,
+                });
+            }
+            else if (!folderPaths.has(fullPath)) {
+                folderPaths.add(fullPath);
+                fileList.push({
+                    kind: 'folder',
+                    id: fileList.length,
+                    name,
+                    fullPath,
+                    depth: depth + defaultDepth,
+                });
+            }
+        }
+    }
+    return fileList;
+}
+function isHiddenFile(filePath, fileName, hiddenFiles) {
+    return hiddenFiles.some((pathOrRegex) => {
+        if (typeof pathOrRegex === 'string') {
+            return fileName === pathOrRegex;
+        }
+        return pathOrRegex.test(filePath);
+    });
+}
+function getDepthStyle(depth) {
+    return { paddingLeft: `${12 + depth * NODE_PADDING_LEFT}px` };
+}
+export function sortFiles(fileA, fileB) {
+    const segmentsA = fileA.path.split('/');
+    const segmentsB = fileB.path.split('/');
+    const minLength = Math.min(segmentsA.length, segmentsB.length);
+    for (let i = 0; i < minLength; i++) {
+        const a = toFileSegment(fileA, segmentsA, i);
+        const b = toFileSegment(fileB, segmentsB, i);
+        // folders are always shown before files
+        if (a.type !== b.type) {
+            return a.type === 'folder' ? -1 : 1;
+        }
+        const comparison = compareString(a.path, b.path);
+        // either folder name changed or last segments are compared
+        if (comparison !== 0 || a.isLast || b.isLast) {
+            return comparison;
+        }
+    }
+    return compareString(fileA.path, fileB.path);
+}
+function toFileSegment(file, segments, current) {
+    const isLast = current + 1 === segments.length;
+    return { path: segments[current], type: isLast ? file.type : 'folder', isLast };
+}
+function compareString(a, b) {
+    if (a < b) {
+        return -1;
+    }
+    if (a > b) {
+        return 1;
+    }
+    return 0;
+}
+function getFileExtension(filename) {
+    const parts = filename.split('.');
+    parts.shift();
+    const extension = parts.at(-1) || '';
+    return extension;
+}
+const extensionsToIcons = new Map([
+    ['ts', 'i-ph-file-ts-duotone'],
+    ['cts', 'i-ph-file-ts-duotone'],
+    ['mts', 'i-ph-file-ts-duotone'],
+    ['tsx', 'i-ph-file-tsx-duotone'],
+    ['js', 'i-ph-file-js-duotone'],
+    ['cjs', 'i-ph-file-js-duotone'],
+    ['mjs', 'i-ph-file-js-duotone'],
+    ['jsx', 'i-ph-file-jsx-duotone'],
+    ['html', 'i-ph-file-html-duotone'],
+    ['css', 'i-ph-file-css-duotone'],
+    ['md', 'i-ph-file-md-duotone'],
+    ['vue', 'i-ph-file-vue-duotone'],
+    ['gif', 'i-ph-file-image-duotone'],
+    ['jpg', 'i-ph-file-image-duotone'],
+    ['jpeg', 'i-ph-file-image-duotone'],
+    ['png', 'i-ph-file-image-duotone'],
+    ['svg', 'i-ph-file-svg-duotone'],
+    ['rb', 'i-phosphor-file-rb'],
+    ['ru', 'i-phosphor-file-rb'],
+    ['erb', 'i-phosphor-file-erb'],
+]);

package/dist/core/Terminal/index.d.ts

@@ -0,0 +1,15 @@
+import { Terminal as XTerm } from '@xterm/xterm';
+import '@xterm/xterm/css/xterm.css';
+import { type ComponentProps } from 'react';
+import '../../styles/terminal.css';
+export interface TerminalRef {
+    reloadStyles: () => void;
+}
+export interface TerminalProps extends ComponentProps<'div'> {
+    theme: 'dark' | 'light';
+    readonly?: boolean;
+    onTerminalReady?: (terminal: XTerm) => void;
+    onTerminalResize?: (cols: number, rows: number) => void;
+}
+export declare const Terminal: import("react").ForwardRefExoticComponent<Omit<TerminalProps, "ref"> & import("react").RefAttributes<TerminalRef>>;
+export default Terminal;

package/dist/core/Terminal/index.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FitAddon } from '@xterm/addon-fit';
+import { WebLinksAddon } from '@xterm/addon-web-links';
+import { Terminal as XTerm } from '@xterm/xterm';
+import '@xterm/xterm/css/xterm.css';
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import '../../styles/terminal.css';
+import { getTerminalTheme } from './theme.js';
+export const Terminal = forwardRef(({ theme, readonly = true, onTerminalReady, onTerminalResize, ...props }, ref) => {
+    const divRef = useRef(null);
+    const terminalRef = useRef();
+    useEffect(() => {
+        const element = divRef.current;
+        const fitAddon = new FitAddon();
+        const webLinksAddon = new WebLinksAddon();
+        const terminal = new XTerm({
+            cursorBlink: true,
+            convertEol: true,
+            disableStdin: readonly,
+            theme: getTerminalTheme(readonly ? { cursor: '#00000000' } : {}),
+            fontSize: 13,
+            fontFamily: 'Menlo, courier-new, courier, monospace',
+        });
+        terminalRef.current = terminal;
+        terminal.loadAddon(fitAddon);
+        terminal.loadAddon(webLinksAddon);
+        terminal.open(element);
+        fitAddon.fit();
+        const resizeObserver = new ResizeObserver(() => {
+            fitAddon.fit();
+            onTerminalResize?.(terminal.cols, terminal.rows);
+        });
+        resizeObserver.observe(element);
+        onTerminalReady?.(terminal);
+        return () => {
+            resizeObserver.disconnect();
+            terminal.dispose();
+        };
+    }, []);
+    useEffect(() => {
+        const terminal = terminalRef.current;
+        // we render a transparent cursor in case the terminal is readonly
+        terminal.options.theme = getTerminalTheme(readonly ? { cursor: '#00000000' } : {});
+        terminal.options.disableStdin = readonly;
+    }, [theme, readonly]);
+    useImperativeHandle(ref, () => {
+        return {
+            reloadStyles: () => {
+                const terminal = terminalRef.current;
+                terminal.options.theme = getTerminalTheme(readonly ? { cursor: '#00000000' } : {});
+            },
+        };
+    }, []);
+    return _jsx("div", { ...props, ref: divRef });
+});
+Terminal.displayName = 'Terminal';
+export default Terminal;

package/dist/core/Terminal/theme.d.ts

@@ -0,0 +1,2 @@
+import type { ITheme } from '@xterm/xterm';
+export declare function getTerminalTheme(overrides?: ITheme): ITheme;

package/dist/core/Terminal/theme.js

@@ -0,0 +1,31 @@
+const style = getComputedStyle(document.documentElement);
+const cssVar = (token) => style.getPropertyValue(token) || undefined;
+export function getTerminalTheme(overrides) {
+    return {
+        cursor: cssVar('--tk-elements-terminal-cursorColor'),
+        cursorAccent: cssVar('--tk-elements-terminal-cursorColorAccent'),
+        foreground: cssVar('--tk-elements-terminal-textColor'),
+        background: cssVar('--tk-elements-terminal-backgroundColor'),
+        selectionBackground: cssVar('--tk-elements-terminal-selection-backgroundColor'),
+        selectionForeground: cssVar('--tk-elements-terminal-selection-textColor'),
+        selectionInactiveBackground: cssVar('--tk-elements-terminal-selection-backgroundColorInactive'),
+        // ansi escape code colors
+        black: cssVar('--tk-elements-terminal-color-black'),
+        red: cssVar('--tk-elements-terminal-color-red'),
+        green: cssVar('--tk-elements-terminal-color-green'),
+        yellow: cssVar('--tk-elements-terminal-color-yellow'),
+        blue: cssVar('--tk-elements-terminal-color-blue'),
+        magenta: cssVar('--tk-elements-terminal-color-magenta'),
+        cyan: cssVar('--tk-elements-terminal-color-cyan'),
+        white: cssVar('--tk-elements-terminal-color-white'),
+        brightBlack: cssVar('--tk-elements-terminal-color-brightBlack'),
+        brightRed: cssVar('--tk-elements-terminal-color-brightRed'),
+        brightGreen: cssVar('--tk-elements-terminal-color-brightGreen'),
+        brightYellow: cssVar('--tk-elements-terminal-color-brightYellow'),
+        brightBlue: cssVar('--tk-elements-terminal-color-brightBlue'),
+        brightMagenta: cssVar('--tk-elements-terminal-color-brightMagenta'),
+        brightCyan: cssVar('--tk-elements-terminal-color-brightCyan'),
+        brightWhite: cssVar('--tk-elements-terminal-color-brightWhite'),
+        ...overrides,
+    };
+}

package/dist/core/types.d.ts

@@ -0,0 +1 @@
+export type Theme = 'dark' | 'light';

package/dist/core/types.js

@@ -0,0 +1 @@
+export {};

package/dist/core.d.ts

@@ -0,0 +1,3 @@
+export { CodeMirrorEditor, type EditorDocument, type EditorUpdate, type OnChangeCallback, type OnScrollCallback, type ScrollPosition, } from './core/CodeMirrorEditor/index.js';
+export { FileTree } from './core/FileTree.js';
+export { Terminal, type TerminalRef, type TerminalProps } from './core/Terminal/index.js';

package/dist/core.js

@@ -0,0 +1,3 @@
+export { CodeMirrorEditor, } from './core/CodeMirrorEditor/index.js';
+export { FileTree } from './core/FileTree.js';
+export { Terminal } from './core/Terminal/index.js';