@wallarm-org/design-system 1.30.0 → 1.31.0

package/dist/components/CodeEditor/engine/diagnostics.js

@@ -0,0 +1,327 @@
+import { ensureSyntaxTree, syntaxTree } from "@codemirror/language";
+import { linter, setDiagnosticsEffect } from "@codemirror/lint";
+import { EditorView } from "@codemirror/view";
+import { babelSyntaxDiagnostics } from "./babelSyntax.js";
+import { findJsonBodyRange } from "./languages/index.js";
+import { luaSyntaxDiagnostics } from "./luaSyntax.js";
+import { offsetToPosition, positionToOffset } from "./positions.js";
+const LINT_DELAY = 300;
+const SYNTAX_SOURCE = 'syntax';
+const SCHEMA_SOURCE = 'schema';
+const ENSURE_TREE_TIMEOUT = 200;
+const jsonRegion = (state, language)=>{
+    if ('json' === language) return {
+        from: 0,
+        to: state.doc.length
+    };
+    if ('http' === language) return findJsonBodyRange(state);
+    return null;
+};
+const POSITION = /at position (\d+)/;
+const LINE_COLUMN = /line (\d+) column (\d+)/;
+const END_OF_INPUT = /end of (?:JSON )?(?:input|data)/i;
+const offsetOfLineColumn = (text, line, column)=>{
+    let offset = 0;
+    for(let current = 1; current < line; current++){
+        const newline = text.indexOf('\n', offset);
+        if (newline < 0) return text.length;
+        offset = newline + 1;
+    }
+    return Math.min(offset + column - 1, text.length);
+};
+const cleanMessage = (message)=>{
+    const cleaned = message.replace(/^JSON\.parse: /, '').replace(/^JSON Parse error: /, '').replace(/ (in|after) JSON at position \d+(?: \(line \d+ column \d+\))?$/, (_, word)=>'after' === word ? ' after JSON' : '').replace(/ at line \d+ column \d+ of the JSON data$/, '').replace(/, (?:\.\.\.)?".*"(?:\.\.\.)? is not valid JSON$/s, '').trim();
+    if ('' === cleaned) return 'Invalid JSON';
+    return cleaned.charAt(0).toUpperCase() + cleaned.slice(1);
+};
+const locateJsonSyntaxError = (message, text)=>{
+    const clean = cleanMessage(message);
+    const position = POSITION.exec(message);
+    if (position) return {
+        offset: Number(position[1]),
+        message: clean
+    };
+    const lineColumn = LINE_COLUMN.exec(message);
+    if (lineColumn) return {
+        offset: offsetOfLineColumn(text, Number(lineColumn[1]), Number(lineColumn[2])),
+        message: clean
+    };
+    if (END_OF_INPUT.test(message)) return {
+        offset: text.trimEnd().length,
+        message: clean
+    };
+    return {
+        offset: null,
+        message: clean
+    };
+};
+const rangeAt = (text, relative, base)=>{
+    const contentEnd = text.trimEnd().length;
+    if (relative >= contentEnd) return {
+        from: base + contentEnd - 1,
+        to: base + contentEnd
+    };
+    const from = Math.max(relative, 0);
+    return '\n' === text.charAt(from) ? {
+        from: base + from,
+        to: base + from
+    } : {
+        from: base + from,
+        to: base + from + 1
+    };
+};
+const parsedTree = (state, upto, timeout)=>{
+    const ensured = ensureSyntaxTree(state, upto, timeout);
+    if (ensured) return {
+        tree: ensured,
+        parsedTo: 1 / 0
+    };
+    const tree = syntaxTree(state);
+    return {
+        tree,
+        parsedTo: tree.length
+    };
+};
+const firstErrorNode = (state, region, timeout)=>{
+    const { tree, parsedTo } = parsedTree(state, region.to, timeout);
+    let found = null;
+    tree.iterate({
+        from: region.from,
+        to: region.to,
+        enter: (node)=>{
+            if (found) return false;
+            if (!node.type.isError || node.from < region.from) return true;
+            if (node.from >= parsedTo) return false;
+            found = {
+                from: node.from,
+                to: node.to
+            };
+            return false;
+        }
+    });
+    return found;
+};
+const syntaxErrorDiagnostics = (state, region, timeout = ENSURE_TREE_TIMEOUT)=>{
+    const length = state.doc.length;
+    const { tree, parsedTo } = parsedTree(state, length, timeout);
+    const out = [];
+    tree.iterate({
+        from: region?.from ?? 0,
+        to: region?.to ?? length,
+        enter: (node)=>{
+            if (!node.type.isError) return true;
+            if (region && (node.from < region.from || node.from > region.to)) return false;
+            if (node.from >= parsedTo) return false;
+            const from = node.from;
+            const to = Math.min(Math.max(node.to, from + 1), length);
+            const last = out.at(-1);
+            if (last && from <= last.to) {
+                last.to = Math.max(last.to, to);
+                return false;
+            }
+            out.push({
+                from,
+                to,
+                severity: 'error',
+                source: SYNTAX_SOURCE,
+                message: from < length ? `Unexpected "${state.doc.sliceString(from, from + 1)}"` : 'Unexpected end of input'
+            });
+            return false;
+        }
+    });
+    return out;
+};
+const ERROR_NODE_LANGUAGES = new Set([
+    'yaml',
+    'python'
+]);
+const isBabelLanguage = (language)=>"javascript" === language || "typescript" === language;
+const jsonSyntaxDiagnostics = (state, region, timeout = ENSURE_TREE_TIMEOUT)=>{
+    const text = state.sliceDoc(region.from, region.to);
+    if ('' === text.trim()) return [];
+    try {
+        JSON.parse(text);
+        return [];
+    } catch (error) {
+        const raw = error instanceof Error ? error.message : String(error);
+        const located = locateJsonSyntaxError(raw, text);
+        let range;
+        if (null !== located.offset) range = rangeAt(text, located.offset, region.from);
+        else {
+            const node = firstErrorNode(state, region, timeout);
+            range = node && node.to > node.from ? node : node ? rangeAt(text, node.from - region.from, region.from) : rangeAt(text, text.length - text.trimStart().length, region.from);
+        }
+        return [
+            {
+                from: range.from,
+                to: range.to,
+                severity: 'error',
+                message: located.message,
+                source: SYNTAX_SOURCE
+            }
+        ];
+    }
+};
+const defaultEnd = (doc, from)=>from < doc.lineAt(from).to ? from + 1 : from;
+const toCmDiagnostic = (doc, diagnostic, startingLineNumber)=>{
+    const from = positionToOffset(doc, diagnostic.from, startingLineNumber);
+    if (null === from) return null;
+    const to = diagnostic.to ? Math.max(from, positionToOffset(doc, diagnostic.to, startingLineNumber) ?? doc.length) : defaultEnd(doc, from);
+    return {
+        from,
+        to,
+        severity: diagnostic.severity,
+        message: diagnostic.message,
+        ...void 0 === diagnostic.source ? {} : {
+            source: diagnostic.source
+        }
+    };
+};
+const toPublicDiagnostic = (doc, diagnostic, startingLineNumber)=>({
+        from: offsetToPosition(doc, diagnostic.from, startingLineNumber),
+        to: offsetToPosition(doc, diagnostic.to, startingLineNumber),
+        severity: 'hint' === diagnostic.severity ? 'info' : diagnostic.severity,
+        message: diagnostic.message,
+        ...void 0 === diagnostic.source ? {} : {
+            source: diagnostic.source
+        }
+    });
+const externalDiagnostics = (doc, external, startingLineNumber)=>external.flatMap((diagnostic)=>{
+        const converted = toCmDiagnostic(doc, diagnostic, startingLineNumber);
+        return converted ? [
+            converted
+        ] : [];
+    });
+const latestLintState = new WeakMap();
+const superseded = ()=>new Promise(()=>void 0);
+const lintSource = (config)=>(view)=>{
+        const { state } = view;
+        latestLintState.set(view, state);
+        const isCurrent = ()=>latestLintState.get(view) === state;
+        const region = jsonRegion(state, config.language);
+        const external = externalDiagnostics(state.doc, config.external, config.startingLineNumber);
+        if (isBabelLanguage(config.language)) return babelSyntaxDiagnostics(state.doc.toString(), config.language).then((syntax)=>isCurrent() ? [
+                ...syntax,
+                ...external
+            ] : superseded(), (error)=>{
+            if (!isCurrent()) return superseded();
+            console.error('[CodeEditor] failed to load the JavaScript syntax checker', error);
+            return external;
+        });
+        if ('lua' === config.language) return luaSyntaxDiagnostics(state.doc.toString()).then((syntax)=>isCurrent() ? [
+                ...syntax,
+                ...external
+            ] : superseded(), (error)=>{
+            if (!isCurrent()) return superseded();
+            console.error('[CodeEditor] failed to load the Lua syntax checker', error);
+            return external;
+        });
+        const syntax = region ? jsonSyntaxDiagnostics(state, region) : ERROR_NODE_LANGUAGES.has(config.language) ? syntaxErrorDiagnostics(state) : [];
+        const { schemaSource, schema } = config;
+        if (!region || syntax.length > 0 || void 0 === schema || !schemaSource || '' === state.sliceDoc(region.from, region.to).trim()) return [
+            ...syntax,
+            ...external
+        ];
+        return schemaSource(state, region).then((schemaDiagnostics)=>isCurrent() ? [
+                ...schemaDiagnostics.map((d)=>({
+                        ...d,
+                        source: d.source ?? SCHEMA_SOURCE
+                    })),
+                ...external
+            ] : superseded(), (error)=>{
+            if (!isCurrent()) return superseded();
+            console.error('[CodeEditor] JSON Schema validation failed', error);
+            return external;
+        });
+    };
+const reported = new WeakMap();
+const EMPTY_LIST = '[]';
+const reportChanges = (config)=>EditorView.updateListener.of((update)=>{
+        for (const tr of update.transactions)for (const effect of tr.effects){
+            if (!effect.is(setDiagnosticsEffect)) continue;
+            const list = effect.value.map((d)=>toPublicDiagnostic(tr.state.doc, d, config.startingLineNumber));
+            const key = JSON.stringify(list);
+            if ((reported.get(update.view) ?? EMPTY_LIST) !== key) {
+                reported.set(update.view, key);
+                config.onChange(list);
+            }
+        }
+    });
+const wavyUnderline = (token)=>({
+        backgroundImage: 'none',
+        textDecorationLine: 'underline',
+        textDecorationStyle: 'wavy',
+        textDecorationColor: `var(${token})`,
+        textDecorationSkipInk: 'none',
+        textUnderlineOffset: '3px'
+    });
+const ERROR_INDICATOR = '--color-syntax-highlight-error-indicator';
+const WARNING_INDICATOR = '--color-syntax-highlight-warning-indicator';
+const INFO_INDICATOR = '--color-syntax-highlight-info-indicator';
+const diagnosticsTheme = EditorView.theme({
+    '.cm-lintRange': {
+        paddingBottom: '0'
+    },
+    '.cm-lintRange-error': wavyUnderline(ERROR_INDICATOR),
+    '.cm-lintRange-warning': wavyUnderline(WARNING_INDICATOR),
+    '.cm-lintRange-info': wavyUnderline(INFO_INDICATOR),
+    '.cm-lintRange-hint': wavyUnderline(INFO_INDICATOR),
+    '.cm-lintRange-active': {
+        backgroundColor: 'transparent'
+    },
+    '.cm-lintPoint:after': {
+        borderBottomColor: `var(${ERROR_INDICATOR})`
+    },
+    '.cm-lintPoint-warning:after': {
+        borderBottomColor: `var(${WARNING_INDICATOR})`
+    },
+    '.cm-lintPoint-info:after': {
+        borderBottomColor: `var(${INFO_INDICATOR})`
+    },
+    '.cm-lintPoint-hint:after': {
+        borderBottomColor: `var(${INFO_INDICATOR})`
+    },
+    '.cm-tooltip.cm-tooltip-hover': {
+        border: 'none',
+        borderRadius: 'var(--radius-8)',
+        backgroundColor: 'var(--color-component-tooltip-bg)',
+        color: 'var(--color-text-primary-alt)',
+        fontFamily: 'var(--font-sans)',
+        fontSize: 'var(--text-xs)',
+        lineHeight: 'var(--text-xs--line-height)',
+        fontWeight: 'var(--font-weight-medium)',
+        overflow: 'hidden',
+        zIndex: 'var(--tooltip-z-index)'
+    },
+    '.cm-tooltip-lint': {
+        padding: '4px 0'
+    },
+    '.cm-diagnostic': {
+        padding: '0 8px 0 6px',
+        marginLeft: '0',
+        borderLeft: `2px solid var(${ERROR_INDICATOR})`
+    },
+    '.cm-diagnostic-warning': {
+        borderLeft: `2px solid var(${WARNING_INDICATOR})`
+    },
+    '.cm-diagnostic-info': {
+        borderLeft: `2px solid var(${INFO_INDICATOR})`
+    },
+    '.cm-diagnostic-hint': {
+        borderLeft: `2px solid var(${INFO_INDICATOR})`
+    },
+    '.cm-diagnosticSource': {
+        fontSize: 'var(--text-xs)',
+        opacity: '0.7'
+    }
+});
+const diagnosticsExtension = (config)=>[
+        linter(lintSource(config), {
+            delay: LINT_DELAY,
+            autoPanel: false,
+            needsRefresh: (update)=>update.transactions.some((tr)=>tr.reconfigured)
+        }),
+        reportChanges(config),
+        diagnosticsTheme
+    ];
+export { LINT_DELAY, SCHEMA_SOURCE, SYNTAX_SOURCE, diagnosticsExtension, diagnosticsTheme, jsonRegion, jsonSyntaxDiagnostics, locateJsonSyntaxError, syntaxErrorDiagnostics, toCmDiagnostic, toPublicDiagnostic };

package/dist/components/CodeEditor/engine/diff.d.ts

@@ -0,0 +1,37 @@
+import { type EditorState, type Extension } from '@codemirror/state';
+import { type BlockInfo, type ViewUpdate } from '@codemirror/view';
+import type { PortalRegistry } from '../lib/portalRegistry';
+export interface DiffExtensionConfig {
+    original: string;
+    /** Reserved for ReactNode content in diff rows; the `+` / `-` markers are plain text. */
+    portals: PortalRegistry;
+}
+/** Semantic hooks for the theme below (never used as test selectors in RTL tests). */
+export declare const DIFF_INSERTED_CLASS = "cm-ds-diff-inserted";
+export declare const DIFF_CHANGED_CLASS = "cm-ds-diff-changed";
+export declare const DIFF_DELETED_CLASS = "cm-ds-diff-deleted";
+/** `true` when `lineFrom` is the start of an inserted or changed line of the current document. */
+export declare const isDiffInsertedLine: (state: EditorState, lineFrom: number) => boolean;
+/**
+ * Number of original lines shown by the merge view's deleted-chunk widget for this gutter
+ * block, or 0 when the block is not a (non-empty) deleted chunk. The merge view places
+ * that widget as a block widget *before* `chunk.fromB`.
+ */
+export declare const deletedRowCount: (state: EditorState, block: BlockInfo) => number;
+/**
+ * Rows the merge view's deleted-chunk widgets add in diff mode (one per deleted original line),
+ * skipping chunks whose widget sits strictly inside a `hidden` (collapsed fold) range — the fold's
+ * replace decoration hides those widgets. 0 outside diff mode.
+ */
+export declare const diffDeletedRowCount: (state: EditorState, hidden: readonly {
+    from: number;
+    to: number;
+}[]) => number;
+/** For gutter `lineMarkerChange`: the diff changed although the document may not have. */
+export declare const diffChunksChanged: (update: ViewUpdate) => boolean;
+/**
+ * Diff mode (spec §7.15, D7): CodeMirror's unified merge view against `original`, restyled as
+ * CodeSnippet `success` / `danger` lines. The `+` / `-` prefixes, colour sticks and blank line
+ * numbers of deleted rows are drawn by `guttersExtension({ diff: true })`.
+ */
+export declare const diffExtension: (config: DiffExtensionConfig) => Extension;

package/dist/components/CodeEditor/engine/diff.js

@@ -0,0 +1,145 @@
+import { getChunks, getOriginalDoc, unifiedMergeView } from "@codemirror/merge";
+import { Prec, RangeSet, StateField } from "@codemirror/state";
+import { BlockType, Decoration, EditorView, GutterMarker, gutterLineClass, gutterWidgetClass, lineNumberMarkers } from "@codemirror/view";
+import { cn } from "../../../utils/cn.js";
+import { LINE_COLOR_STYLES } from "../../CodeSnippet/lib/lineStyles.js";
+const DIFF_INSERTED_CLASS = 'cm-ds-diff-inserted';
+const DIFF_CHANGED_CLASS = 'cm-ds-diff-changed';
+const DIFF_DELETED_CLASS = 'cm-ds-diff-deleted';
+const success = LINE_COLOR_STYLES.success;
+class DiffClassMarker extends GutterMarker {
+    elementClass;
+    constructor(elementClass){
+        super(), this.elementClass = elementClass;
+    }
+    eq(other) {
+        return other instanceof DiffClassMarker && other.elementClass === this.elementClass;
+    }
+}
+const insertedGutterBackground = new DiffClassMarker(cn(DIFF_INSERTED_CLASS, success.bg));
+const insertedNumberText = new DiffClassMarker(cn(DIFF_INSERTED_CLASS, success.text));
+const deletedGutterBackground = new DiffClassMarker(cn(DIFF_DELETED_CLASS, LINE_COLOR_STYLES.danger.bg));
+const EMPTY = {
+    chunks: null,
+    insertedLines: new Set(),
+    decorations: Decoration.none,
+    gutterBackground: RangeSet.empty,
+    numberText: RangeSet.empty
+};
+const buildDiffDecorations = (state)=>{
+    const chunks = getChunks(state)?.chunks ?? null;
+    if (!chunks) return EMPTY;
+    const insertedLines = new Set();
+    const decorations = [];
+    const gutterBackground = [];
+    const numberText = [];
+    for (const chunk of chunks){
+        if (chunk.fromB >= chunk.toB) continue;
+        const changed = chunk.fromA < chunk.toA;
+        const lineDecoration = Decoration.line({
+            class: cn(DIFF_INSERTED_CLASS, changed && DIFF_CHANGED_CLASS, success.bg)
+        });
+        const textMark = Decoration.mark({
+            class: success.text
+        });
+        const first = state.doc.lineAt(chunk.fromB).number;
+        const last = state.doc.lineAt(chunk.endB).number;
+        for(let number = first; number <= last; number++){
+            const line = state.doc.line(number);
+            insertedLines.add(line.from);
+            decorations.push(lineDecoration.range(line.from));
+            if (line.length > 0) decorations.push(textMark.range(line.from, line.to));
+            gutterBackground.push(insertedGutterBackground.range(line.from));
+            numberText.push(insertedNumberText.range(line.from));
+        }
+    }
+    return {
+        chunks,
+        insertedLines,
+        decorations: Decoration.set(decorations, true),
+        gutterBackground: RangeSet.of(gutterBackground, true),
+        numberText: RangeSet.of(numberText, true)
+    };
+};
+const diffDecorationsField = StateField.define({
+    create: buildDiffDecorations,
+    update: (value, tr)=>getChunks(tr.state)?.chunks === value.chunks ? value : buildDiffDecorations(tr.state),
+    provide: (field)=>[
+            EditorView.decorations.from(field, (value)=>value.decorations),
+            gutterLineClass.from(field, (value)=>value.gutterBackground),
+            lineNumberMarkers.from(field, (value)=>value.numberText)
+        ]
+});
+const isDiffInsertedLine = (state, lineFrom)=>state.field(diffDecorationsField, false)?.insertedLines.has(lineFrom) ?? false;
+const deletedRowCount = (state, block)=>{
+    if (block.type !== BlockType.WidgetBefore) return 0;
+    const chunks = getChunks(state)?.chunks;
+    if (!chunks) return 0;
+    const chunk = chunks.find((candidate)=>candidate.fromB === block.from);
+    if (!chunk || chunk.fromA >= chunk.toA) return 0;
+    const original = getOriginalDoc(state);
+    return original.lineAt(chunk.endA).number - original.lineAt(chunk.fromA).number + 1;
+};
+const diffDeletedRowCount = (state, hidden)=>{
+    const chunks = getChunks(state)?.chunks;
+    if (!chunks) return 0;
+    const original = getOriginalDoc(state);
+    let rows = 0;
+    for (const chunk of chunks)if (!(chunk.fromA >= chunk.toA)) {
+        if (!hidden.some(({ from, to })=>from < chunk.fromB && chunk.fromB <= to)) rows += original.lineAt(chunk.endA).number - original.lineAt(chunk.fromA).number + 1;
+    }
+    return rows;
+};
+const diffChunksChanged = (update)=>getChunks(update.startState)?.chunks !== getChunks(update.state)?.chunks;
+const deletedGutterClass = gutterWidgetClass.of((view, _widget, block)=>deletedRowCount(view.state, block) > 0 ? deletedGutterBackground : null);
+const diffTheme = EditorView.theme({
+    [`.cm-line.${DIFF_INSERTED_CLASS}`]: {
+        backgroundColor: 'var(--color-syntax-highlight-success-highlight)'
+    },
+    [`.cm-gutterElement.${DIFF_INSERTED_CLASS}`]: {
+        backgroundColor: 'var(--color-syntax-highlight-success-highlight)'
+    },
+    [`.cm-lineNumbers .cm-gutterElement.${DIFF_INSERTED_CLASS}`]: {
+        color: 'var(--color-syntax-highlight-success-code)'
+    },
+    [`.cm-gutterElement.${DIFF_DELETED_CLASS}`]: {
+        backgroundColor: 'var(--color-syntax-highlight-error-highlight)'
+    },
+    '& .cm-deletedChunk': {
+        backgroundColor: 'var(--color-syntax-highlight-error-highlight)',
+        color: 'var(--color-syntax-highlight-error-code)',
+        fontWeight: 'var(--font-weight-medium, 450)',
+        paddingLeft: '0'
+    },
+    '& .cm-deletedChunk .cm-deletedLine': {
+        padding: '0 12px'
+    },
+    '&:has(.cm-gutters) .cm-deletedChunk .cm-deletedLine': {
+        paddingLeft: '8px'
+    },
+    '&.cm-merge-b .cm-changedText, & .cm-deletedChunk .cm-deletedText, &.cm-merge-b .cm-deletedText': {
+        background: 'none'
+    },
+    [`.${DIFF_CHANGED_CLASS} .cm-changedText, .${DIFF_CHANGED_CLASS} .cm-changedText *`]: {
+        fontWeight: 'var(--font-weight-bold, 700)',
+        color: 'var(--color-syntax-highlight-success-code)'
+    },
+    [`.cm-deletedChunk:has(+ .${DIFF_CHANGED_CLASS}) .cm-deletedText`]: {
+        fontWeight: 'var(--font-weight-bold, 700)',
+        color: 'var(--color-syntax-highlight-error-code)'
+    }
+});
+const diffExtension = (config)=>[
+        unifiedMergeView({
+            original: config.original,
+            highlightChanges: true,
+            gutter: false,
+            mergeControls: false,
+            syntaxHighlightDeletions: false,
+            allowInlineDiffs: false
+        }),
+        Prec.highest(diffDecorationsField.init(buildDiffDecorations)),
+        deletedGutterClass,
+        diffTheme
+    ];
+export { DIFF_CHANGED_CLASS, DIFF_DELETED_CLASS, DIFF_INSERTED_CLASS, deletedRowCount, diffChunksChanged, diffDeletedRowCount, diffExtension, isDiffInsertedLine };

package/dist/components/CodeEditor/engine/folds.d.ts

@@ -0,0 +1,25 @@
+import type { EditorState, Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import type { PortalRegistry } from '../lib/portalRegistry';
+import type { CodeEditorFolds } from '../types';
+/** Debounce for re-running function-form `folds` after edits (spec §4). */
+export declare const FOLDS_DEBOUNCE_MS = 150;
+export declare const getCollapsedFoldIds: (state: EditorState) => ReadonlySet<string>;
+export declare const getVisibleRowCount: (state: EditorState) => number;
+/** Document ranges of the collapsed regions (what the fold replace decorations hide). */
+export declare const getCollapsedRanges: (state: EditorState) => {
+    from: number;
+    to: number;
+}[];
+export declare const toggleFoldRegion: (view: EditorView, id: string) => boolean;
+export declare const foldAllRegions: (view: EditorView) => boolean;
+export declare const unfoldAllRegions: (view: EditorView) => boolean;
+export declare const foldsExtension: (config: {
+    folds: CodeEditorFolds | undefined;
+    startingLineNumber: number;
+    portals: PortalRegistry;
+    testId: string | undefined;
+}) => {
+    extension: Extension;
+    gutter: Extension | null;
+};