react-dsl-editor 0.2.2 → 0.3.0

package/dist/index.d.ts

@@ -0,0 +1,106 @@
+import { JSX } from 'react/jsx-runtime';
+import { TextareaHTMLAttributes } from 'react';
+
+export declare function alternative<T extends string>(...seq: GrammarNode<T>[]): GrammarNode<T>;
+
+export declare function asException<T extends string>(error: ParserError<T>): ParsingError;
+
+export declare interface CSTNode<T extends string> {
+    text: string;
+    offset: number;
+    end: number;
+    grammar: GrammarNode<T>;
+    children?: CSTNode<T>[];
+}
+
+export declare type CSTOf<T> = CSTNode<_NodeTypes<T>>;
+
+export declare interface DSL<T extends string> {
+    cst: CSTNode<T>;
+    terminals: CSTNode<T>[];
+    result: ParserSuccess<T>;
+}
+
+export declare function DslEditor<T extends string>({ code, onChange, onParsed, grammar, wrap, suggestions: clientSuggestions, className, ...textareaProps }: {
+    code: string;
+    onChange: (text: string) => void;
+    onParsed?: (ast: ParserSuccess<T>) => void;
+    grammar: GrammarNode<T>;
+    wrap?: boolean;
+    className?: string;
+    suggestions?: (node: CSTNode<T>) => string[] | undefined;
+} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'wrap' | 'onChange'>): JSX.Element;
+
+export declare class DSLParser<T extends string> {
+    private readonly grammar;
+    constructor(grammar: GrammarNode<T>);
+    private _parse;
+    parse(input: string): DSL<T>;
+}
+
+export declare const eof: GrammarNode;
+
+export declare function error<T extends string>(param: ParserError<T>): ParserError<T>;
+
+export declare interface GrammarNode<T extends string = never> {
+    type: T;
+    suggestions(): string[];
+    parse(text: string, context: ParserContext): ParserResult<T>;
+    children: GrammarNode<T>[];
+    meta?: Record<string, unknown>;
+}
+
+export declare function isParserError<T extends string>(result: ParserResult<T>): result is ParserError<T>;
+
+export declare function isParserSuccess<T extends string>(result: ParserResult<T>): result is ParserSuccess<T>;
+
+export declare function named<T extends string, K extends string>(name: T, child: GrammarNode<K>): GrammarNode<T | K>;
+
+export declare type NodeTypes<T> = _NodeTypes<T> | 'error';
+
+declare type _NodeTypes<T> = T extends GrammarNode<infer U> ? U : never;
+
+export declare function optional<T extends string>(child: GrammarNode<T>): GrammarNode<T>;
+
+export declare interface ParserContext {
+    faultTolerant: boolean;
+    faultCorrection<T extends string>(parse: ParserResult<T>, grammar: GrammarNode<T>): ParserResult<T>;
+}
+
+export declare interface ParserError<T extends string = never> {
+    grammar: GrammarNode<T>;
+    got: string;
+    expected: string[];
+}
+
+export declare type ParserResult<T extends string = never> = ParserSuccess<T> | ParserError<T>;
+
+export declare interface ParserSuccess<T extends string = never> {
+    text: string;
+    grammar: GrammarNode<T>;
+    children: ParserSuccess<T>[];
+}
+
+export declare class ParsingError extends Error {
+    constructor(msg: string);
+}
+
+export declare function pattern(regex: RegExp): GrammarNode<never>;
+
+export declare const rational: GrammarNode<never>;
+
+export declare function repeat<T extends string>(child: GrammarNode<T>, min?: number, max?: number): GrammarNode<T>;
+
+export declare function seq<T extends string>(...nodes: GrammarNode<T>[]): GrammarNode<T>;
+
+export declare function sequence<T extends string>(...nodes: GrammarNode<T>[]): GrammarNode<T>;
+
+export declare function success<T extends string>(param: ParserSuccess<T>): ParserSuccess<T>;
+
+export declare function term(str: string): GrammarNode<never>;
+
+export declare function visit<T extends string, V = string>(parserResult: ParserSuccess<T>, type: T, extractor?: (node: ParserSuccess<T>) => V): V[];
+
+export declare const ws: GrammarNode<never>;
+
+export { }

package/dist/react-dsl-editor.js

@@ -0,0 +1,1298 @@
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var __create = Object.create, __defProp = Object.defineProperty, __getOwnPropDesc = Object.getOwnPropertyDescriptor, __getOwnPropNames = Object.getOwnPropertyNames, __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty, __commonJSMin = (o, _) => () => (_ || o((_ = { exports: {} }).exports, _), _.exports), __copyProps = (o, _, v, y) => {
+	if (_ && typeof _ == "object" || typeof _ == "function") for (var b = __getOwnPropNames(_), x = 0, S = b.length, C; x < S; x++) C = b[x], !__hasOwnProp.call(o, C) && C !== v && __defProp(o, C, {
+		get: ((o) => _[o]).bind(null, C),
+		enumerable: !(y = __getOwnPropDesc(_, C)) || y.enumerable
+	});
+	return o;
+}, __toESM = (o, _, v) => (v = o == null ? {} : __create(__getProtoOf(o)), __copyProps(_ || !o || !o.__esModule ? __defProp(v, "default", {
+	value: o,
+	enumerable: !0
+}) : v, o));
+const textStyle = {
+	position: "absolute",
+	inset: 0,
+	overflow: "auto",
+	padding: 3,
+	fontSize: "1em",
+	lineHeight: "1.3em",
+	fontFamily: "monospace"
+}, ReadOnlyTextarea = forwardRef(function({ wrap: o, children: _, style: v = {} }, y) {
+	return /* @__PURE__ */ jsx("pre", {
+		ref: y,
+		style: {
+			...textStyle,
+			pointerEvents: "none",
+			margin: 0,
+			overflow: "auto",
+			whiteSpace: o ? "pre-wrap" : "pre",
+			...v
+		},
+		children: _
+	});
+});
+function e$4(o, _, v) {
+	let y = (v) => o(v, ..._);
+	return v === void 0 ? y : Object.assign(y, {
+		lazy: v,
+		lazyArgs: _
+	});
+}
+function t$10(o, _, v) {
+	let y = o.length - _.length;
+	if (y === 0) return o(..._);
+	if (y === 1) return e$4(o, _, v);
+	throw Error("Wrong number of arguments");
+}
+function t$5(...o) {
+	return t$10(n$13, o);
+}
+var n$13 = (o, _) => o ?? _, e$3 = {
+	done: !0,
+	hasNext: !1
+}, t$8 = {
+	done: !1,
+	hasNext: !1
+}, n$5 = () => e$3;
+function t(o, ..._) {
+	let v = o, y = _.map((o) => "lazy" in o ? r$8(o) : void 0), b = 0;
+	for (; b < _.length;) {
+		if (y[b] === void 0 || !i$4(v)) {
+			let o = _[b];
+			v = o(v), b += 1;
+			continue;
+		}
+		let o = [];
+		for (let v = b; v < _.length; v++) {
+			let _ = y[v];
+			if (_ === void 0 || (o.push(_), _.isSingle)) break;
+		}
+		let x = [];
+		for (let _ of v) if (n$12(_, x, o)) break;
+		let { isSingle: S } = o.at(-1);
+		v = S ? x[0] : x, b += o.length;
+	}
+	return v;
+}
+function n$12(o, _, v) {
+	if (v.length === 0) return _.push(o), !1;
+	let y = o, b = t$8, x = !1;
+	for (let [o, S] of v.entries()) {
+		let { index: C, items: w } = S;
+		if (w.push(y), b = S(y, C, w), S.index += 1, b.hasNext) {
+			if (b.hasMany ?? !1) {
+				for (let y of b.next) if (n$12(y, _, v.slice(o + 1))) return !0;
+				return x;
+			}
+			y = b.next;
+		}
+		if (!b.hasNext) break;
+		b.done && (x = !0);
+	}
+	return b.hasNext && _.push(y), x;
+}
+function r$8(o) {
+	let { lazy: _, lazyArgs: v } = o, y = _(...v);
+	return Object.assign(y, {
+		isSingle: _.single ?? !1,
+		index: 0,
+		items: []
+	});
+}
+function i$4(o) {
+	return typeof o == "string" || typeof o == "object" && !!o && Symbol.iterator in o;
+}
+function t$9(o, _) {
+	let v = _.length - o.length;
+	if (v === 1) {
+		let [v, ...y] = _;
+		return t(v, {
+			lazy: o,
+			lazyArgs: y
+		});
+	}
+	if (v === 0) {
+		let v = {
+			lazy: o,
+			lazyArgs: _
+		};
+		return Object.assign((o) => t(o, v), v);
+	}
+	throw Error("Wrong number of arguments");
+}
+var e$2 = {
+	asc: (o, _) => o > _,
+	desc: (o, _) => o < _
+};
+function t$11(o, _) {
+	let [v, ...y] = _;
+	if (!i$3(v)) {
+		let _ = r$7(...y);
+		return o(v, _);
+	}
+	let b = r$7(v, ...y);
+	return (_) => o(_, b);
+}
+function r$7(o, _, ...v) {
+	let y = typeof o == "function" ? o : o[0], b = typeof o == "function" ? "asc" : o[1], { [b]: x } = e$2, S = _ === void 0 ? void 0 : r$7(_, ...v);
+	return (o, _) => {
+		let v = y(o), b = y(_);
+		return x(v, b) ? 1 : x(b, v) ? -1 : S?.(o, _) ?? 0;
+	};
+}
+function i$3(o) {
+	if (a$1(o)) return !0;
+	if (typeof o != "object" || !Array.isArray(o)) return !1;
+	let [_, v, ...y] = o;
+	return a$1(_) && typeof v == "string" && v in e$2 && y.length === 0;
+}
+var a$1 = (o) => typeof o == "function" && o.length === 1;
+function n(...o) {
+	return t$10(r$6, o, i$2);
+}
+var r$6 = (o, _) => o.filter(_), i$2 = (o) => (_, v, y) => o(_, v, y) ? {
+	done: !1,
+	hasNext: !0,
+	next: _
+} : t$8, e$1 = (o) => Object.assign(o, { single: !0 });
+function n$1(...o) {
+	return t$10(r$5, o, e$1(i$1));
+}
+var r$5 = ([o]) => o, i$1 = () => a, a = (o) => ({
+	hasNext: !0,
+	next: o,
+	done: !0
+});
+function t$7(...o) {
+	return t$10(n$11, o, r$4);
+}
+var n$11 = (o, _) => o.flatMap(_), r$4 = (o) => (_, v, y) => {
+	let b = o(_, v, y);
+	return Array.isArray(b) ? {
+		done: !1,
+		hasNext: !0,
+		hasMany: !0,
+		next: b
+	} : {
+		done: !1,
+		hasNext: !0,
+		next: b
+	};
+};
+function e(o) {
+	return o === "" || o === void 0 ? !0 : Array.isArray(o) ? o.length === 0 : Object.keys(o).length === 0;
+}
+function t$2(...o) {
+	return t$10(n$10, o);
+}
+var n$10 = (o) => o.at(-1);
+function t$3(...o) {
+	return t$10(n$9, o, r$3);
+}
+var n$9 = (o, _) => o.map(_), r$3 = (o) => (_, v, y) => ({
+	done: !1,
+	hasNext: !0,
+	next: o(_, v, y)
+});
+function t$6(...o) {
+	return t$10(n$8, o);
+}
+var n$8 = (o) => o.length === 1 ? o[0] : void 0;
+function t$4(...o) {
+	return t$10(n$7, o);
+}
+function n$7(o, _) {
+	let v = [];
+	for (let y = o; y < _; y++) v.push(y);
+	return v;
+}
+function t$1(...o) {
+	return t$11(n$6, o);
+}
+var n$6 = (o, _) => [...o].sort(_);
+function n$3(...o) {
+	return t$10(r$2, o, i);
+}
+var r$2 = (o, _) => _ < 0 ? [] : o.slice(0, _);
+function i(o) {
+	if (o <= 0) return n$5;
+	let _ = o;
+	return (o) => (--_, {
+		done: _ <= 0,
+		hasNext: !0,
+		next: o
+	});
+}
+function n$2(...o) {
+	return t$9(r$1, o);
+}
+function r$1() {
+	let o = /* @__PURE__ */ new Set();
+	return (_) => o.has(_) ? t$8 : (o.add(_), {
+		done: !1,
+		hasNext: !0,
+		next: _
+	});
+}
+function n$4(...o) {
+	return t$9(r, o);
+}
+function r(o) {
+	let _ = o, v = /* @__PURE__ */ new Set();
+	return (o, y, b) => {
+		let x = _(o, y, b);
+		return v.has(x) ? t$8 : (v.add(x), {
+			done: !1,
+			hasNext: !0,
+			next: o
+		});
+	};
+}
+var colors = [
+	"#FF0000",
+	"#0000FF",
+	"#FF00FF",
+	"#800000",
+	"#008000",
+	"#000080",
+	"#808000",
+	"#800080",
+	"#008080",
+	"#808080",
+	"#993366",
+	"#336699"
+], colorAssignments = /* @__PURE__ */ new Map();
+function getColorAssigment(o) {
+	let _ = String(o), v = colorAssignments.get(_);
+	if (v) return v;
+	let y = colors[colorAssignments.size % colors.length];
+	return colorAssignments.set(_, y), console.log(colorAssignments), y;
+}
+function defaultStyleFor(o) {
+	let { name: _, regex: v } = o.grammar.meta ?? {}, y = _ ?? v;
+	if (y) return { color: getColorAssigment(y) };
+}
+function SyntaxHighlighter({ cstRoot: o, ref: _, wrap: v }) {
+	return /* @__PURE__ */ jsx(ReadOnlyTextarea, {
+		ref: _,
+		wrap: v,
+		children: /* @__PURE__ */ jsx(StyledNode, {
+			node: o,
+			styleFor: defaultStyleFor
+		})
+	});
+}
+function StyledNode(o) {
+	let _ = o.styleFor(o.node);
+	return /* @__PURE__ */ jsx("span", {
+		style: _,
+		children: e(o.node.children ?? []) ? o.node.text : o.node.children.map((_, v) => /* @__PURE__ */ jsx(StyledNode, {
+			node: _,
+			styleFor: o.styleFor
+		}, v))
+	});
+}
+function cstPathAt(o, _) {
+	return _cstPathAt(o, _, []);
+}
+function _cstPathAt(o, _, v = []) {
+	return o.offset <= _ && _ <= o.end ? (v.push(o), o.children?.forEach((o) => _cstPathAt(o, _, v)), v) : [];
+}
+function getSuggestions(o, _, v = () => void 0) {
+	let y = cstPathAt(o, _), b = t(y, t$7((o) => {
+		if (o.grammar.meta?.name !== void 0) {
+			let _ = v(o);
+			if (_) return _.map((_) => ({
+				node: o,
+				suggestion: _
+			}));
+		}
+		return o.grammar.suggestions().map((_) => ({
+			node: o,
+			suggestion: _
+		}));
+	}));
+	return t(b, t$7((o) => {
+		let v = o.node.text.substring(0, _ - o.node.offset);
+		return o.suggestion.startsWith(v) ? [{
+			suggestion: o.suggestion,
+			prefix: v
+		}] : [];
+	}), n$4((o) => o.suggestion));
+}
+const CursorPosition = forwardRef(function(o, _) {
+	let v = useRef(null), b = useRef(null);
+	return useImperativeHandle(_, () => ({ getCursorPosition() {
+		if (!v.current || !b.current) return {
+			top: 0,
+			left: 0
+		};
+		let { offsetTop: o, offsetLeft: _ } = v.current, { scrollTop: y, scrollLeft: x } = b.current, S = window.getComputedStyle(b.current), C = parseInt(S.lineHeight);
+		return {
+			top: o - y + C,
+			left: _ - x
+		};
+	} }), []), /* @__PURE__ */ jsxs(ReadOnlyTextarea, {
+		ref: b,
+		wrap: o.wrap,
+		style: { visibility: "hidden" },
+		children: [o.text, /* @__PURE__ */ jsx("span", {
+			ref: v,
+			children: "\xA0"
+		})]
+	});
+});
+function SuggestionsView({ suggestions: o, onSelect: _ }) {
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "flex",
+			gap: 4,
+			padding: "4px 0",
+			overflowY: "auto"
+		},
+		children: o.map((o, v) => /* @__PURE__ */ jsxs("button", {
+			onClick: () => _(o),
+			children: [
+				"\xA0",
+				o,
+				"\xA0"
+			]
+		}, v))
+	});
+}
+function shortcutName(o) {
+	let _ = "";
+	o.ctrlKey && (_ = "Ctrl");
+	let { key: v } = o;
+	return v === " " && (v = "Space"), `${_}${v}`;
+}
+function useSyncScroll(o) {
+	return useCallback((_) => {
+		let v = _.currentTarget;
+		o.current && v && (o.current.scrollTop = v.scrollTop, o.current.scrollLeft = v.scrollLeft);
+	}, [o]);
+}
+var ParsingError = class extends Error {
+	constructor(o) {
+		super(o);
+	}
+};
+function success(o) {
+	return o;
+}
+function error(o) {
+	return o;
+}
+function isParserError(o) {
+	return "expected" in o;
+}
+function isParserSuccess(o) {
+	return !isParserError(o);
+}
+function asException(o) {
+	return new ParsingError(`[${o.grammar.type}]: Expected ${o.expected.map((o) => `'${o}'`).join(" | ")}, but got '${o.got}'`);
+}
+function sequence(...o) {
+	let _ = {
+		children: o,
+		type: "sequence",
+		suggestions() {
+			return t(o, t$3((o) => o.suggestions()), n$3(1), t$6(), t$5([]));
+		},
+		parse(v, y) {
+			let b = 0, x = [];
+			for (let S of o) {
+				let o = v.substring(b), C = y.faultCorrection(S.parse(o, y), _);
+				if (isParserError(C)) {
+					if (y.faultTolerant) continue;
+					return C;
+				}
+				b += C.text.length, x.push(C);
+			}
+			return success({
+				grammar: _,
+				text: v.substring(0, b),
+				children: x
+			});
+		}
+	};
+	return _;
+}
+const eof = {
+	type: "eof",
+	suggestions: () => [],
+	children: [],
+	parse(o) {
+		return o.length === 0 ? success({
+			text: o,
+			grammar: eof,
+			children: []
+		}) : error({
+			got: o,
+			expected: [""],
+			grammar: eof
+		});
+	}
+};
+function withOffset(o, _ = 0) {
+	let v = _;
+	return {
+		text: o.text,
+		offset: _,
+		end: _ + o.text.length,
+		children: o.children?.map((o, _, y) => {
+			let { text: b } = y[_ - 1] ?? { text: "" };
+			return v += b.length, withOffset(o, v);
+		}),
+		grammar: o.grammar
+	};
+}
+function _flatCST(o) {
+	return o.children && !e(o.children) ? o.children.flatMap((o) => flatCST(o)) : [o];
+}
+function flatCST(o) {
+	return _flatCST(o).filter((o) => o.text !== "");
+}
+var DSLParser = class {
+	grammar;
+	constructor(o) {
+		this.grammar = sequence(o, eof);
+	}
+	_parse(o) {
+		let _ = this.grammar.parse(o, {
+			faultTolerant: !1,
+			faultCorrection: (o) => o
+		});
+		return isParserError(_) ? this.grammar.parse(o, {
+			faultTolerant: !0,
+			faultCorrection: (o) => o
+		}) : _;
+	}
+	parse(o) {
+		let _ = this._parse(o);
+		if (isParserError(_)) throw asException(_);
+		let v = withOffset(_), y = flatCST(v);
+		return {
+			cst: v,
+			terminals: y,
+			result: _
+		};
+	}
+};
+function SuggestionsMenu({ suggestions: o, onSelect: _, style: v, selectedIndex: y, onHover: b }) {
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			position: "absolute",
+			...v,
+			background: "#252526",
+			border: "1px solid #454545",
+			boxShadow: "0 2px 8px rgba(0,0,0,0.3)",
+			color: "#cccccc",
+			fontFamily: "monospace",
+			fontSize: "0.9em",
+			minWidth: 200,
+			zIndex: 100
+		},
+		children: o.map((o, v) => /* @__PURE__ */ jsx("div", {
+			onClick: () => _(o),
+			onMouseOver: () => b(v),
+			style: {
+				cursor: "pointer",
+				padding: "4px 8px",
+				backgroundColor: y === v ? "#094771" : "transparent"
+			},
+			children: o
+		}, v))
+	});
+}
+function DslEditor({ code: o, onChange: y, onParsed: T, grammar: E, wrap: D = !1, suggestions: O, className: k = DslEditor.name,...A }) {
+	let [j, M] = useState([]), [N, F] = useState(), [I, L] = useState({
+		top: 0,
+		left: 0,
+		visible: !1
+	}), [R, z] = useState(0), [B, V] = useState(""), H = useRef(null), U = useRef(null), W = useRef(null), G = useRef(null), K = useCallback((o) => {
+		let _ = U.current?.selectionStart ?? 0, v = getSuggestions(o, _, O);
+		M(v);
+	}, [O]), q = useCallback(() => {
+		N && (K(N.cst), V(U.current?.value?.substring(0, U.current?.selectionStart ?? 0) ?? ""));
+	}, [N, K]);
+	useEffect(() => {
+		H.current = new DSLParser(E);
+	}, [E]), useEffect(() => {
+		if (!H.current) return;
+		let _ = H.current.parse(o);
+		F(_), T?.(_.result), K(_.cst), V(o.substring(0, U.current?.selectionStart ?? 0));
+	}, [
+		o,
+		T,
+		K
+	]);
+	let J = useCallback(() => W.current?.getCursorPosition?.() ?? {
+		top: 0,
+		left: 0
+	}, []), Y = useCallback((o) => {
+		U.current && console.log(o);
+	}, [
+		o,
+		y,
+		j
+	]), X = useMemo(() => ({
+		ArrowDown() {
+			z((o) => (o + 1) % j.length);
+		},
+		ArrowUp() {
+			z((o) => (o - 1 + j.length) % j.length);
+		},
+		Enter() {
+			j[R] && Y(j[R].suggestion);
+		},
+		Escape() {
+			L((o) => ({
+				...o,
+				visible: !1
+			}));
+		}
+	}), [
+		Y,
+		R,
+		j
+	]), Z = useMemo(() => ({ CtrlSpace() {
+		let { top: o, left: _ } = J();
+		z(0), L({
+			visible: !0,
+			top: o,
+			left: _
+		});
+	} }), [J]), Q = useCallback((o) => {
+		let _ = (I.visible ? X : Z)[shortcutName(o)];
+		_ && (o.preventDefault(), _());
+	}, [
+		I.visible,
+		X,
+		Z
+	]), $ = useCallback((o) => {
+		y(o.target.value), L((o) => ({
+			...o,
+			visible: !1
+		})), V(o.target.value.substring(0, o.target.selectionStart));
+	}, [y]);
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "grid",
+			gridTemplateRows: "1fr auto",
+			flex: 1,
+			width: "100%",
+			height: "100%"
+		},
+		className: k,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					position: "relative",
+					border: "1px solid black",
+					overflow: "hidden"
+				},
+				children: [
+					/* @__PURE__ */ jsx("textarea", {
+						ref: U,
+						spellCheck: !1,
+						wrap: D ? "soft" : "off",
+						style: {
+							...textStyle,
+							color: "transparent",
+							background: "transparent",
+							caretColor: "black",
+							border: "none",
+							resize: "none"
+						},
+						value: o,
+						onSelect: q,
+						onChange: $,
+						onScroll: useSyncScroll(G),
+						onKeyDown: Q,
+						...A
+					}),
+					N && /* @__PURE__ */ jsx(SyntaxHighlighter, {
+						cstRoot: N.cst,
+						ref: G,
+						wrap: D
+					}),
+					/* @__PURE__ */ jsx(CursorPosition, {
+						ref: W,
+						text: B,
+						wrap: D
+					}),
+					I.visible && j.length > 0 && /* @__PURE__ */ jsx(SuggestionsMenu, {
+						suggestions: j.map((o) => o.suggestion),
+						onSelect: Y,
+						style: {
+							top: I.top,
+							left: I.left
+						},
+						selectedIndex: R,
+						onHover: z
+					})
+				]
+			}),
+			JSON.stringify(j),
+			/* @__PURE__ */ jsx(SuggestionsView, {
+				suggestions: j.map((o) => o.suggestion),
+				onSelect: Y
+			})
+		]
+	});
+}
+function visit(o, _, v = (o) => o.text) {
+	return isParserError(o) ? [] : (((o) => o.grammar.meta?.name === _)(o) ? [v(o)] : []).concat(...o.children?.flatMap((o) => visit(o, _, v)) ?? []);
+}
+var require_types = /* @__PURE__ */ __commonJSMin(((o, _) => {
+	_.exports = {
+		ROOT: 0,
+		GROUP: 1,
+		POSITION: 2,
+		SET: 3,
+		RANGE: 4,
+		REPETITION: 5,
+		REFERENCE: 6,
+		CHAR: 7
+	};
+})), require_sets = /* @__PURE__ */ __commonJSMin(((o) => {
+	var _ = require_types(), v = () => [{
+		type: _.RANGE,
+		from: 48,
+		to: 57
+	}], y = () => [
+		{
+			type: _.CHAR,
+			value: 95
+		},
+		{
+			type: _.RANGE,
+			from: 97,
+			to: 122
+		},
+		{
+			type: _.RANGE,
+			from: 65,
+			to: 90
+		}
+	].concat(v()), b = () => [
+		{
+			type: _.CHAR,
+			value: 9
+		},
+		{
+			type: _.CHAR,
+			value: 10
+		},
+		{
+			type: _.CHAR,
+			value: 11
+		},
+		{
+			type: _.CHAR,
+			value: 12
+		},
+		{
+			type: _.CHAR,
+			value: 13
+		},
+		{
+			type: _.CHAR,
+			value: 32
+		},
+		{
+			type: _.CHAR,
+			value: 160
+		},
+		{
+			type: _.CHAR,
+			value: 5760
+		},
+		{
+			type: _.RANGE,
+			from: 8192,
+			to: 8202
+		},
+		{
+			type: _.CHAR,
+			value: 8232
+		},
+		{
+			type: _.CHAR,
+			value: 8233
+		},
+		{
+			type: _.CHAR,
+			value: 8239
+		},
+		{
+			type: _.CHAR,
+			value: 8287
+		},
+		{
+			type: _.CHAR,
+			value: 12288
+		},
+		{
+			type: _.CHAR,
+			value: 65279
+		}
+	], x = () => [
+		{
+			type: _.CHAR,
+			value: 10
+		},
+		{
+			type: _.CHAR,
+			value: 13
+		},
+		{
+			type: _.CHAR,
+			value: 8232
+		},
+		{
+			type: _.CHAR,
+			value: 8233
+		}
+	];
+	o.words = () => ({
+		type: _.SET,
+		set: y(),
+		not: !1
+	}), o.notWords = () => ({
+		type: _.SET,
+		set: y(),
+		not: !0
+	}), o.ints = () => ({
+		type: _.SET,
+		set: v(),
+		not: !1
+	}), o.notInts = () => ({
+		type: _.SET,
+		set: v(),
+		not: !0
+	}), o.whitespace = () => ({
+		type: _.SET,
+		set: b(),
+		not: !1
+	}), o.notWhitespace = () => ({
+		type: _.SET,
+		set: b(),
+		not: !0
+	}), o.anyChar = () => ({
+		type: _.SET,
+		set: x(),
+		not: !0
+	});
+})), require_util = /* @__PURE__ */ __commonJSMin(((o) => {
+	var _ = require_types(), v = require_sets(), y = "@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^ ?", b = {
+		0: 0,
+		t: 9,
+		n: 10,
+		v: 11,
+		f: 12,
+		r: 13
+	};
+	o.strToChars = function(o) {
+		return o = o.replace(/(\[\\b\])|(\\)?\\(?:u([A-F0-9]{4})|x([A-F0-9]{2})|(0?[0-7]{2})|c([@A-Z[\\\]^?])|([0tnvfr]))/g, function(o, _, v, x, S, C, w, T) {
+			if (v) return o;
+			var E = _ ? 8 : x ? parseInt(x, 16) : S ? parseInt(S, 16) : C ? parseInt(C, 8) : w ? y.indexOf(w) : b[T], D = String.fromCharCode(E);
+			return /[[\]{}^$.|?*+()]/.test(D) && (D = "\\" + D), D;
+		}), o;
+	}, o.tokenizeClass = (y, b) => {
+		for (var x = [], S = /\\(?:(w)|(d)|(s)|(W)|(D)|(S))|((?:(?:\\)(.)|([^\]\\]))-(?:\\)?([^\]]))|(\])|(?:\\)?([^])/g, C, w; (C = S.exec(y)) != null;) if (C[1]) x.push(v.words());
+		else if (C[2]) x.push(v.ints());
+		else if (C[3]) x.push(v.whitespace());
+		else if (C[4]) x.push(v.notWords());
+		else if (C[5]) x.push(v.notInts());
+		else if (C[6]) x.push(v.notWhitespace());
+		else if (C[7]) x.push({
+			type: _.RANGE,
+			from: (C[8] || C[9]).charCodeAt(0),
+			to: C[10].charCodeAt(0)
+		});
+		else if (w = C[12]) x.push({
+			type: _.CHAR,
+			value: w.charCodeAt(0)
+		});
+		else return [x, S.lastIndex];
+		o.error(b, "Unterminated character class");
+	}, o.error = (o, _) => {
+		throw SyntaxError("Invalid regular expression: /" + o + "/: " + _);
+	};
+})), require_positions = /* @__PURE__ */ __commonJSMin(((o) => {
+	var _ = require_types();
+	o.wordBoundary = () => ({
+		type: _.POSITION,
+		value: "b"
+	}), o.nonWordBoundary = () => ({
+		type: _.POSITION,
+		value: "B"
+	}), o.begin = () => ({
+		type: _.POSITION,
+		value: "^"
+	}), o.end = () => ({
+		type: _.POSITION,
+		value: "$"
+	});
+})), require_lib$1 = /* @__PURE__ */ __commonJSMin(((o, _) => {
+	var v = require_util(), y = require_types(), b = require_sets(), x = require_positions();
+	_.exports = (o) => {
+		var _ = 0, S, C, w = {
+			type: y.ROOT,
+			stack: []
+		}, T = w, E = w.stack, D = [], O = (_) => {
+			v.error(o, `Nothing to repeat at column ${_ - 1}`);
+		}, k = v.strToChars(o);
+		for (S = k.length; _ < S;) switch (C = k[_++], C) {
+			case "\\":
+				switch (C = k[_++], C) {
+					case "b":
+						E.push(x.wordBoundary());
+						break;
+					case "B":
+						E.push(x.nonWordBoundary());
+						break;
+					case "w":
+						E.push(b.words());
+						break;
+					case "W":
+						E.push(b.notWords());
+						break;
+					case "d":
+						E.push(b.ints());
+						break;
+					case "D":
+						E.push(b.notInts());
+						break;
+					case "s":
+						E.push(b.whitespace());
+						break;
+					case "S":
+						E.push(b.notWhitespace());
+						break;
+					default: /\d/.test(C) ? E.push({
+						type: y.REFERENCE,
+						value: parseInt(C, 10)
+					}) : E.push({
+						type: y.CHAR,
+						value: C.charCodeAt(0)
+					});
+				}
+				break;
+			case "^":
+				E.push(x.begin());
+				break;
+			case "$":
+				E.push(x.end());
+				break;
+			case "[":
+				var A;
+				k[_] === "^" ? (A = !0, _++) : A = !1;
+				var j = v.tokenizeClass(k.slice(_), o);
+				_ += j[1], E.push({
+					type: y.SET,
+					set: j[0],
+					not: A
+				});
+				break;
+			case ".":
+				E.push(b.anyChar());
+				break;
+			case "(":
+				var M = {
+					type: y.GROUP,
+					stack: [],
+					remember: !0
+				};
+				C = k[_], C === "?" && (C = k[_ + 1], _ += 2, C === "=" ? M.followedBy = !0 : C === "!" ? M.notFollowedBy = !0 : C !== ":" && v.error(o, `Invalid group, character '${C}' after '?' at column ${_ - 1}`), M.remember = !1), E.push(M), D.push(T), T = M, E = M.stack;
+				break;
+			case ")":
+				D.length === 0 && v.error(o, `Unmatched ) at column ${_ - 1}`), T = D.pop(), E = T.options ? T.options[T.options.length - 1] : T.stack;
+				break;
+			case "|":
+				T.options || (T.options = [T.stack], delete T.stack);
+				var N = [];
+				T.options.push(N), E = N;
+				break;
+			case "{":
+				var P = /^(\d+)(,(\d+)?)?\}/.exec(k.slice(_)), F, I;
+				P === null ? E.push({
+					type: y.CHAR,
+					value: 123
+				}) : (E.length === 0 && O(_), F = parseInt(P[1], 10), I = P[2] ? P[3] ? parseInt(P[3], 10) : Infinity : F, _ += P[0].length, E.push({
+					type: y.REPETITION,
+					min: F,
+					max: I,
+					value: E.pop()
+				}));
+				break;
+			case "?":
+				E.length === 0 && O(_), E.push({
+					type: y.REPETITION,
+					min: 0,
+					max: 1,
+					value: E.pop()
+				});
+				break;
+			case "+":
+				E.length === 0 && O(_), E.push({
+					type: y.REPETITION,
+					min: 1,
+					max: Infinity,
+					value: E.pop()
+				});
+				break;
+			case "*":
+				E.length === 0 && O(_), E.push({
+					type: y.REPETITION,
+					min: 0,
+					max: Infinity,
+					value: E.pop()
+				});
+				break;
+			default: E.push({
+				type: y.CHAR,
+				value: C.charCodeAt(0)
+			});
+		}
+		return D.length !== 0 && v.error(o, "Unterminated group"), w;
+	}, _.exports.types = y;
+})), require_lib = /* @__PURE__ */ __commonJSMin(((o, _) => {
+	var v = class o {
+		constructor(o, _) {
+			this.low = o, this.high = _, this.length = 1 + _ - o;
+		}
+		overlaps(o) {
+			return !(this.high < o.low || this.low > o.high);
+		}
+		touches(o) {
+			return !(this.high + 1 < o.low || this.low - 1 > o.high);
+		}
+		add(_) {
+			return new o(Math.min(this.low, _.low), Math.max(this.high, _.high));
+		}
+		subtract(_) {
+			return _.low <= this.low && _.high >= this.high ? [] : _.low > this.low && _.high < this.high ? [new o(this.low, _.low - 1), new o(_.high + 1, this.high)] : _.low <= this.low ? [new o(_.high + 1, this.high)] : [new o(this.low, _.low - 1)];
+		}
+		toString() {
+			return this.low == this.high ? this.low.toString() : this.low + "-" + this.high;
+		}
+	};
+	_.exports = class o {
+		constructor(o, _) {
+			this.ranges = [], this.length = 0, o != null && this.add(o, _);
+		}
+		_update_length() {
+			this.length = this.ranges.reduce((o, _) => o + _.length, 0);
+		}
+		add(_, y) {
+			var b = (o) => {
+				for (var _ = 0; _ < this.ranges.length && !o.touches(this.ranges[_]);) _++;
+				for (var v = this.ranges.slice(0, _); _ < this.ranges.length && o.touches(this.ranges[_]);) o = o.add(this.ranges[_]), _++;
+				v.push(o), this.ranges = v.concat(this.ranges.slice(_)), this._update_length();
+			};
+			return _ instanceof o ? _.ranges.forEach(b) : (y ??= _, b(new v(_, y))), this;
+		}
+		subtract(_, y) {
+			var b = (o) => {
+				for (var _ = 0; _ < this.ranges.length && !o.overlaps(this.ranges[_]);) _++;
+				for (var v = this.ranges.slice(0, _); _ < this.ranges.length && o.overlaps(this.ranges[_]);) v = v.concat(this.ranges[_].subtract(o)), _++;
+				this.ranges = v.concat(this.ranges.slice(_)), this._update_length();
+			};
+			return _ instanceof o ? _.ranges.forEach(b) : (y ??= _, b(new v(_, y))), this;
+		}
+		intersect(_, y) {
+			var b = [], x = (o) => {
+				for (var _ = 0; _ < this.ranges.length && !o.overlaps(this.ranges[_]);) _++;
+				for (; _ < this.ranges.length && o.overlaps(this.ranges[_]);) {
+					var y = Math.max(this.ranges[_].low, o.low), x = Math.min(this.ranges[_].high, o.high);
+					b.push(new v(y, x)), _++;
+				}
+			};
+			return _ instanceof o ? _.ranges.forEach(x) : (y ??= _, x(new v(_, y))), this.ranges = b, this._update_length(), this;
+		}
+		index(o) {
+			for (var _ = 0; _ < this.ranges.length && this.ranges[_].length <= o;) o -= this.ranges[_].length, _++;
+			return this.ranges[_].low + o;
+		}
+		toString() {
+			return "[ " + this.ranges.join(", ") + " ]";
+		}
+		clone() {
+			return new o(this);
+		}
+		numbers() {
+			return this.ranges.reduce((o, _) => {
+				for (var v = _.low; v <= _.high;) o.push(v), v++;
+				return o;
+			}, []);
+		}
+		subranges() {
+			return this.ranges.map((o) => ({
+				low: o.low,
+				high: o.high,
+				length: 1 + o.high - o.low
+			}));
+		}
+	};
+})), import_randexp = /* @__PURE__ */ __toESM((/* @__PURE__ */ __commonJSMin(((o, _) => {
+	var v = require_lib$1(), y = require_lib(), b = v.types;
+	_.exports = class o {
+		constructor(o, _) {
+			if (this._setDefaults(o), o instanceof RegExp) this.ignoreCase = o.ignoreCase, this.multiline = o.multiline, o = o.source;
+			else if (typeof o == "string") this.ignoreCase = _ && _.indexOf("i") !== -1, this.multiline = _ && _.indexOf("m") !== -1;
+			else throw Error("Expected a regexp or string");
+			this.tokens = v(o);
+		}
+		_setDefaults(_) {
+			this.max = _.max == null ? o.prototype.max == null ? 100 : o.prototype.max : _.max, this.defaultRange = _.defaultRange ? _.defaultRange : this.defaultRange.clone(), _.randInt && (this.randInt = _.randInt);
+		}
+		gen() {
+			return this._gen(this.tokens, []);
+		}
+		_gen(o, _) {
+			var v, y, x, S, C;
+			switch (o.type) {
+				case b.ROOT:
+				case b.GROUP:
+					if (o.followedBy || o.notFollowedBy) return "";
+					for (o.remember && o.groupNumber === void 0 && (o.groupNumber = _.push(null) - 1), v = o.options ? this._randSelect(o.options) : o.stack, y = "", S = 0, C = v.length; S < C; S++) y += this._gen(v[S], _);
+					return o.remember && (_[o.groupNumber] = y), y;
+				case b.POSITION: return "";
+				case b.SET:
+					var w = this._expand(o);
+					return w.length ? String.fromCharCode(this._randSelect(w)) : "";
+				case b.REPETITION:
+					for (x = this.randInt(o.min, o.max === Infinity ? o.min + this.max : o.max), y = "", S = 0; S < x; S++) y += this._gen(o.value, _);
+					return y;
+				case b.REFERENCE: return _[o.value - 1] || "";
+				case b.CHAR:
+					var T = this.ignoreCase && this._randBool() ? this._toOtherCase(o.value) : o.value;
+					return String.fromCharCode(T);
+			}
+		}
+		_toOtherCase(o) {
+			return o + (97 <= o && o <= 122 ? -32 : 65 <= o && o <= 90 ? 32 : 0);
+		}
+		_randBool() {
+			return !this.randInt(0, 1);
+		}
+		_randSelect(o) {
+			return o instanceof y ? o.index(this.randInt(0, o.length - 1)) : o[this.randInt(0, o.length - 1)];
+		}
+		_expand(o) {
+			if (o.type === v.types.CHAR) return new y(o.value);
+			if (o.type === v.types.RANGE) return new y(o.from, o.to);
+			{
+				let _ = new y();
+				for (let v = 0; v < o.set.length; v++) {
+					let y = this._expand(o.set[v]);
+					if (_.add(y), this.ignoreCase) for (let o = 0; o < y.length; o++) {
+						let v = y.index(o), b = this._toOtherCase(v);
+						v !== b && _.add(b);
+					}
+				}
+				return o.not ? this.defaultRange.clone().subtract(_) : this.defaultRange.clone().intersect(_);
+			}
+		}
+		randInt(o, _) {
+			return o + Math.floor(Math.random() * (1 + _ - o));
+		}
+		get defaultRange() {
+			return this._range = this._range || new y(32, 126);
+		}
+		set defaultRange(o) {
+			this._range = o;
+		}
+		static randexp(_, v) {
+			var y;
+			return typeof _ == "string" && (_ = new RegExp(_, v)), _._randexp === void 0 ? (y = new o(_, v), _._randexp = y) : (y = _._randexp, y._setDefaults(_)), y.gen();
+		}
+		static sugar() {
+			RegExp.prototype.gen = function() {
+				return o.randexp(this);
+			};
+		}
+	};
+})))()), array = [], characterCodeCache = [];
+function leven(o, _, v) {
+	if (o === _) return 0;
+	let y = v?.maxDistance, b = o;
+	o.length > _.length && (o = _, _ = b);
+	let x = o.length, S = _.length;
+	for (; x > 0 && o.charCodeAt(~-x) === _.charCodeAt(~-S);) x--, S--;
+	let C = 0;
+	for (; C < x && o.charCodeAt(C) === _.charCodeAt(C);) C++;
+	if (x -= C, S -= C, y !== void 0 && S - x > y) return y;
+	if (x === 0) return y !== void 0 && S > y ? y : S;
+	let w, T, E, D, O = 0, k = 0;
+	for (; O < x;) characterCodeCache[O] = o.charCodeAt(C + O), array[O] = ++O;
+	for (; k < S;) {
+		for (w = _.charCodeAt(C + k), E = k++, T = k, O = 0; O < x; O++) D = w === characterCodeCache[O] ? E : E + 1, E = array[O], T = array[O] = E > T ? D > T ? T + 1 : D : D > E ? E + 1 : D;
+		if (y !== void 0) {
+			let o = T;
+			for (O = 0; O < x; O++) array[O] < o && (o = array[O]);
+			if (o > y) return y;
+		}
+	}
+	return array.length = x, characterCodeCache.length = x, y !== void 0 && T > y ? y : T;
+}
+function pattern(o) {
+	let _ = new import_randexp.default(o);
+	_.randInt = () => 0, _.defaultRange.subtract(-Infinity, Infinity);
+	function v() {
+		return t(t$4(0, 10), t$3(() => _.gen()), n$2());
+	}
+	let y = {
+		type: "pattern",
+		children: [],
+		meta: { regex: o },
+		suggestions: v,
+		parse(_, b) {
+			let x = new RegExp(o, "yu");
+			x.lastIndex = 0;
+			let S = x.exec(_);
+			if (S) return success({
+				text: S[0],
+				grammar: y,
+				children: []
+			});
+			if (b.faultTolerant) {
+				let o = t(v(), n((o) => leven(o, _) <= 2), n$1());
+				if (o !== void 0) return success({
+					text: _.substring(0, o.length),
+					grammar: y,
+					children: []
+				});
+			}
+			return error({
+				grammar: y,
+				got: _,
+				expected: y.suggestions()
+			});
+		}
+	};
+	return y;
+}
+const rational = pattern(/\d+(:?.\d+)?/);
+function optional(o) {
+	let _ = {
+		type: "optional",
+		suggestions: () => o.suggestions(),
+		children: [o],
+		parse(v, y) {
+			let b = o.parse(v, y);
+			return isParserError(b) ? success({
+				text: "",
+				grammar: _,
+				children: []
+			}) : b;
+		}
+	};
+	return _;
+}
+const ws = optional(pattern(/\s+/));
+function seq(...o) {
+	return sequence(ws, ...o.flatMap((o) => [o, ws]));
+}
+function term(o) {
+	return pattern(new RegExp(regexEscape(o)));
+}
+function regexEscape(o) {
+	return o.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function alternative(...o) {
+	let _ = {
+		type: "alternative",
+		children: o,
+		parse(v, y) {
+			let b = [];
+			if (y.faultTolerant) {
+				for (let _ of o) {
+					let o = _.parse(v, {
+						...y,
+						faultTolerant: !1
+					});
+					if (isParserSuccess(o)) return o;
+				}
+				let _ = o.map((o) => o.parse(v, {
+					...y,
+					faultTolerant: !0
+				})), b = t(_, n(isParserSuccess), t$1((o) => o.text.length), t$2());
+				if (b) return b;
+			} else for (let _ of o) {
+				let o = _.parse(v, y);
+				if (isParserError(o)) {
+					b.push(o);
+					continue;
+				}
+				return o;
+			}
+			return error({
+				got: v,
+				expected: b.flatMap((o) => o.expected),
+				grammar: _
+			});
+		},
+		suggestions() {
+			return o.flatMap((o) => o.suggestions());
+		}
+	};
+	return _;
+}
+function named(o, _) {
+	let v = {
+		meta: { name: o },
+		type: "named",
+		suggestions() {
+			return _.suggestions();
+		},
+		children: [_],
+		parse(o, y) {
+			let b = _.parse(o, y);
+			return isParserError(b) ? b : success({
+				text: b.text,
+				grammar: v,
+				children: [b]
+			});
+		}
+	};
+	return v;
+}
+function repeat(o, _ = 1, v = 1e3) {
+	let y = {
+		type: "repeat",
+		children: [o],
+		suggestions: () => o.suggestions(),
+		parse(b, x) {
+			let S = 0, C = !1, w = [];
+			for (let y = 0; y < v && S < b.length; y++) {
+				let v = b.substring(S), T = o.parse(v, {
+					...x,
+					faultTolerant: x.faultTolerant && !C
+				});
+				if (isParserError(T)) {
+					if (y >= _) break;
+					if (x.faultTolerant) {
+						if (!C) {
+							C = !0;
+							continue;
+						}
+						return T;
+					} else return T;
+				}
+				S += T.text.length, w.push(T);
+			}
+			return success({
+				grammar: y,
+				children: w,
+				text: b.substring(0, S)
+			});
+		}
+	};
+	return y;
+}
+export { DSLParser, DslEditor, ParsingError, alternative, asException, eof, error, isParserError, isParserSuccess, named, optional, pattern, rational, repeat, seq, sequence, success, term, visit, ws };

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "react-dsl-editor",
   "license": "MIT",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "repository": {
-    "url": "https://github.com/rzymek/react-dsl-editor"
+    "url": "git+https://github.com/rzymek/react-dsl-editor.git"
   },
   "publishConfig": {
     "access": "public",
@@ -27,9 +27,11 @@
     "build": "rimraf dist && vite build",
     "lint": "eslint",
     "test": "vitest",
-    "prepublishOnly": "npm-run-all -p lint test build"
+    "prepublishOnly": "CI=1 npm-run-all -p lint test build"
   },
   "dependencies": {
+    "leven": "^4.1.0",
+    "randexp": "^0.5.3",
     "remeda": "^2.32.0"
   },
   "peerDependencies": {
@@ -42,6 +44,7 @@
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.2",
+    "any-toolkit-vitest": "^0.0.2",
     "eslint": "^9.39.2",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.26",
@@ -50,6 +53,7 @@
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "rimraf": "^6.1.2",
+    "string-dedent": "^3.0.2",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.51.0",
     "vite": "npm:rolldown-vite@7.1.14",