@tuprolog/arg2p-ui 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,49 @@
-# Temporary Holding Version
+# @tuprolog/arg2p-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The user interface of [Arg2P](https://tuprolog.github.io/arg2p-kt/) as web components: the
+[playground](https://tuprolog.github.io/arg2p-kt-web/) is made of them, and so is the solver of the extension of VS
+Code. They run on an engine that gives plain data: the solver of the browser (`@tuprolog/arg2p-ui/js`, in a worker),
+or the language server of Arg2P on the JVM.
+
+```sh
+npm install @tuprolog/arg2p-ui @tuprolog/arg2p
+```
+
+```html
+<arg2p-editor id="theory" kind="theory"></arg2p-editor>
+<arg2p-editor id="query" kind="query"></arg2p-editor>
+<arg2p-solutions></arg2p-solutions>
+<arg2p-graph></arg2p-graph>
+
+<script type="module">
+    import '@tuprolog/arg2p-ui';
+    import { JsEngine } from '@tuprolog/arg2p-ui/js';
+
+    const engine = new JsEngine();
+    const [theory, query] = ['#theory', '#query'].map(it => document.querySelector(it));
+    theory.engine = query.engine = engine;
+    const solutions = document.querySelector('arg2p-solutions');
+    const graph = document.querySelector('arg2p-graph');
+    solutions.addEventListener('arg2p-solution', e => graph.showSolution(e.detail.solution, e.detail.run));
+    query.addEventListener('arg2p-submit', async () => {
+        const run = await engine.solve({ theory: theory.value, query: query.value, flags: 'queryMode.' });
+        solutions.start(run);
+    });
+</script>
+```
+
+## Components
+
+| Element | |
+| --- | --- |
+| `<arg2p-editor>` | A theory, a query or flags (CodeMirror), its syntax errors shown as it is typed |
+| `<arg2p-solutions>` | The solutions of a query, asked for one at a time |
+| `<arg2p-graph>` | The argument graph of a solution: its stages, the popup of each argument, its picture |
+| `<arg2p-framework>` | An abstract framework drawn: drawing writes its theory, its theory edited is drawn again |
+| `<arg2p-flags>` | The flags, the profile first, each with its value in effect and where it comes from |
+
+`@tuprolog/arg2p-ui/data` has what they are built on with no DOM: the contract of engines, the flags and profiles, the
+formats of abstract frameworks (APX, TGF, ICCMA'23), the layout of graphs.
+
+The components take their colours from custom properties (`--arg2p-surface`, `--arg2p-text`, `--arg2p-accent`, ...),
+with a light theme otherwise.

package/dist/components/arg2p-editor.d.ts

@@ -0,0 +1,73 @@
+import { type Text } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { LitElement, type PropertyValues } from 'lit';
+import type { Engine, SyntaxProblem } from '../engine.js';
+export type EditorKind = 'theory' | 'query' | 'flags';
+/** Where [problem] is in [doc]: its token, held within the text */
+export declare function rangeOf(doc: Text, problem: Pick<SyntaxProblem, 'line' | 'column' | 'length'>): {
+    from: number;
+    to: number;
+};
+/**
+ * An editor of a theory, a query or flags, in the language of arg2p. The engine checks the text once the typing
+ * settles: a syntax error is underlined (its message shows when hovering it), and written under the editor, which
+ * takes to it when tapped (touch screens have no hover). A query is one line: Enter submits it.
+ *
+ * Events: `arg2p-change` with the text, as it is typed; `arg2p-submit` when Enter is pressed in a query.
+ */
+export declare class Arg2pEditor extends LitElement {
+    static properties: {
+        value: {};
+        kind: {
+            reflect: boolean;
+        };
+        engine: {
+            attribute: boolean;
+        };
+        label: {};
+        placeholder: {};
+        readonly: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        problem: {
+            state: boolean;
+        };
+    };
+    /** The text */
+    value: string;
+    kind: EditorKind;
+    /** What checks the text; without it, the text is not checked */
+    engine: Pick<Engine, 'check'> | null;
+    /** What the text is called in the messages (the theory, the flags, ...) */
+    label: string;
+    placeholder: string;
+    readonly: boolean;
+    private problem;
+    private view;
+    private readonly editable;
+    private readonly hint;
+    private readonly checking;
+    /** The editor, for what the element does not do itself */
+    get editor(): EditorView | null;
+    /** Shows [problem] (found by running, say) at once, and takes the editor to it */
+    report(problem: SyntaxProblem): void;
+    /** Takes the editor to [line] and [column] (from 1), focused */
+    reveal(line: number, column: number): void;
+    focus(): void;
+    protected firstUpdated(): void;
+    protected updated(changed: PropertyValues): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    private extensions;
+    private check;
+    private diagnostic;
+    private emit;
+    protected render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arg2p-editor': Arg2pEditor;
+    }
+}

package/dist/components/arg2p-editor.js

@@ -0,0 +1,244 @@
+import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
+import { bracketMatching } from '@codemirror/language';
+import { linter, setDiagnostics } from '@codemirror/lint';
+import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
+import { Compartment, EditorState, Prec } from '@codemirror/state';
+import { EditorView, drawSelection, keymap, lineNumbers, placeholder } from '@codemirror/view';
+import { LitElement, css, html, nothing } from 'lit';
+import { arg2p } from '../editor/language.js';
+import { tokens } from '../theme.js';
+// How long the typing is let be before the text is checked
+const CHECK_DELAY = 500;
+/** Where [problem] is in [doc]: its token, held within the text */
+export function rangeOf(doc, problem) {
+    const line = doc.line(Math.max(1, Math.min(problem.line, doc.lines)));
+    const from = line.from + Math.max(0, Math.min(problem.column - 1, line.length));
+    return { from, to: Math.max(from, Math.min(from + problem.length, line.to)) };
+}
+/**
+ * An editor of a theory, a query or flags, in the language of arg2p. The engine checks the text once the typing
+ * settles: a syntax error is underlined (its message shows when hovering it), and written under the editor, which
+ * takes to it when tapped (touch screens have no hover). A query is one line: Enter submits it.
+ *
+ * Events: `arg2p-change` with the text, as it is typed; `arg2p-submit` when Enter is pressed in a query.
+ */
+export class Arg2pEditor extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** The text */
+        this.value = '';
+        this.kind = 'theory';
+        /** What checks the text; without it, the text is not checked */
+        this.engine = null;
+        /** What the text is called in the messages (the theory, the flags, ...) */
+        this.label = '';
+        this.placeholder = '';
+        this.readonly = false;
+        // the syntax error shown, if any
+        this.problem = null;
+        this.view = null;
+        this.editable = new Compartment();
+        this.hint = new Compartment();
+        this.checking = new Compartment();
+    }
+    static { this.properties = {
+        value: {},
+        kind: { reflect: true },
+        engine: { attribute: false },
+        label: {},
+        placeholder: {},
+        readonly: { type: Boolean, reflect: true },
+        problem: { state: true },
+    }; }
+    /** The editor, for what the element does not do itself */
+    get editor() {
+        return this.view;
+    }
+    /** Shows [problem] (found by running, say) at once, and takes the editor to it */
+    report(problem) {
+        const view = this.view;
+        if (view === null)
+            return;
+        view.dispatch(setDiagnostics(view.state, [this.diagnostic(view.state.doc, problem)]));
+        this.problem = problem;
+        this.reveal(problem.line, problem.column);
+    }
+    /** Takes the editor to [line] and [column] (from 1), focused */
+    reveal(line, column) {
+        const view = this.view;
+        if (view === null)
+            return;
+        const { from } = rangeOf(view.state.doc, { line, column, length: 0 });
+        view.dispatch({ selection: { anchor: from }, effects: EditorView.scrollIntoView(from, { y: 'center' }) });
+        view.focus();
+    }
+    focus() {
+        this.view?.focus();
+    }
+    firstUpdated() {
+        this.view = new EditorView({
+            root: this.renderRoot,
+            parent: this.renderRoot.querySelector('.editor'),
+            state: EditorState.create({ doc: this.value, extensions: this.extensions() }),
+        });
+    }
+    updated(changed) {
+        const view = this.view;
+        if (view === null)
+            return;
+        if (changed.has('value') && this.value !== view.state.doc.toString()) {
+            view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: this.value } });
+        }
+        if (changed.has('readonly'))
+            view.dispatch({ effects: this.editable.reconfigure(EditorState.readOnly.of(this.readonly)) });
+        if (changed.has('placeholder'))
+            view.dispatch({ effects: this.hint.reconfigure(placeholder(this.placeholder)) });
+        if (changed.has('engine') || changed.has('kind'))
+            view.dispatch({ effects: this.checking.reconfigure(this.check()) });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.view?.destroy();
+        this.view = null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.hasUpdated && this.view === null)
+            this.firstUpdated();
+    }
+    extensions() {
+        const query = this.kind === 'query';
+        return [
+            arg2p(),
+            history(),
+            drawSelection(),
+            bracketMatching(),
+            highlightSelectionMatches(),
+            query ? [] : lineNumbers(),
+            query ? [] : EditorView.lineWrapping,
+            // a query is one line: Enter submits it, and a text pasted in is joined on one line
+            query
+                ? [
+                    Prec.highest(keymap.of([{ key: 'Enter', run: () => (this.emit('arg2p-submit', { value: this.value }), true) }])),
+                    EditorState.transactionFilter.of(tr => (tr.newDoc.lines > 1 ? [tr, { changes: { from: 0, to: tr.newDoc.length, insert: tr.newDoc.toString().replace(/\s*\n\s*/g, ' ') }, sequential: true }] : tr)),
+                ]
+                : [],
+            keymap.of([...defaultKeymap, ...historyKeymap, ...searchKeymap, indentWithTab]),
+            this.editable.of(EditorState.readOnly.of(this.readonly)),
+            this.hint.of(placeholder(this.placeholder)),
+            this.checking.of(this.check()),
+            EditorView.updateListener.of(update => {
+                if (!update.docChanged)
+                    return;
+                const value = update.state.doc.toString();
+                if (value === this.value)
+                    return;
+                this.value = value;
+                this.emit('arg2p-change', { value });
+            }),
+            EditorView.theme({
+                '&': { height: '100%', backgroundColor: 'var(--_surface)', color: 'var(--_text)' },
+                '&.cm-focused': { outline: 'none' },
+                '.cm-scroller': { fontFamily: 'var(--_mono)', lineHeight: '1.5' },
+                // the text as typed: no ligature turns => into an arrow
+                '.cm-content': { caretColor: 'var(--_text)', fontVariantLigatures: 'none' },
+                '.cm-cursor, .cm-dropCursor': { borderLeftColor: 'var(--_text)' },
+                '.cm-gutters': { backgroundColor: 'var(--_surface-2)', color: 'var(--_muted)', border: 'none' },
+                '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, ::selection': {
+                    backgroundColor: 'color-mix(in srgb, var(--_accent) 25%, transparent) !important',
+                },
+                '.cm-placeholder': { color: 'var(--_muted)' },
+                '.cm-tooltip': { backgroundColor: 'var(--_surface)', color: 'var(--_text)', border: '1px solid var(--_border)' },
+            }),
+        ];
+    }
+    // The check of the text by the engine, once the typing settles: the problem it finds is shown under the editor too
+    check() {
+        const engine = this.engine;
+        if (engine === null)
+            return [];
+        const kind = this.kind === 'query' ? 'query' : 'theory';
+        return linter(async (view) => {
+            const doc = view.state.doc;
+            let problem = null;
+            try {
+                problem = await engine.check(doc.toString(), kind);
+            }
+            catch {
+                // an engine that cannot check now (stopped, say) finds nothing
+            }
+            this.problem = problem;
+            return problem === null ? [] : [this.diagnostic(doc, problem)];
+        }, { delay: CHECK_DELAY });
+    }
+    diagnostic(doc, problem) {
+        return { ...rangeOf(doc, problem), severity: 'error', message: problem.message, source: 'arg2p' };
+    }
+    emit(type, detail) {
+        this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }));
+    }
+    render() {
+        const problem = this.problem;
+        return html `
+            <div class="editor"></div>
+            ${problem === null
+            ? nothing
+            : html `
+                      <div
+                          class="problem"
+                          role="button"
+                          tabindex="0"
+                          title="Go to the error"
+                          @click=${() => this.reveal(problem.line, problem.column)}
+                          @keydown=${(e) => {
+                if (e.key !== 'Enter' && e.key !== ' ')
+                    return;
+                e.preventDefault();
+                this.reveal(problem.line, problem.column);
+            }}
+                      >
+                          <span class="place">${this.label ? `${this.label}, ` : ''}line ${problem.line}, col ${problem.column}</span>
+                          <span>${problem.message}</span>
+                      </div>
+                  `}
+        `;
+    }
+    static { this.styles = [
+        tokens,
+        css `
+            :host {
+                display: flex;
+                flex-direction: column;
+                min-height: 0;
+                border: 1px solid var(--_border);
+                border-radius: 4px;
+                overflow: hidden;
+                background: var(--_surface);
+            }
+            :host([kind='query']) {
+                flex: none;
+            }
+            .editor {
+                flex: 1;
+                min-height: 0;
+                font-size: 14px;
+            }
+            .problem {
+                display: flex;
+                gap: 8px;
+                padding: 4px 8px;
+                font-size: 12px;
+                color: var(--_error);
+                background: color-mix(in srgb, var(--_error) 8%, transparent);
+                border-top: 1px solid color-mix(in srgb, var(--_error) 30%, transparent);
+                cursor: pointer;
+            }
+            .place {
+                font-weight: 600;
+                white-space: nowrap;
+            }
+        `,
+    ]; }
+}
+customElements.define('arg2p-editor', Arg2pEditor);
+//# sourceMappingURL=arg2p-editor.js.map

package/dist/components/arg2p-editor.js.map

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

package/dist/components/arg2p-flags.d.ts

@@ -0,0 +1,58 @@
+import { LitElement, type PropertyValues } from 'lit';
+import type { Engine } from '../engine.js';
+import { type Flag } from '../flags/schema.js';
+/** Where the value of a flag in effect comes from */
+export type Source = 'theory' | 'flags' | 'profile' | 'default';
+/**
+ * The flags of the solver, as controls over their text (Prolog facts, the source of truth: every change rewrites the
+ * lines of its flag alone). The profile comes first: it presets the flags its framework needs, and the flags that mean
+ * something for it are shown, the others folded away. Every flag shows the value in effect for the theory, as the
+ * engine tells it, and where it comes from: the theory (which wins: it is changed in the theory), the flags, the
+ * profile, or the default. A flag the flags state can be reset, to take the value of the profile again.
+ *
+ * Events: `arg2p-flags-change` with the flags, after every change made with the controls.
+ */
+export declare class Arg2pFlags extends LitElement {
+    static properties: {
+        flags: {};
+        theory: {};
+        engine: {
+            attribute: boolean;
+        };
+        settings: {
+            state: boolean;
+        };
+    };
+    /** The flags, as Prolog facts */
+    flags: string;
+    /** The theory the flags are for: it may state flags, and its profile */
+    theory: string;
+    /** What tells the settings in effect; without it, the panel shows what the flags state */
+    engine: Pick<Engine, 'settings'> | null;
+    private settings;
+    private timer;
+    private asked;
+    protected updated(changed: PropertyValues): void;
+    disconnectedCallback(): void;
+    private ask;
+    /** The values in effect of [flag], and where they come from */
+    effective(flag: Pick<Flag, 'name'>): {
+        values: readonly string[];
+        source: Source;
+    };
+    private profile;
+    private change;
+    private set;
+    /** What the panel finds wrong with the flags in effect */
+    warnings(): string[];
+    protected render(): import("lit-html").TemplateResult<1>;
+    private group;
+    private flag;
+    private badge;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'arg2p-flags': Arg2pFlags;
+    }
+}