@dodona/papyros 4.1.3 → 4.2.0

package/dist/frontend/components/EditorTab.js

@@ -0,0 +1,208 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, property, state } from "lit/decorators.js";
+import { PapyrosElement } from "./PapyrosElement";
+import { css, html } from "lit";
+import { createRef, ref } from "lit/directives/ref.js";
+import { inlineInputStyles, tabButtonStyles } from "./shared-styles";
+import { isValidFileName } from "../../util/Util";
+let EditorTab = class EditorTab extends PapyrosElement {
+    constructor() {
+        super(...arguments);
+        this.renaming = false;
+        this.invalid = false;
+        this.renameInputRef = createRef();
+    }
+    static get styles() {
+        return css `
+            :host {
+                display: flex;
+            }
+
+            ${tabButtonStyles}
+
+            .close-btn,
+            .rename-btn {
+                display: none;
+                align-items: center;
+                justify-content: center;
+                width: 1rem;
+                height: 1rem;
+                border-radius: 50%;
+                font-size: 0.75rem;
+                line-height: 1;
+                padding: 0;
+                background: transparent;
+                border: none;
+                cursor: pointer;
+                color: inherit;
+                opacity: 0.6;
+            }
+
+            button:hover .rename-btn,
+            button:hover .close-btn,
+            button:focus-within .rename-btn,
+            button:focus-within .close-btn,
+            button.active .rename-btn,
+            button.active .close-btn {
+                display: inline-flex;
+            }
+
+            .close-btn:hover {
+                opacity: 1;
+                background-color: var(--md-sys-color-error);
+                color: var(--md-sys-color-on-error);
+            }
+
+            .rename-btn:hover {
+                opacity: 1;
+                background-color: var(--md-sys-color-primary);
+                color: var(--md-sys-color-on-primary);
+            }
+
+            ${inlineInputStyles}
+        `;
+    }
+    setTab() {
+        this.papyros.io.activeEditorTab = this.file.name;
+    }
+    closeFile(e) {
+        e.stopPropagation();
+        this.papyros.io.removeFile(this.file.name);
+        void this.papyros.runner.deleteFile(this.file.name);
+    }
+    startRenaming() {
+        this.renaming = true;
+        this.invalid = false;
+    }
+    confirmRename() {
+        var _a, _b;
+        if (!this.renaming)
+            return;
+        const oldName = this.file.name;
+        const newName = (_b = (_a = this.renameInputRef.value) === null || _a === void 0 ? void 0 : _a.value.trim()) !== null && _b !== void 0 ? _b : "";
+        if (newName === oldName) {
+            this.renaming = false;
+            return;
+        }
+        if (!this.papyros.io.renameFile(oldName, newName)) {
+            return;
+        }
+        this.renaming = false;
+        void this.papyros.runner.renameFile(oldName, newName);
+    }
+    cancelRename() {
+        this.renaming = false;
+    }
+    onRenameInput() {
+        var _a, _b;
+        const value = (_b = (_a = this.renameInputRef.value) === null || _a === void 0 ? void 0 : _a.value.trim()) !== null && _b !== void 0 ? _b : "";
+        this.invalid =
+            !isValidFileName(value) ||
+                (value !== this.file.name && this.papyros.io.files.some((f) => f.name === value));
+    }
+    onRenameKeydown(e) {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            this.confirmRename();
+        }
+        else if (e.key === "Escape") {
+            this.cancelRename();
+        }
+    }
+    onDblClick() {
+        if (!this.papyros.debugger.active)
+            this.startRenaming();
+    }
+    onAuxClick(e) {
+        if (!this.papyros.debugger.active && e.button === 1)
+            this.closeFile(e);
+    }
+    onRenameClick(e) {
+        e.stopPropagation();
+        this.startRenaming();
+    }
+    onRenameBtnKeydown(e) {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.stopPropagation();
+            this.startRenaming();
+        }
+    }
+    onCloseBtnKeydown(e) {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            this.closeFile(e);
+        }
+    }
+    updated() {
+        if (this.renaming) {
+            const input = this.renameInputRef.value;
+            if (input) {
+                input.focus();
+                input.select();
+            }
+        }
+    }
+    render() {
+        const active = this.papyros.io.activeEditorTab === this.file.name;
+        const debugActive = this.papyros.debugger.active;
+        if (!debugActive && this.renaming) {
+            return html `<input
+                ${ref(this.renameInputRef)}
+                class=${this.invalid ? "inline-input invalid" : "inline-input"}
+                .value=${this.file.name}
+                @input=${this.onRenameInput}
+                @keydown=${this.onRenameKeydown}
+                @blur=${this.confirmRename}
+            />`;
+        }
+        return html `
+            <button
+                class=${active ? "active" : ""}
+                @click=${this.setTab}
+                @dblclick=${this.onDblClick}
+                @auxclick=${this.onAuxClick}
+            >
+                ${this.file.name}
+                ${debugActive
+            ? ""
+            : html `<span
+                              class="rename-btn"
+                              role="button"
+                              tabindex="0"
+                              aria-label=${this.t("Papyros.rename_file_tab")}
+                              @click=${this.onRenameClick}
+                              @keydown=${this.onRenameBtnKeydown}
+                              >✎</span
+                          ><span
+                              class="close-btn"
+                              role="button"
+                              tabindex="0"
+                              aria-label=${this.t("Papyros.close_file_tab")}
+                              @click=${this.closeFile}
+                              @keydown=${this.onCloseBtnKeydown}
+                              >×</span
+                          >`}
+            </button>
+        `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], EditorTab.prototype, "file", void 0);
+__decorate([
+    state()
+], EditorTab.prototype, "renaming", void 0);
+__decorate([
+    state()
+], EditorTab.prototype, "invalid", void 0);
+EditorTab = __decorate([
+    customElement("p-editor-tab")
+], EditorTab);
+export { EditorTab };
+//# sourceMappingURL=EditorTab.js.map

package/dist/frontend/components/EditorTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorTab.js","sourceRoot":"","sources":["../../../src/frontend/components/EditorTab.ts"],"names":[],"mappings":"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"}

package/dist/frontend/components/EditorTabs.d.ts

@@ -0,0 +1,10 @@
+import { PapyrosElement } from "./PapyrosElement";
+import { CSSResult, TemplateResult } from "lit";
+import { FileEntry } from "../state/InputOutput";
+import "./EditorTab";
+import "./AddFileButton";
+export declare class EditorTabs extends PapyrosElement {
+    files: FileEntry[];
+    static get styles(): CSSResult;
+    protected render(): TemplateResult;
+}

package/dist/frontend/components/EditorTabs.js

@@ -0,0 +1,58 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, property } from "lit/decorators.js";
+import { PapyrosElement } from "./PapyrosElement";
+import { css, html } from "lit";
+import { CODE_TAB } from "../state/InputOutput";
+import "./EditorTab";
+import "./AddFileButton";
+import { tabButtonStyles } from "./shared-styles";
+let EditorTabs = class EditorTabs extends PapyrosElement {
+    constructor() {
+        super(...arguments);
+        this.files = [];
+    }
+    static get styles() {
+        return css `
+            :host {
+                display: flex;
+                flex-direction: row;
+                gap: 0.25rem;
+                padding: 0.25rem 0.25rem 0;
+                background-color: var(--md-sys-color-surface-container);
+                border-radius: 0.5rem 0.5rem 0 0;
+                max-height: 2.5rem;
+                flex-shrink: 0;
+                overflow-x: auto;
+            }
+
+            ${tabButtonStyles}
+        `;
+    }
+    render() {
+        const activeTab = this.papyros.io.activeEditorTab;
+        const debugActive = this.papyros.debugger.active;
+        return html `
+            <button
+                class=${activeTab === CODE_TAB ? "active" : ""}
+                @click=${() => (this.papyros.io.activeEditorTab = CODE_TAB)}
+            >
+                ${this.t("Papyros.editor_tab_code")}
+            </button>
+            ${this.files.map((f) => html `<p-editor-tab .papyros=${this.papyros} .file=${f}></p-editor-tab>`)}
+            ${debugActive ? "" : html `<p-add-file-button .papyros=${this.papyros}></p-add-file-button>`}
+        `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], EditorTabs.prototype, "files", void 0);
+EditorTabs = __decorate([
+    customElement("p-editor-tabs")
+], EditorTabs);
+export { EditorTabs };
+//# sourceMappingURL=EditorTabs.js.map

package/dist/frontend/components/EditorTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorTabs.js","sourceRoot":"","sources":["../../../src/frontend/components/EditorTabs.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,GAAG,EAAa,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAa,MAAM,sBAAsB,CAAC;AAC3D,OAAO,aAAa,CAAC;AACrB,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAG3C,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,cAAc;IAAvC;;QAEH,UAAK,GAAgB,EAAE,CAAC;IAkC5B,CAAC;IAhCG,MAAM,KAAK,MAAM;QACb,OAAO,GAAG,CAAA;;;;;;;;;;;;;cAaJ,eAAe;SACpB,CAAC;IACN,CAAC;IAEkB,MAAM;QACrB,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,eAAe,CAAC;QAClD,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC;QACjD,OAAO,IAAI,CAAA;;wBAEK,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;yBACrC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,eAAe,GAAG,QAAQ,CAAC;;kBAEzD,IAAI,CAAC,CAAC,CAAC,yBAAyB,CAAC;;cAErC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA,0BAA0B,IAAI,CAAC,OAAO,UAAU,CAAC,kBAAkB,CAAC;cAC9F,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA,+BAA+B,IAAI,CAAC,OAAO,uBAAuB;SAC9F,CAAC;IACN,CAAC;CACJ,CAAA;AAlCG;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;yCACP;AAFf,UAAU;IADtB,aAAa,CAAC,eAAe,CAAC;GAClB,UAAU,CAoCtB"}

package/dist/frontend/components/FileViewer.d.ts

@@ -0,0 +1,14 @@
+import { PapyrosElement } from "./PapyrosElement";
+import { CSSResult, TemplateResult } from "lit";
+import { FileEntry } from "../state/InputOutput";
+import "./code_mirror/FileEditor";
+export declare class FileViewer extends PapyrosElement {
+    file: FileEntry | undefined;
+    private editorRef;
+    private debouncedUpdateFile;
+    static get styles(): CSSResult;
+    private downloadBinary;
+    protected updated(changedProperties: Map<PropertyKey, unknown>): void;
+    private onEditorChange;
+    protected render(): TemplateResult;
+}

package/dist/frontend/components/FileViewer.js

@@ -0,0 +1,119 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, property } from "lit/decorators.js";
+import { PapyrosElement } from "./PapyrosElement";
+import { css, html } from "lit";
+import { createRef, ref } from "lit/directives/ref.js";
+import { debounce } from "../../util/Util";
+import "./code_mirror/FileEditor";
+let FileViewer = class FileViewer extends PapyrosElement {
+    constructor() {
+        super(...arguments);
+        this.file = undefined;
+        this.editorRef = createRef();
+        this.debouncedUpdateFile = debounce((name, content) => {
+            void this.papyros.runner.updateFile(name, content, false);
+        }, 300);
+    }
+    static get styles() {
+        return css `
+            :host {
+                display: block;
+                width: 100%;
+                height: 100%;
+                overflow: auto;
+            }
+
+            p-file-editor {
+                display: block;
+                width: 100%;
+                height: 100%;
+            }
+
+            .placeholder-container {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                gap: 1rem;
+                padding: 2rem;
+                color: var(--md-sys-color-on-surface-variant);
+            }
+
+            button {
+                background-color: var(--md-sys-color-primary);
+                color: var(--md-sys-color-on-primary);
+                border: none;
+                border-radius: 1rem;
+                padding: 0.5rem 1.5rem;
+                cursor: pointer;
+                font-size: 0.875rem;
+            }
+
+            button:hover {
+                opacity: 0.9;
+            }
+        `;
+    }
+    downloadBinary() {
+        if (!this.file)
+            return;
+        const bytes = Uint8Array.from(atob(this.file.content), (c) => c.charCodeAt(0));
+        const blob = new Blob([bytes]);
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = this.file.name;
+        a.click();
+        setTimeout(() => URL.revokeObjectURL(url), 1000);
+    }
+    updated(changedProperties) {
+        var _a;
+        if (changedProperties.has("file") && this.file && !this.file.binary) {
+            (_a = this.editorRef.value) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
+    onEditorChange(e) {
+        if (!this.file || this.papyros.debugger.active)
+            return;
+        const name = this.file.name;
+        const content = e.detail;
+        this.papyros.io.updateFileContent(name, content, this.file.binary);
+        this.debouncedUpdateFile(name, content);
+    }
+    render() {
+        if (!this.file) {
+            return html ``;
+        }
+        if (this.file.binary) {
+            return html `
+                <div class="placeholder-container">
+                    <span>${this.t("Papyros.files_binary")}</span>
+                    <button @click=${this.downloadBinary}>${this.t("Papyros.files_download")}</button>
+                </div>
+            `;
+        }
+        const readonly = this.papyros.debugger.active;
+        return html `
+            <p-file-editor
+                ${ref(this.editorRef)}
+                .value=${this.file.content}
+                .readonly=${readonly}
+                .theme=${this.papyros.constants.CodeMirrorTheme}
+                @change=${this.onEditorChange}
+            ></p-file-editor>
+        `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], FileViewer.prototype, "file", void 0);
+FileViewer = __decorate([
+    customElement("p-file-viewer")
+], FileViewer);
+export { FileViewer };
+//# sourceMappingURL=FileViewer.js.map

package/dist/frontend/components/FileViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileViewer.js","sourceRoot":"","sources":["../../../src/frontend/components/FileViewer.ts"],"names":[],"mappings":"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"}

package/dist/frontend/components/code_mirror/CodeMirrorEditor.d.ts

@@ -17,6 +17,7 @@ export declare class CodeMirrorEditor extends LitElement {
     private initView;
     private onViewUpdate;
     connectedCallback(): void;
+    focus(): void;
     disconnectedCallback(): void;
     protected configure(extensions: Record<string, Extension>): void;
 }

package/dist/frontend/components/code_mirror/CodeMirrorEditor.js

@@ -80,6 +80,10 @@ let CodeMirrorEditor = class CodeMirrorEditor extends LitElement {
         super.connectedCallback();
         this.initView();
     }
+    focus() {
+        var _a;
+        (_a = this.view) === null || _a === void 0 ? void 0 : _a.focus();
+    }
     disconnectedCallback() {
         var _a;
         super.disconnectedCallback();

package/dist/frontend/components/code_mirror/CodeMirrorEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeMirrorEditor.js","sourceRoot":"","sources":["../../../../src/frontend/components/code_mirror/CodeMirrorEditor.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"CodeMirrorEditor.js","sourceRoot":"","sources":["../../../../src/frontend/components/code_mirror/CodeMirrorEditor.ts"],"names":[],"mappings":"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"}

package/dist/frontend/components/code_mirror/FileEditor.d.ts

@@ -0,0 +1,6 @@
+import { CodeMirrorEditor } from "./CodeMirrorEditor";
+import { CSSResult } from "lit";
+export declare class FileEditor extends CodeMirrorEditor {
+    static get styles(): CSSResult;
+    constructor();
+}

package/dist/frontend/components/code_mirror/FileEditor.js

@@ -0,0 +1,48 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from "lit/decorators.js";
+import { CodeMirrorEditor } from "./CodeMirrorEditor";
+import { drawSelection, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, keymap, lineNumbers, } from "@codemirror/view";
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+import { bracketMatching, foldGutter, indentOnInput } from "@codemirror/language";
+import { EditorState } from "@codemirror/state";
+import { highlightSelectionMatches } from "@codemirror/search";
+import { css } from "lit";
+let FileEditor = class FileEditor extends CodeMirrorEditor {
+    static get styles() {
+        return css `
+            :host {
+                width: 100%;
+                height: 100%;
+            }
+        `;
+    }
+    constructor() {
+        super();
+        this.configure({
+            fileExtensions: [
+                lineNumbers(),
+                highlightSpecialChars(),
+                history(),
+                foldGutter(),
+                drawSelection(),
+                EditorState.allowMultipleSelections.of(true),
+                indentOnInput(),
+                bracketMatching(),
+                highlightSelectionMatches(),
+                highlightActiveLineGutter(),
+                highlightActiveLine(),
+                keymap.of([...defaultKeymap, ...historyKeymap]),
+            ],
+        });
+    }
+};
+FileEditor = __decorate([
+    customElement("p-file-editor")
+], FileEditor);
+export { FileEditor };
+//# sourceMappingURL=FileEditor.js.map

package/dist/frontend/components/code_mirror/FileEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileEditor.js","sourceRoot":"","sources":["../../../../src/frontend/components/code_mirror/FileEditor.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EACH,aAAa,EACb,mBAAmB,EACnB,yBAAyB,EACzB,qBAAqB,EACrB,MAAM,EACN,WAAW,GACd,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC7E,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,GAAG,EAAa,MAAM,KAAK,CAAC;AAG9B,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,gBAAgB;IAC5C,MAAM,KAAK,MAAM;QACb,OAAO,GAAG,CAAA;;;;;SAKT,CAAC;IACN,CAAC;IAED;QACI,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,SAAS,CAAC;YACX,cAAc,EAAE;gBACZ,WAAW,EAAE;gBACb,qBAAqB,EAAE;gBACvB,OAAO,EAAE;gBACT,UAAU,EAAE;gBACZ,aAAa,EAAE;gBACf,WAAW,CAAC,uBAAuB,CAAC,EAAE,CAAC,IAAI,CAAC;gBAC5C,aAAa,EAAE;gBACf,eAAe,EAAE;gBACjB,yBAAyB,EAAE;gBAC3B,yBAAyB,EAAE;gBAC3B,mBAAmB,EAAE;gBACrB,MAAM,CAAC,EAAE,CAAC,CAAC,GAAG,aAAa,EAAE,GAAG,aAAa,CAAC,CAAC;aAClD;SACJ,CAAC,CAAC;IACP,CAAC;CACJ,CAAA;AA7BY,UAAU;IADtB,aAAa,CAAC,eAAe,CAAC;GAClB,UAAU,CA6BtB"}

package/dist/frontend/components/shared-styles.d.ts

@@ -0,0 +1,3 @@
+import { CSSResult } from "lit";
+export declare const tabButtonStyles: CSSResult;
+export declare const inlineInputStyles: CSSResult;

package/dist/frontend/components/shared-styles.js

@@ -0,0 +1,42 @@
+import { css } from "lit";
+export const tabButtonStyles = css `
+    button {
+        padding: 0.375rem 0.75rem;
+        border: none;
+        border-radius: 0.375rem 0.375rem 0 0;
+        cursor: pointer;
+        font-size: 0.875rem;
+        background-color: var(--md-sys-color-surface-variant);
+        color: var(--md-sys-color-on-surface-variant);
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+    }
+
+    button.active {
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+    }
+
+    button:hover:not(.active) {
+        opacity: 0.8;
+    }
+`;
+export const inlineInputStyles = css `
+    .inline-input {
+        font-size: 0.875rem;
+        padding: 0.25rem 0.5rem;
+        border: 1px solid var(--md-sys-color-outline);
+        border-radius: 0.375rem 0.375rem 0 0;
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+        width: 8rem;
+        outline: none;
+    }
+
+    .inline-input.invalid {
+        border-color: var(--md-sys-color-error);
+    }
+`;
+//# sourceMappingURL=shared-styles.js.map

package/dist/frontend/components/shared-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared-styles.js","sourceRoot":"","sources":["../../../src/frontend/components/shared-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAa,MAAM,KAAK,CAAC;AAErC,MAAM,CAAC,MAAM,eAAe,GAAc,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;CAuB5C,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAc,GAAG,CAAA;;;;;;;;;;;;;;;CAe9C,CAAC"}

package/dist/frontend/state/Debugger.d.ts

@@ -1,23 +1,30 @@
 import { Frame } from "@dodona/trace-component/dist/trace_types";
 import { State } from "@dodona/lit-state";
 import { Papyros } from "./Papyros";
+import { FileEntry } from "./InputOutput";
 export type FrameState = {
     line: number;
     outputs: number;
     inputs: number;
+    files: number;
 };
 export declare class Debugger extends State {
     private papyros;
     private frameStates;
-    activeFrame: number | undefined;
+    private _activeFrame;
+    set activeFrame(value: number | undefined);
+    get activeFrame(): number | undefined;
     trace: Frame[];
     private _active;
+    private fileHistory;
     set active(active: boolean);
     get active(): boolean;
     constructor(papyros: Papyros);
     reset(): void;
+    private validateActiveTab;
     get activeFrameState(): FrameState | undefined;
     get debugLine(): number | undefined;
     get debugOutputs(): number | undefined;
     get debugUsedInputs(): number | undefined;
+    get debugFiles(): FileEntry[];
 }