@theoremjs/studio 0.0.0-stage → 0.3.2

package/ui/built/theorem-studio.variants.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @generated by `astryx theme build` — do not edit manually.
+ * Source: ui/studio-theme.ts
+ * Command: astryx theme build ui/studio-theme.ts --out ui/built/theme.css
+ * CLI: @astryxdesign/cli@0.7.0
+ * Core: @astryxdesign/core@0.7.0
+ */
+
+// Generated by astryx theme build
+export {};
+
+declare module '@astryxdesign/core/Badge' {
+  interface BadgeVariantMap {
+    'gray': true;
+  }
+}
+
+declare module '@astryxdesign/core/Card' {
+  interface CardVariantMap {
+    'bubble': true;
+  }
+}
+
+declare module '@astryxdesign/core/Section' {
+  interface SectionVariantMap {
+    'raised': true;
+  }
+}

package/ui/code/monaco-contributions.d.ts

@@ -0,0 +1,45 @@
+/** Side-effect registers. Monaco ships these as JavaScript with no declarations. */
+declare module 'monaco-editor/editor/browser/coreCommands';
+declare module 'monaco-editor/editor/browser/widget/codeEditor/codeEditorWidget';
+declare module 'monaco-editor/editor/common/standaloneStrings';
+declare module 'monaco-editor/editor/contrib/bracketMatching/browser/bracketMatching';
+declare module 'monaco-editor/editor/contrib/caretOperations/browser/caretOperations';
+declare module 'monaco-editor/editor/contrib/clipboard/browser/clipboard';
+declare module 'monaco-editor/editor/contrib/comment/browser/comment';
+declare module 'monaco-editor/editor/contrib/contextmenu/browser/contextmenu';
+declare module 'monaco-editor/editor/contrib/cursorUndo/browser/cursorUndo';
+declare module 'monaco-editor/editor/contrib/find/browser/findController';
+declare module 'monaco-editor/editor/contrib/folding/browser/folding';
+declare module 'monaco-editor/editor/contrib/gotoError/browser/gotoError';
+declare module 'monaco-editor/editor/contrib/gotoError/browser/markerSelectionStatus';
+declare module 'monaco-editor/editor/contrib/gotoSymbol/browser/goToCommands';
+declare module 'monaco-editor/editor/contrib/gotoSymbol/browser/link/goToDefinitionAtPosition';
+declare module 'monaco-editor/editor/contrib/hover/browser/hoverContribution';
+declare module 'monaco-editor/editor/contrib/indentation/browser/indentation';
+declare module 'monaco-editor/editor/contrib/linesOperations/browser/linesOperations';
+declare module 'monaco-editor/editor/contrib/links/browser/links';
+declare module 'monaco-editor/editor/contrib/multicursor/browser/multicursor';
+declare module 'monaco-editor/editor/contrib/parameterHints/browser/parameterHints';
+declare module 'monaco-editor/editor/contrib/placeholderText/browser/placeholderText.contribution';
+declare module 'monaco-editor/editor/contrib/readOnlyMessage/browser/contribution';
+declare module 'monaco-editor/editor/contrib/smartSelect/browser/smartSelect';
+declare module 'monaco-editor/editor/contrib/snippet/browser/snippetController2';
+declare module 'monaco-editor/editor/contrib/suggest/browser/suggestController';
+declare module 'monaco-editor/editor/contrib/tokenization/browser/tokenization';
+declare module 'monaco-editor/editor/contrib/unicodeHighlighter/browser/unicodeHighlighter';
+declare module 'monaco-editor/editor/contrib/unusualLineTerminators/browser/unusualLineTerminators';
+declare module 'monaco-editor/editor/contrib/wordHighlighter/browser/wordHighlighter';
+declare module 'monaco-editor/editor/contrib/wordOperations/browser/wordOperations';
+declare module 'monaco-editor/editor/contrib/wordPartOperations/browser/wordPartOperations';
+declare module 'monaco-editor/features/find/register';
+
+declare module 'monaco-editor/languages/features/typescript/tsWorker' {
+  export class TypeScriptWorker {
+    constructor(ctx: unknown, createData: unknown);
+    getScriptFileNames(): string[];
+  }
+}
+
+declare module 'monaco-editor/internal/common/initialize' {
+  export function initialize(callback: (ctx: unknown, createData: unknown) => object): void;
+}

package/ui/code/studio-code.d.ts

@@ -0,0 +1,7 @@
+import type { StudioCodeProps } from '../studio-host.ts';
+/**
+ * The open agent's or provider's file. `text` is the latest print. While the visitor is
+ * typing, the model keeps their text. `hold` means there is no new print,
+ * so the text they have stays. `isReadOnly` takes no edit.
+ */
+export declare function StudioCode({ text, hold, isReadOnly, issues, onApply }: StudioCodeProps): import("react").JSX.Element;

package/ui/code/studio-code.js

@@ -0,0 +1,253 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+/** What reading the file produced: errors at a spot, or the fields it read. */
+const APPLY_MS = 300;
+/** How long typing has to stay quiet before the typechecker worker is terminated. */
+const TYPE_IDLE_MS = 2000;
+/** Marks the text's own errors and the draft's issues on the lines they belong to. */
+function paintMarkers({ editor, monaco, spans, errors }, issues) {
+    const model = editor?.getModel();
+    if (!monaco || !model)
+        return;
+    monaco.editor.setModelMarkers(model, 'studio', [
+        ...errors.map((error) => marker(monaco, error.line, error.column, error.message)),
+        ...issueMarkers(monaco, spans, issues),
+    ]);
+}
+/**
+ * The open agent's or provider's file. `text` is the latest print. While the visitor is
+ * typing, the model keeps their text. `hold` means there is no new print,
+ * so the text they have stays. `isReadOnly` takes no edit.
+ */
+export function StudioCode({ text, hold, isReadOnly = false, issues, onApply }) {
+    const node = useRef(null);
+    const apply = useRef(onApply);
+    const printed = useRef(text);
+    const readOnly = useRef(isReadOnly);
+    readOnly.current = isReadOnly;
+    const issuesRef = useRef(issues);
+    const session = useRef({ spans: [], errors: [], setting: false, dirty: false });
+    apply.current = onApply;
+    printed.current = text;
+    issuesRef.current = issues;
+    useEffect(() => {
+        const host = node.current;
+        if (!host)
+            return;
+        const life = { disposed: false };
+        let timer;
+        let idleTimer;
+        let typeToken = 0;
+        let typeSession;
+        let typeStarting = false;
+        let typeReady = false;
+        const stopTypes = () => {
+            typeToken += 1;
+            if (idleTimer)
+                clearTimeout(idleTimer);
+            idleTimer = undefined;
+            typeSession?.stop();
+            typeSession = undefined;
+            typeStarting = false;
+            typeReady = false;
+        };
+        const inTypeUi = (node) => {
+            if (host.contains(node))
+                return true;
+            return (node instanceof Element &&
+                !!node.closest('.suggest-widget, .parameter-hints-widget, .monaco-hover, .monaco-menu-container, .context-view'));
+        };
+        const typeUiOpen = () => !!document.querySelector('.suggest-widget.visible, .parameter-hints-widget.visible');
+        let removeLeave;
+        const paint = () => {
+            paintMarkers(session.current, issuesRef.current);
+        };
+        void (async () => {
+            const monaco = await import("./studio-monaco.js");
+            // Colour only, until the visitor types. The typechecker is a compiler in
+            // a worker, so it stays out of this import.
+            await import('monaco-editor/languages/definitions/typescript/register');
+            const editorWorker = (await import('monaco-editor/editor/editor.worker?worker')).default;
+            self.MonacoEnvironment = {
+                getWorker() {
+                    return new editorWorker();
+                },
+            };
+            if (life.disposed || !host.isConnected)
+                return;
+            const dark = document.documentElement.dataset.theme === 'dark' ||
+                globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
+            const uri = monaco.Uri.parse('file:///agent.ts');
+            monaco.editor.getModel(uri)?.dispose();
+            const model = monaco.editor.createModel(printed.current, 'typescript', uri);
+            const editor = monaco.editor.create(host, {
+                model,
+                readOnly: readOnly.current,
+                language: 'typescript',
+                theme: dark ? 'vs-dark' : 'vs',
+                minimap: { enabled: false },
+                fontSize: 13,
+                wordWrap: 'on',
+                wrappingIndent: 'indent',
+                scrollBeyondLastLine: false,
+                automaticLayout: true,
+                fixedOverflowWidgets: true,
+                tabSize: 2,
+                padding: { top: 12 },
+                quickSuggestions: { other: true, comments: false, strings: true },
+                suggestOnTriggerCharacters: true,
+                acceptSuggestionOnEnter: 'on',
+                tabCompletion: 'on',
+                wordBasedSuggestions: 'currentDocument',
+                parameterHints: { enabled: true },
+                suggest: { preview: true, showIcons: true },
+            });
+            session.current.editor = editor;
+            session.current.monaco = monaco;
+            const scheduleTypeStop = () => {
+                if (idleTimer)
+                    clearTimeout(idleTimer);
+                idleTimer = setTimeout(() => {
+                    if (life.disposed)
+                        return;
+                    if (typeUiOpen()) {
+                        scheduleTypeStop();
+                        return;
+                    }
+                    stopTypes();
+                }, TYPE_IDLE_MS);
+            };
+            const ensureTypes = () => {
+                if (typeSession) {
+                    if (typeReady)
+                        scheduleTypeStop();
+                    return;
+                }
+                if (typeStarting)
+                    return;
+                const mine = typeToken;
+                const isStale = () => life.disposed || mine !== typeToken;
+                typeStarting = true;
+                void import("./studio-type-checker.js")
+                    .then(({ openTypeChecker }) => {
+                    if (isStale())
+                        return;
+                    const checker = openTypeChecker(monaco, editor, () => {
+                        if (life.disposed || mine !== typeToken)
+                            return;
+                        typeReady = true;
+                        scheduleTypeStop();
+                    });
+                    if (isStale()) {
+                        checker.stop();
+                        return;
+                    }
+                    typeSession = checker;
+                })
+                    .catch(() => { })
+                    .finally(() => {
+                    if (mine === typeToken)
+                        typeStarting = false;
+                });
+            };
+            editor.onKeyDown((event) => {
+                const native = event.browserEvent;
+                if (native.metaKey || native.ctrlKey || native.altKey)
+                    return;
+                if (typeReady)
+                    scheduleTypeStop();
+            });
+            // A pointer outside the editor kills the checker in that event. The
+            // suggestion list is part of typing, so a press on it does not count.
+            const onLeave = (event) => {
+                const target = event.target;
+                if (!(target instanceof Node) || inTypeUi(target))
+                    return;
+                stopTypes();
+            };
+            document.addEventListener('pointerdown', onLeave, true);
+            removeLeave = () => {
+                document.removeEventListener('pointerdown', onLeave, true);
+            };
+            editor.onDidBlurEditorText(() => {
+                queueMicrotask(() => {
+                    if (life.disposed || editor.hasTextFocus())
+                        return;
+                    const next = document.activeElement;
+                    if (next && inTypeUi(next))
+                        return;
+                    stopTypes();
+                });
+            });
+            editor.onDidChangeModelContent(() => {
+                if (session.current.setting)
+                    return;
+                ensureTypes();
+                const value = editor.getValue();
+                session.current.dirty = value !== printed.current;
+                if (timer)
+                    clearTimeout(timer);
+                timer = setTimeout(() => {
+                    const applied = apply.current(value);
+                    session.current.spans = applied.spans;
+                    session.current.errors = applied.errors;
+                    paint();
+                }, APPLY_MS);
+            });
+            paint();
+        })();
+        return () => {
+            life.disposed = true;
+            removeLeave?.();
+            stopTypes();
+            if (timer)
+                clearTimeout(timer);
+            const model = session.current.editor?.getModel();
+            session.current.editor?.dispose();
+            model?.dispose();
+            session.current.editor = undefined;
+        };
+    }, []);
+    useEffect(() => {
+        const { editor } = session.current;
+        if (!editor || hold)
+            return;
+        if (session.current.dirty && editor.getValue() !== text)
+            return;
+        if (editor.getValue() === text) {
+            session.current.dirty = false;
+            return;
+        }
+        session.current.setting = true;
+        editor.setValue(text);
+        session.current.setting = false;
+        session.current.dirty = false;
+    }, [text, hold]);
+    useEffect(() => {
+        session.current.editor?.updateOptions({ readOnly: isReadOnly });
+    }, [isReadOnly]);
+    useEffect(() => {
+        paintMarkers(session.current, issues);
+    }, [issues]);
+    return _jsx("div", { ref: node, className: "studio-fill" });
+}
+function marker(monaco, line, column, message) {
+    return {
+        startLineNumber: line,
+        startColumn: column,
+        endLineNumber: line,
+        endColumn: column + 1,
+        message,
+        severity: monaco.MarkerSeverity.Error,
+    };
+}
+function issueMarkers(monaco, spans, issues) {
+    return issues.flatMap((issue) => {
+        const exact = issue.field ? `${issue.nodeId}.${issue.field}` : issue.nodeId;
+        const span = spans.find((item) => item.path === exact) ??
+            (issue.field ? spans.find((item) => item.path === issue.field) : undefined);
+        if (!span)
+            return [];
+        return [marker(monaco, span.line, span.column, issue.message)];
+    });
+}

package/ui/code/studio-monaco.d.ts

@@ -0,0 +1,44 @@
+/**
+ * The Monaco editor and the contributions this view uses, without the other
+ * language grammars. `editor.api` is the widget. Typing, suggestions, hover,
+ * and find are registered below.
+ *
+ * Semantic tokens, inlay hints, and inline completions are left out. They ask
+ * the typechecker to walk the file continuously, which is the memory we are
+ * keeping down.
+ */
+import { editor, languages, MarkerSeverity, Uri } from 'monaco-editor/editor/editor.api';
+import 'monaco-editor/editor/browser/coreCommands';
+import 'monaco-editor/editor/browser/widget/codeEditor/codeEditorWidget';
+import 'monaco-editor/editor/common/standaloneStrings';
+import 'monaco-editor/editor/contrib/bracketMatching/browser/bracketMatching';
+import 'monaco-editor/editor/contrib/caretOperations/browser/caretOperations';
+import 'monaco-editor/editor/contrib/clipboard/browser/clipboard';
+import 'monaco-editor/editor/contrib/comment/browser/comment';
+import 'monaco-editor/editor/contrib/contextmenu/browser/contextmenu';
+import 'monaco-editor/editor/contrib/cursorUndo/browser/cursorUndo';
+import 'monaco-editor/editor/contrib/find/browser/findController';
+import 'monaco-editor/editor/contrib/folding/browser/folding';
+import 'monaco-editor/editor/contrib/gotoError/browser/gotoError';
+import 'monaco-editor/editor/contrib/gotoError/browser/markerSelectionStatus';
+import 'monaco-editor/editor/contrib/gotoSymbol/browser/goToCommands';
+import 'monaco-editor/editor/contrib/gotoSymbol/browser/link/goToDefinitionAtPosition';
+import 'monaco-editor/editor/contrib/hover/browser/hoverContribution';
+import 'monaco-editor/editor/contrib/indentation/browser/indentation';
+import 'monaco-editor/editor/contrib/linesOperations/browser/linesOperations';
+import 'monaco-editor/editor/contrib/links/browser/links';
+import 'monaco-editor/editor/contrib/multicursor/browser/multicursor';
+import 'monaco-editor/editor/contrib/parameterHints/browser/parameterHints';
+import 'monaco-editor/editor/contrib/placeholderText/browser/placeholderText.contribution';
+import 'monaco-editor/editor/contrib/readOnlyMessage/browser/contribution';
+import 'monaco-editor/editor/contrib/smartSelect/browser/smartSelect';
+import 'monaco-editor/editor/contrib/snippet/browser/snippetController2';
+import 'monaco-editor/editor/contrib/suggest/browser/suggestController';
+import 'monaco-editor/editor/contrib/tokenization/browser/tokenization';
+import 'monaco-editor/editor/contrib/unicodeHighlighter/browser/unicodeHighlighter';
+import 'monaco-editor/editor/contrib/unusualLineTerminators/browser/unusualLineTerminators';
+import 'monaco-editor/editor/contrib/wordHighlighter/browser/wordHighlighter';
+import 'monaco-editor/editor/contrib/wordOperations/browser/wordOperations';
+import 'monaco-editor/editor/contrib/wordPartOperations/browser/wordPartOperations';
+import 'monaco-editor/features/find/register';
+export { editor, languages, MarkerSeverity, Uri };

package/ui/code/studio-monaco.js

@@ -0,0 +1,48 @@
+/**
+ * The Monaco editor and the contributions this view uses, without the other
+ * language grammars. `editor.api` is the widget. Typing, suggestions, hover,
+ * and find are registered below.
+ *
+ * Semantic tokens, inlay hints, and inline completions are left out. They ask
+ * the typechecker to walk the file continuously, which is the memory we are
+ * keeping down.
+ */
+import { editor, languages, MarkerSeverity, Uri } from 'monaco-editor/editor/editor.api';
+// Monaco's package exports append `.js`, so its icon sheets cannot be imported by specifier;
+// the studio's Vite plugin resolves these two to the host's install.
+import 'virtual:studio-codicons/codicon.css';
+import 'virtual:studio-codicons/codicon-modifiers.css';
+import 'monaco-editor/editor/browser/coreCommands';
+import 'monaco-editor/editor/browser/widget/codeEditor/codeEditorWidget';
+import 'monaco-editor/editor/common/standaloneStrings';
+import 'monaco-editor/editor/contrib/bracketMatching/browser/bracketMatching';
+import 'monaco-editor/editor/contrib/caretOperations/browser/caretOperations';
+import 'monaco-editor/editor/contrib/clipboard/browser/clipboard';
+import 'monaco-editor/editor/contrib/comment/browser/comment';
+import 'monaco-editor/editor/contrib/contextmenu/browser/contextmenu';
+import 'monaco-editor/editor/contrib/cursorUndo/browser/cursorUndo';
+import 'monaco-editor/editor/contrib/find/browser/findController';
+import 'monaco-editor/editor/contrib/folding/browser/folding';
+import 'monaco-editor/editor/contrib/gotoError/browser/gotoError';
+import 'monaco-editor/editor/contrib/gotoError/browser/markerSelectionStatus';
+import 'monaco-editor/editor/contrib/gotoSymbol/browser/goToCommands';
+import 'monaco-editor/editor/contrib/gotoSymbol/browser/link/goToDefinitionAtPosition';
+import 'monaco-editor/editor/contrib/hover/browser/hoverContribution';
+import 'monaco-editor/editor/contrib/indentation/browser/indentation';
+import 'monaco-editor/editor/contrib/linesOperations/browser/linesOperations';
+import 'monaco-editor/editor/contrib/links/browser/links';
+import 'monaco-editor/editor/contrib/multicursor/browser/multicursor';
+import 'monaco-editor/editor/contrib/parameterHints/browser/parameterHints';
+import 'monaco-editor/editor/contrib/placeholderText/browser/placeholderText.contribution';
+import 'monaco-editor/editor/contrib/readOnlyMessage/browser/contribution';
+import 'monaco-editor/editor/contrib/smartSelect/browser/smartSelect';
+import 'monaco-editor/editor/contrib/snippet/browser/snippetController2';
+import 'monaco-editor/editor/contrib/suggest/browser/suggestController';
+import 'monaco-editor/editor/contrib/tokenization/browser/tokenization';
+import 'monaco-editor/editor/contrib/unicodeHighlighter/browser/unicodeHighlighter';
+import 'monaco-editor/editor/contrib/unusualLineTerminators/browser/unusualLineTerminators';
+import 'monaco-editor/editor/contrib/wordHighlighter/browser/wordHighlighter';
+import 'monaco-editor/editor/contrib/wordOperations/browser/wordOperations';
+import 'monaco-editor/editor/contrib/wordPartOperations/browser/wordPartOperations';
+import 'monaco-editor/features/find/register';
+export { editor, languages, MarkerSeverity, Uri };

package/ui/code/studio-ts.worker.d.ts

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

package/ui/code/studio-ts.worker.js

@@ -0,0 +1,16 @@
+import { initialize } from 'monaco-editor/internal/common/initialize';
+import { TypeScriptWorker } from 'monaco-editor/languages/features/typescript/tsWorker';
+/**
+ * The package declarations are resolved when the file imports them. They are
+ * not compilation roots: a root is typechecked, and that is what held the
+ * memory.
+ */
+class StudioTypeScriptWorker extends TypeScriptWorker {
+    getScriptFileNames() {
+        return super.getScriptFileNames().filter((name) => name.startsWith('file:///agent'));
+    }
+}
+const scope = self;
+scope.onmessage = () => {
+    initialize((ctx, createData) => new StudioTypeScriptWorker(ctx, createData));
+};

package/ui/code/studio-type-checker.d.ts

@@ -0,0 +1,12 @@
+import type * as Monaco from 'monaco-editor';
+import type { editor, languages, MarkerSeverity, Uri } from './studio-monaco.ts';
+export type MonacoApi = {
+    editor: typeof editor;
+    languages: typeof languages;
+    MarkerSeverity: typeof MarkerSeverity;
+    Uri: typeof Uri;
+};
+/** Package types for the open file. Call `stop` to terminate the worker. */
+export declare function openTypeChecker(monaco: MonacoApi, codeEditor: Monaco.editor.IStandaloneCodeEditor, onReady: () => void): {
+    stop(): void;
+};