@dodona/papyros 3.0.2 → 4.0.0-beta.2

package/dist/frontend/components/app/App.d.ts

@@ -0,0 +1,24 @@
+import { CSSResult, TemplateResult } from "lit";
+import { PapyrosElement } from "../PapyrosElement";
+import "../CodeRunner";
+import "../Debugger";
+import "../Output";
+import "../Input";
+import "./ProgrammingLanguagePicker";
+import "./ExamplePicker";
+import "./LanguagePicker";
+import "./themes/ThemePicker";
+import { State } from "@dodona/lit-state";
+import "@material/web/iconbutton/icon-button";
+import "@material/web/icon/icon";
+import { ThemeOption } from "../../state/Constants";
+export declare class App extends PapyrosElement {
+    subscriptions: (() => void)[];
+    static get styles(): CSSResult;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    initializeLocalStorageProperty(state: State, property: string): void;
+    setTheme(theme: ThemeOption): void;
+    protected render(): TemplateResult;
+}

package/dist/frontend/components/app/App.js

@@ -0,0 +1,204 @@
+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;
+};
+var App_1;
+import { customElement } from "lit/decorators.js";
+import { adoptStyles, css, html } from "lit";
+import { PapyrosElement } from "../PapyrosElement";
+import "../CodeRunner";
+import "../Debugger";
+import "../Output";
+import "../Input";
+import "./ProgrammingLanguagePicker";
+import "./ExamplePicker";
+import "./LanguagePicker";
+import "./themes/ThemePicker";
+import "@material/web/iconbutton/icon-button";
+import "@material/web/icon/icon";
+let App = App_1 = class App extends PapyrosElement {
+    static get styles() {
+        return css `
+            :host {
+                width: 100%;
+                height: 100%;
+                display: block;
+                background-color: var(--md-sys-color-background);
+                color: var(--md-sys-color-on-background);
+                --md-ref-typeface-brand: Roboto, "Helvetica Neue", sans-serif;
+                --md-ref-typeface-plain: var(--md-ref-typeface-brand);
+                font-family: var(--md-ref-typeface-brand);
+                font-size: 16px;
+                --md-outlined-field-bottom-space: 8px;
+                --md-outlined-field-top-space: 8px;
+                --md-outlined-text-field-bottom-space: 8px;
+                --md-outlined-text-field-top-space: 8px;
+            }
+
+            .rows {
+                display: flex;
+                flex-direction: column;
+                width: 100%;
+                height: 100%;
+            }
+
+            .top {
+                flex: 2;
+                display: flex;
+                min-height: 0;
+            }
+
+            .bottom {
+                flex: 1;
+                min-height: 0;
+            }
+
+            .left {
+                flex: 1;
+                min-width: 0;
+                display: flex;
+            }
+
+            .right {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                min-width: 0;
+                min-height: 0;
+            }
+            
+            .grow {
+                flex-grow: 1;
+            }
+
+            .container {
+                padding: 1.5rem;
+                margin: 0.5rem;
+                border-radius: 1rem;
+                background-color: var(--md-sys-color-surface-container);
+                color: var(--md-sys-color-on-surface);
+            }
+            
+            .overflow {
+                overflow: auto;
+            }
+            
+            .header {
+                align-items: center;
+                padding: 1rem 2rem;
+                display: flex;
+                justify-content: space-between;
+                background-color: var(--md-sys-color-surface-container);
+                color: var(--md-sys-color-on-surface);
+            }
+            
+            .title {
+                font-size: 1.5rem;
+                font-weight: bold;
+                color: var(--md-sys-color-primary);
+            }
+            
+            .header-options {
+                display: flex;
+                gap: 0.5rem;
+                align-items: center;
+            }
+            
+            .content {
+                max-width: 1500px;
+                width: 100%;
+                height: 100%;
+                margin: 1rem auto;
+                display: flex;
+                flex-direction: column;
+                flex: 1;
+            }
+        `;
+    }
+    constructor() {
+        super();
+        this.subscriptions = [];
+        this.papyros.launch();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.initializeLocalStorageProperty(this.papyros.i18n, "locale");
+        this.initializeLocalStorageProperty(this.papyros.runner, "code");
+        this.initializeLocalStorageProperty(this.papyros.runner, "programmingLanguage");
+        this.initializeLocalStorageProperty(this.papyros.constants, "activeTheme");
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.subscriptions.forEach(s => s());
+        this.subscriptions = [];
+    }
+    initializeLocalStorageProperty(state, property) {
+        const storedValue = localStorage.getItem(property);
+        if (storedValue !== null) {
+            try {
+                state[property] = JSON.parse(storedValue);
+            }
+            catch (_a) {
+                // ignore invalid JSON
+            }
+        }
+        const unsubscribe = state.subscribe(() => {
+            localStorage.setItem(property, JSON.stringify(state[property]));
+        }, property);
+        this.subscriptions.push(unsubscribe);
+    }
+    setTheme(theme) {
+        document.documentElement.style.setProperty("color-scheme", theme.dark ? "dark" : "light");
+        adoptStyles(this.renderRoot, [App_1.styles, theme.theme]);
+    }
+    render() {
+        this.setTheme(this.papyros.constants.activeTheme);
+        return html `
+            <div class="rows">
+                <div class="header">
+                    <div class="header-options">
+                        <span class="title">${this.t("Papyros.Papyros")}</span>
+                        <md-icon-button href="https://github.com/dodona-edu/papyros" target="_blank" rel="noopener">
+                            <md-icon>
+                                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 1.27a11 11 0 00-3.48 21.46c.55.09.73-.28.73-.55v-1.84c-3.03.64-3.67-1.46-3.67-1.46-.55-1.29-1.28-1.65-1.28-1.65-.92-.65.1-.65.1-.65 1.1 0 1.73 1.1 1.73 1.1.92 1.65 2.57 1.2 3.21.92a2 2 0 01.64-1.47c-2.47-.27-5.04-1.19-5.04-5.5 0-1.1.46-2.1 1.2-2.84a3.76 3.76 0 010-2.93s.91-.28 3.11 1.1c1.8-.49 3.7-.49 5.5 0 2.1-1.38 3.02-1.1 3.02-1.1a3.76 3.76 0 010 2.93c.83.74 1.2 1.74 1.2 2.94 0 4.21-2.57 5.13-5.04 5.4.45.37.82.92.82 2.02v3.03c0 .27.1.64.73.55A11 11 0 0012 1.27"></path></svg>
+                            </md-icon>
+                        </md-icon-button>
+                    </div>
+                    <div class="header-options">
+                        <p-theme-picker .papyros=${this.papyros}></p-theme-picker>
+                        <p-language-picker .papyros=${this.papyros}></p-language-picker>
+                        <p-programming-language-picker .papyros=${this.papyros}
+                        ></p-programming-language-picker>
+                    </div>
+                </div>
+                <div class="content">
+                    <div class="top">
+                        <div class="left container">
+                            <p-code-runner .papyros=${this.papyros} class="overflow">
+                                <p-example-picker .papyros=${this.papyros} slot="buttons"></p-example-picker>
+                            </p-code-runner>
+                        </div>
+                        <div class="right">
+                            <div class="container grow overflow">
+                                <p-output .papyros=${this.papyros}></p-output>
+                            </div>
+                            <div class="container">
+                                <p-input .papyros=${this.papyros}></p-input>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bottom container overflow">
+                        <p-debugger .papyros=${this.papyros}></p-debugger>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+};
+App = App_1 = __decorate([
+    customElement("p-app")
+], App);
+export { App };
+//# sourceMappingURL=App.js.map

package/dist/frontend/components/app/App.js.map

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

package/dist/frontend/components/app/ExamplePicker.d.ts

@@ -0,0 +1,7 @@
+import { PapyrosElement } from "../PapyrosElement";
+import { TemplateResult } from "lit";
+import "@material/web/select/outlined-select";
+import "@material/web/select/select-option";
+export declare class ExamplePicker extends PapyrosElement {
+    protected render(): TemplateResult;
+}

package/dist/frontend/components/app/ExamplePicker.js

@@ -0,0 +1,35 @@
+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 { PapyrosElement } from "../PapyrosElement";
+import { html } from "lit";
+import "@material/web/select/outlined-select";
+import "@material/web/select/select-option";
+import { RunState } from "../../state/Runner";
+let ExamplePicker = class ExamplePicker extends PapyrosElement {
+    render() {
+        return html `
+            <md-outlined-select
+                    ?disabled=${this.papyros.runner.state !== RunState.Ready || this.papyros.debugger.active}
+                    label=${this.t("Papyros.examples")}
+                    @input=${(e) => {
+            this.papyros.runner.code = this.papyros.examples.getExampleCode(e.target.value);
+        }}>
+                ${this.papyros.examples.names.map(name => html `
+                                    <md-select-option value=${name}>
+                                        <div slot="headline">${name}</div>
+                                    </md-select-option>
+                                `)}
+            </md-outlined-select>
+        `;
+    }
+};
+ExamplePicker = __decorate([
+    customElement("p-example-picker")
+], ExamplePicker);
+export { ExamplePicker };
+//# sourceMappingURL=ExamplePicker.js.map

package/dist/frontend/components/app/ExamplePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExamplePicker.js","sourceRoot":"","sources":["../../../../src/frontend/components/app/ExamplePicker.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,sCAAsC,CAAC;AAC9C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAGvC,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,cAAc;IAC1B,MAAM;QACrB,OAAO,IAAI,CAAA;;gCAEa,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM;4BAChF,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC;6BACzB,CAAC,CAAa,EAAE,EAAE;YACvC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;QAC1G,CAAC;kBACa,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;8DACA,IAAI;+DACH,IAAI;;iCAElC,CAAC;;SAEzB,CAAC;IACN,CAAC;CACJ,CAAA;AAjBY,aAAa;IADzB,aAAa,CAAC,kBAAkB,CAAC;GACrB,aAAa,CAiBzB"}

package/dist/frontend/components/app/LanguagePicker.d.ts

@@ -0,0 +1,7 @@
+import { PapyrosElement } from "../PapyrosElement";
+import { TemplateResult } from "lit";
+import "@material/web/select/outlined-select";
+import "@material/web/select/select-option";
+export declare class LanguagePicker extends PapyrosElement {
+    protected render(): TemplateResult;
+}

package/dist/frontend/components/app/LanguagePicker.js

@@ -0,0 +1,35 @@
+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 { PapyrosElement } from "../PapyrosElement";
+import { html } from "lit";
+import "@material/web/select/outlined-select";
+import "@material/web/select/select-option";
+let LanguagePicker = class LanguagePicker extends PapyrosElement {
+    render() {
+        return html `
+            <md-outlined-select
+                    @input=${(e) => {
+            this.papyros.i18n.locale = e.target.value;
+        }}>
+                ${this.papyros.i18n.availableLocales.map(lang => html `
+                                    <md-select-option
+                                        value=${lang}
+                                        ?selected=${this.papyros.i18n.locale === lang}
+                                    >
+                                        <div slot="headline">${this.t(`Papyros.locales.${lang}`)}</div>
+                                    </md-select-option>
+                                `)}
+            </md-outlined-select>
+        `;
+    }
+};
+LanguagePicker = __decorate([
+    customElement("p-language-picker")
+], LanguagePicker);
+export { LanguagePicker };
+//# sourceMappingURL=LanguagePicker.js.map

package/dist/frontend/components/app/LanguagePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguagePicker.js","sourceRoot":"","sources":["../../../../src/frontend/components/app/LanguagePicker.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,sCAAsC,CAAC;AAC9C,OAAO,oCAAoC,CAAC;AAGrC,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,cAAc;IAC3B,MAAM;QACrB,OAAO,IAAI,CAAA;;6BAEU,CAAC,CAAa,EAAE,EAAE;YACvC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;QACpE,CAAC;kBACa,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;gDAErB,IAAI;oDACA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,KAAK,IAAI;;+DAEtB,IAAI,CAAC,CAAC,CAAC,mBAAmB,IAAI,EAAE,CAAC;;iCAE/D,CAAC;;SAEzB,CAAC;IACN,CAAC;CACJ,CAAA;AAlBY,cAAc;IAD1B,aAAa,CAAC,mBAAmB,CAAC;GACtB,cAAc,CAkB1B"}

package/dist/frontend/components/app/ProgrammingLanguagePicker.d.ts

@@ -0,0 +1,7 @@
+import { PapyrosElement } from "../PapyrosElement";
+import { TemplateResult } from "lit";
+import "@material/web/select/outlined-select";
+import "@material/web/select/select-option";
+export declare class ProgrammingLanguagePicker extends PapyrosElement {
+    protected render(): TemplateResult;
+}

package/dist/frontend/components/app/ProgrammingLanguagePicker.js

@@ -0,0 +1,39 @@
+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 { PapyrosElement } from "../PapyrosElement";
+import { html } from "lit";
+import { ProgrammingLanguage } from "../../../ProgrammingLanguage";
+import "@material/web/select/outlined-select";
+import "@material/web/select/select-option";
+import { RunState } from "../../state/Runner";
+let ProgrammingLanguagePicker = class ProgrammingLanguagePicker extends PapyrosElement {
+    render() {
+        return html `
+            <md-outlined-select
+                    ?disabled=${this.papyros.runner.state !== RunState.Ready || this.papyros.debugger.active}
+                    label=${this.t("Papyros.programming_language")}
+                    @input=${(e) => {
+            this.papyros.runner.programmingLanguage = e.target.value;
+        }}>
+                ${Object.values(ProgrammingLanguage).map(lang => html `
+                                    <md-select-option
+                                        value=${lang}
+                                        ?selected=${this.papyros.runner.programmingLanguage === lang}
+                                    >
+                                        <div slot="headline">${lang}</div>
+                                    </md-select-option>
+                                `)}
+            </md-outlined-select>
+        `;
+    }
+};
+ProgrammingLanguagePicker = __decorate([
+    customElement("p-programming-language-picker")
+], ProgrammingLanguagePicker);
+export { ProgrammingLanguagePicker };
+//# sourceMappingURL=ProgrammingLanguagePicker.js.map

package/dist/frontend/components/app/ProgrammingLanguagePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgrammingLanguagePicker.js","sourceRoot":"","sources":["../../../../src/frontend/components/app/ProgrammingLanguagePicker.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,sCAAsC,CAAC;AAC9C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAGvC,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,cAAc;IACtC,MAAM;QACrB,OAAO,IAAI,CAAA;;gCAEa,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM;4BAChF,IAAI,CAAC,CAAC,CAAC,8BAA8B,CAAC;6BACrC,CAAC,CAAa,EAAE,EAAE;YACvC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,mBAAmB,GAAI,CAAC,CAAC,MAA2B,CAAC,KAA4B,CAAC;QAC1G,CAAC;kBACa,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;gDAErB,IAAI;oDACA,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,mBAAmB,KAAK,IAAI;;+DAErC,IAAI;;iCAElC,CAAC;;SAEzB,CAAC;IACN,CAAC;CACJ,CAAA;AApBY,yBAAyB;IADrC,aAAa,CAAC,+BAA+B,CAAC;GAClC,yBAAyB,CAoBrC"}

package/dist/frontend/components/app/examples/JavaScriptExamples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JavaScriptExamples.js","sourceRoot":"","sources":["../../../../../src/frontend/components/app/examples/JavaScriptExamples.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,mBAAmB,GAAG;IAC/B,cAAc,EAAE,iCAAiC;IACjD,OAAO,EACH;kCAC0B;IAC9B,WAAW,EACP;;;;;;;;;CASP;CACA,CAAC"}

package/dist/frontend/components/app/examples/PythonExamples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PythonExamples.js","sourceRoot":"","sources":["../../../../../src/frontend/components/app/examples/PythonExamples.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG;IAC3B,eAAe,EAAE,wBAAwB;IACzC,OAAO,EACH;yBACiB;IACrB,WAAW,EACP;;;yCAGiC;IACrC,UAAU,EACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDP;IACG,OAAO,EACH;;;;;;;;;;;;;;;CAeP;IACG,WAAW,EACP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BP;IACG,SAAS,EACL;;;;CAIP;IACG,OAAO,EACH;;;;;;;CAOP;IACG,YAAY,EACR;;;;;;;;;;;;;;;;;;CAkBP;IACG,OAAO,EAAE;;;;;;;;CAQZ;IACG,UAAU,EAAE;;;;;;;;CAQf;IACG,WAAW,EAAE;;;;CAIhB;CACA,CAAC"}

package/dist/frontend/components/app/themes/ThemePicker.d.ts

@@ -0,0 +1,11 @@
+import { TemplateResult } from "lit";
+import "./ThemedButton";
+import "@material/web/icon/icon";
+import "@material/web/iconbutton/icon-button";
+import { PapyrosElement } from "../../PapyrosElement";
+import { ThemeOption } from "../../../state/Constants";
+export declare class ThemePicker extends PapyrosElement {
+    picking: boolean;
+    setTheme(theme: ThemeOption): void;
+    protected render(): TemplateResult[] | TemplateResult;
+}

package/dist/frontend/components/app/themes/ThemePicker.js

@@ -0,0 +1,47 @@
+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 { html } from "lit";
+import "./ThemedButton";
+import "@material/web/icon/icon";
+import "@material/web/iconbutton/icon-button";
+import { PapyrosElement } from "../../PapyrosElement";
+let ThemePicker = class ThemePicker extends PapyrosElement {
+    constructor() {
+        super(...arguments);
+        this.picking = false;
+    }
+    setTheme(theme) {
+        this.picking = false;
+        this.papyros.constants.activeTheme = theme;
+    }
+    render() {
+        if (!this.picking) {
+            return html `
+                <md-icon-button @click=${() => this.picking = true}>
+                    <md-icon>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#currentCollor"><path d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 32.5-156t88-127Q256-817 330-848.5T488-880q80 0 151 27.5t124.5 76q53.5 48.5 85 115T880-518q0 115-70 176.5T640-280h-74q-9 0-12.5 5t-3.5 11q0 12 15 34.5t15 51.5q0 50-27.5 74T480-80Zm0-400Zm-220 40q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm120-160q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm200 0q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm120 160q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17ZM480-160q9 0 14.5-5t5.5-13q0-14-15-33t-15-57q0-42 29-67t71-25h70q66 0 113-38.5T800-518q0-121-92.5-201.5T488-800q-136 0-232 93t-96 227q0 133 93.5 226.5T480-160Z"/></svg>
+                    </md-icon>
+                </md-icon-button>
+                `;
+        }
+        return Object.values(this.papyros.constants.themes).map(t => html `
+            <p-themed-button .theme=${t.theme} 
+                             .dark=${t.dark}
+                            @click=${() => this.setTheme(t)}
+            ></p-themed-button>
+        `);
+    }
+};
+__decorate([
+    property({ state: true })
+], ThemePicker.prototype, "picking", void 0);
+ThemePicker = __decorate([
+    customElement("p-theme-picker")
+], ThemePicker);
+export { ThemePicker };
+//# sourceMappingURL=ThemePicker.js.map

package/dist/frontend/components/app/themes/ThemePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemePicker.js","sourceRoot":"","sources":["../../../../../src/frontend/components/app/themes/ThemePicker.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,gBAAgB,CAAC;AACxB,OAAO,yBAAyB,CAAC;AACjC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAK/C,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,cAAc;IAAxC;;QAEC,YAAO,GAAG,KAAK,CAAC;IAyBxB,CAAC;IAvBG,QAAQ,CAAC,KAAkB;QACvB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,WAAW,GAAG,KAAK,CAAC;IAC/C,CAAC;IAEkB,MAAM;QACrB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAChB,OAAO,IAAI,CAAA;yCACkB,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI;;;;;iBAKjD,CAAC;QACV,CAAC;QAED,OAAO,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAA;sCACnC,CAAC,CAAC,KAAK;qCACR,CAAC,CAAC,IAAI;qCACN,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;;SAElD,CAAC,CAAC;IACP,CAAC;CACJ,CAAA;AAzBO;IADH,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;4CACN;AAFX,WAAW;IADvB,aAAa,CAAC,gBAAgB,CAAC;GACnB,WAAW,CA2BvB"}

package/dist/frontend/components/app/themes/ThemedButton.d.ts

@@ -0,0 +1,9 @@
+import { CSSResult, LitElement, TemplateResult } from "lit";
+import "@material/web/icon/icon";
+import "@material/web/iconbutton/filled-icon-button";
+export declare class ThemedButton extends LitElement {
+    theme: CSSResult | undefined;
+    dark: boolean;
+    connectedCallback(): void;
+    protected render(): TemplateResult;
+}

package/dist/frontend/components/app/themes/ThemedButton.js

@@ -0,0 +1,43 @@
+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 { adoptStyles, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "@material/web/icon/icon";
+import "@material/web/iconbutton/filled-icon-button";
+let ThemedButton = class ThemedButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.dark = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.theme) {
+            adoptStyles(this.renderRoot, [this.theme]);
+        }
+    }
+    render() {
+        return html `
+            <md-filled-icon-button>
+                <md-icon>
+                    ${this.dark ? html `
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/></svg>
+                    ` : html `
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z"/></svg>
+                    `}
+                </md-icon>
+            </md-filled-icon-button>
+        `;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], ThemedButton.prototype, "dark", void 0);
+ThemedButton = __decorate([
+    customElement("p-themed-button")
+], ThemedButton);
+export { ThemedButton };
+//# sourceMappingURL=ThemedButton.js.map

package/dist/frontend/components/app/themes/ThemedButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemedButton.js","sourceRoot":"","sources":["../../../../../src/frontend/components/app/themes/ThemedButton.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAa,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,yBAAyB,CAAC;AACjC,OAAO,6CAA6C,CAAC;AAI9C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAGC,SAAI,GAAY,KAAK,CAAC;IAsB9B,CAAC;IApBmB,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAG,IAAI,CAAC,KAAK,EAAE,CAAC;YACZ,WAAW,CAAE,IAAI,CAAC,UAAyB,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QAC/D,CAAC;IACL,CAAC;IAEkB,MAAM;QACrB,OAAO,IAAI,CAAA;;;sBAGG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;qBAEjB,CAAC,CAAC,CAAC,IAAI,CAAA;;qBAEP;;;SAGZ,CAAC;IACN,CAAC;CACJ,CAAA;AAtBO;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACF;AAHjB,YAAY;IADxB,aAAa,CAAC,iBAAiB,CAAC;GACpB,YAAY,CAyBxB"}

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

@@ -0,0 +1,8 @@
+import { CodeMirrorEditor } from "./CodeMirrorEditor";
+import { CSSResult } from "lit";
+export declare class BatchInputEditor extends CodeMirrorEditor {
+    static get styles(): CSSResult;
+    set usedLines(value: number);
+    set readOnly(value: boolean);
+    constructor();
+}

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

@@ -0,0 +1,54 @@
+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 { CodeMirrorEditor } from "./CodeMirrorEditor";
+import { EditorView, keymap } from "@codemirror/view";
+import { css } from "lit";
+import { defaultKeymap } from "@codemirror/commands";
+import { setUsedLines, usedLineExtension } from "./Extensions";
+let BatchInputEditor = class BatchInputEditor extends CodeMirrorEditor {
+    static get styles() {
+        return css `
+            :host {
+                width: 100%;
+                height: 100%;
+            }
+        `;
+    }
+    set usedLines(value) {
+        var _a;
+        const lines = Array.from({ length: value }, (a, i) => i + 1);
+        (_a = this.view) === null || _a === void 0 ? void 0 : _a.dispatch({
+            effects: setUsedLines.of(lines),
+        });
+    }
+    set readOnly(value) {
+        this.configure({
+            debugging: value ? EditorView.editable.of(false) : [],
+        });
+    }
+    constructor() {
+        super();
+        this.configure({
+            default: [
+                usedLineExtension,
+                keymap.of(defaultKeymap),
+            ]
+        });
+    }
+};
+__decorate([
+    property({ type: Number })
+], BatchInputEditor.prototype, "usedLines", null);
+__decorate([
+    property({ type: Boolean })
+], BatchInputEditor.prototype, "readOnly", null);
+BatchInputEditor = __decorate([
+    customElement("p-batch-input-editor")
+], BatchInputEditor);
+export { BatchInputEditor };
+//# sourceMappingURL=BatchInputEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BatchInputEditor.js","sourceRoot":"","sources":["../../../../src/frontend/components/code_mirror/BatchInputEditor.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,GAAG,EAAa,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGxD,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,gBAAgB;IAClD,MAAM,KAAK,MAAM;QACb,OAAO,GAAG,CAAA;;;;;SAKT,CAAA;IACL,CAAC;IAGD,IAAI,SAAS,CAAC,KAAa;;QACvB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAC,CAAC,CAAC,CAAA;QAC1D,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ,CAAC;YAChB,OAAO,EAAE,YAAY,CAAC,EAAE,CAAC,KAAK,CAAC;SAClC,CAAC,CAAA;IACN,CAAC;IAGD,IAAI,QAAQ,CAAC,KAAc;QACvB,IAAI,CAAC,SAAS,CAAC;YACX,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAA,CAAC,CAAC,EAAE;SACvD,CAAC,CAAA;IACN,CAAC;IAED;QACI,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,SAAS,CAAC;YACX,OAAO,EAAE;gBACL,iBAAiB;gBACjB,MAAM,CAAC,EAAE,CAAC,aAAa,CAAC;aAC3B;SACJ,CAAC,CAAA;IACN,CAAC;CAEJ,CAAA;AAxBG;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAM1B;AAGD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDAK3B;AAvBQ,gBAAgB;IAD5B,aAAa,CAAC,sBAAsB,CAAC;GACzB,gBAAgB,CAmC5B"}

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

@@ -0,0 +1,24 @@
+import { CodeMirrorEditor } from "./CodeMirrorEditor";
+import { CSSResult } from "lit";
+import { WorkerDiagnostic } from "../../../backend/Backend";
+import { ProgrammingLanguage } from "../../../ProgrammingLanguage";
+export declare class CodeEditor extends CodeMirrorEditor {
+    static get styles(): CSSResult;
+    set debug(value: boolean);
+    set debugLine(value: number | undefined);
+    set testLines(value: number[] | undefined);
+    /**
+     * Override the value setter to temporarily disable read-only ranges
+     */
+    dispatchChange(): void;
+    set testLineCount(value: number | undefined);
+    set testTranslations(value: {
+        description: string;
+        edit: string;
+        remove: string;
+    });
+    set programmingLanguage(value: ProgrammingLanguage);
+    set lintingSource(lintSource: () => Promise<readonly WorkerDiagnostic[]>);
+    set indentLength(length: number);
+    constructor();
+}