@dxos/react-ui-query 0.12.0

package/dist/lib/index.mjs

@@ -0,0 +1,637 @@
+import { EditorState, Prec, RangeSetBuilder, StateField } from "@codemirror/state";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { QueryBuilder, QueryDSL, findTagByToken, formatTag } from "@dxos/echo-query";
+import { Select, useThemeMode, useTranslation } from "@dxos/react-ui";
+import { Editor, createMenuGroup } from "@dxos/react-ui-editor";
+import { createBasicExtensions, createThemeExtensions, focus, focusField, keymap, staticCompletion, typeahead } from "@dxos/ui-editor";
+import { translationKey } from "#translations";
+import { Filter, Obj, Query, Type } from "@dxos/echo";
+import { HighlightStyle, LRLanguage, LanguageSupport, syntaxHighlighting, syntaxTree } from "@codemirror/language";
+import { Decoration, EditorView, WidgetType } from "@codemirror/view";
+import { styleTags, tags } from "@lezer/highlight";
+import JSON5 from "json5";
+import { Domino } from "@dxos/ui";
+import { getHashHue, getStyles, mx } from "@dxos/ui-theme";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Option from "effect/Option";
+import * as Match from "effect/Match";
+//#region src/components/QueryEditor/autocomplete.ts
+/**
+* Tag labels as they must appear in the document. Selecting a completion REPLACES the whole trigger
+* range, `#` included, and inserts the item verbatim — so an unprefixed label would silently drop the
+* `#` and leave text that no longer parses as a tag.
+*/
+var tagCompletions = (tags) => Object.values(tags).map((tag) => formatTag(tag.label));
+/**
+* Whether the caret sits in a tag the user is still typing: a `#` at the start of the current word,
+* with only label characters between it and `pos`.
+*/
+var isTypingTag = (text, pos) => {
+	let index = pos;
+	while (index > 0 && /[a-zA-Z0-9_-]/.test(text[index - 1])) index--;
+	return index > 0 && text[index - 1] === "#";
+};
+var completions = ({ db, tags }) => {
+	const parser = QueryDSL.Parser.configure({ strict: false });
+	return ({ state, pos }) => {
+		const text = state.sliceDoc();
+		const { node } = parser.parse(text).cursorAt(pos, -1);
+		if (tags && isTypingTag(text, pos) && node.type.id !== QueryDSL.Node.String) return tagCompletions(tags);
+		switch (node.parent?.type.id) {
+			case QueryDSL.Node.TypeFilter: {
+				let range;
+				if (node?.type.id === QueryDSL.Node.Identifier) range = {
+					from: node.from,
+					to: node.to
+				};
+				else if (node?.type.name === ":") range = {
+					from: node.from + 1,
+					to: node.to
+				};
+				if (range) return (db ? [...db.graph.registry.list().filter(Type.isType)] : []).map((schema) => Type.getTypename(schema));
+				break;
+			}
+			case QueryDSL.Node.TagFilter: if (tags) return tagCompletions(tags);
+		}
+		return [];
+	};
+};
+//#endregion
+//#region src/components/QueryEditor/query-extension.ts
+/**
+* Create a CodeMirror extension for the query language with syntax highlighting.
+*/
+var query = ({ tags } = {}) => {
+	return [
+		new LanguageSupport(queryLanguage),
+		syntaxHighlighting(queryHighlightStyle),
+		decorations({ tags }),
+		spacing,
+		typeahead({ onComplete: ({ line }) => {
+			if (line.split(/\s+/).filter(Boolean).length > 0) return staticCompletion([
+				"type:",
+				"AND",
+				"OR",
+				"NOT"
+			])({ line });
+		} }),
+		focus,
+		styles
+	];
+};
+/**
+* The extension's decorations for a given state.
+*
+* Exported as a pure function of `(state, options)` so the atomicity rules — which govern whether a
+* tag can still be edited — are testable without mounting an `EditorView`.
+*/
+var buildQueryDecorations = (state, { tags } = {}) => {
+	{
+		const hasFocus = state.field(focusField);
+		const isInside = (node) => {
+			const range = intersectRanges(state.selection.main, node);
+			return hasFocus && range && (state.selection.main.from > 0 || range.to - range.from > 0);
+		};
+		const collected = [];
+		const deco = { add: (from, to, value) => collected.push({
+			from,
+			to,
+			deco: value
+		}) };
+		const tagged = [];
+		syntaxTree(state).iterate({ enter: (node) => {
+			if (node.type.id === QueryDSL.Node.Tag) tagged.push({
+				from: node.from,
+				to: node.to
+			});
+			switch (node.type.name) {
+				case "(":
+				case ")":
+					deco.add(node.from, node.to, Decoration.mark({ class: "px-1" }));
+					break;
+				case "=": deco.add(node.from, node.to, Decoration.mark({ class: "text-fg-subtle" }));
+			}
+			switch (node.type.id) {
+				case QueryDSL.Node.TypeFilter: {
+					if (isInside(node)) break;
+					const identifier = node.node.getChild(QueryDSL.Node.Identifier);
+					if (identifier) deco.add(node.from, node.to, Decoration.widget({ widget: new TypeWidget(state.sliceDoc(identifier.from, identifier.to)) }));
+					break;
+				}
+				case QueryDSL.Node.TagFilter: {
+					const tagNode = node.node.getChild(QueryDSL.Node.Tag);
+					if (tagNode) {
+						const token = state.sliceDoc(tagNode.from, tagNode.to);
+						const match = findTagByToken(tags, token);
+						const label = match?.tag.label ?? token.slice(1);
+						const hue = match?.tag.hue ?? getHashHue(match?.key ?? label);
+						deco.add(node.from, node.to, Decoration.replace({
+							widget: new TagWidget(label, hue),
+							atomic: true
+						}));
+					}
+					break;
+				}
+				case QueryDSL.Node.ObjectLiteral:
+					if (isInside(node)) break;
+					try {
+						const props = JSON5.parse(state.sliceDoc(node.from, node.to));
+						if (props) deco.add(node.from, node.to, Decoration.widget({ widget: new ObjectWidget(props) }));
+					} catch {}
+					break;
+				case QueryDSL.Node.Not:
+				case QueryDSL.Node.And:
+				case QueryDSL.Node.Or:
+					deco.add(node.from, node.to, Decoration.mark({
+						class: "pe-1 uppercase",
+						atomic: true
+					}));
+					break;
+				case QueryDSL.Node.ArrowRight:
+				case QueryDSL.Node.ArrowLeft: deco.add(node.from, node.to, Decoration.widget({
+					widget: new SymbolWidget(node.type.id === QueryDSL.Node.ArrowRight ? "→" : "←"),
+					atomic: true
+				}));
+			}
+		} });
+		for (const range of bareTagRanges(state, tagged)) collected.push({
+			from: range.from,
+			to: range.to,
+			deco: Decoration.mark({ class: mx("rounded-xs px-0.5", getStyles(getHashHue("")).surface) })
+		});
+		const builder = new RangeSetBuilder();
+		collected.sort((a, b) => a.from - b.from || b.to - a.to);
+		for (const { from, to, deco } of collected) builder.add(from, to, deco);
+		return builder.finish();
+	}
+};
+/**
+* Decorations
+*/
+var decorations = ({ tags }) => {
+	return [StateField.define({
+		create: (state) => buildQueryDecorations(state, { tags }),
+		update: (deco, tr) => {
+			if (tr.docChanged || tr.newSelection) return buildQueryDecorations(tr.state, { tags });
+			return deco;
+		},
+		provide: (field) => [EditorView.decorations.from(field), EditorView.atomicRanges.of((view) => {
+			const builder = new RangeSetBuilder();
+			const cursor = view.state.field(field).iter();
+			while (cursor.value) {
+				if (cursor.value.spec.atomic) builder.add(cursor.from, cursor.to, cursor.value);
+				cursor.next();
+			}
+			return builder.finish();
+		})]
+	})];
+};
+/**
+* Keeps typed text from being glued onto a tag chip.
+*
+* Two rules, both applied as follow-up changes so the user's own transaction is left intact:
+* 1. Text typed immediately before a tag is separated from it by a space.
+* 2. An insertion leaves a trailing space at the end of the document, so there is always somewhere to
+*    type that is not adjacent to a chip. Deletions are exempt, or backspace at the end of the
+*    document would only ever delete a space this rule puts straight back.
+*/
+var spacing = EditorState.transactionFilter.of((tr) => {
+	if (!tr.docChanged) return tr;
+	const tagStarts = /* @__PURE__ */ new Set();
+	syntaxTree(tr.startState).iterate({ enter: (node) => {
+		if (node.type.id === QueryDSL.Node.Tag) tagStarts.add(node.from);
+	} });
+	let inserting = false;
+	let separator;
+	tr.changes.iterChanges((fromA, toA, _fromB, toB, inserted) => {
+		if (!inserted.length) return;
+		inserting = true;
+		if (tagStarts.has(toA) && !/\s$/.test(inserted.toString())) separator = toB;
+	});
+	const specs = [tr];
+	let text = tr.newDoc.toString();
+	if (separator !== void 0) {
+		specs.push({
+			changes: {
+				from: separator,
+				insert: " "
+			},
+			sequential: true
+		});
+		text = text.slice(0, separator) + " " + text.slice(separator);
+	}
+	if (inserting && text.length > 0 && !/\s$/.test(text)) specs.push({
+		changes: {
+			from: text.length,
+			insert: " "
+		},
+		sequential: true
+	});
+	return specs;
+});
+var lineHeight = "30px";
+/** The outer box vertically aligns the inner text with content in the outer div. */
+var CHIP_OUTER = "inline-flex h-[28px] align-middle";
+var CHIP_INNER = "inline-flex h-[26px] border rounded-xs";
+var container = (classNames, ...children) => {
+	const inner = Domino.of("span").classNames(mx(CHIP_INNER, classNames)).append(...children);
+	return Domino.of("span").classNames(CHIP_OUTER).append(inner).root;
+};
+/** A tag chip's parts, keyed by the nesting {@link container} produces. */
+var chipClasses = (hue) => {
+	const { bg, fg, surface } = getStyles(hue);
+	return {
+		hash: mx("flex items-center px-1 text-black text-xs", bg),
+		label: mx("flex items-center px-1 text-sm", surface, fg)
+	};
+};
+/**
+* TypeKeyword:Identifier
+*/
+var TypeWidget = class extends WidgetType {
+	_identifier;
+	constructor(_identifier) {
+		super();
+		this._identifier = _identifier;
+	}
+	ignoreEvent() {
+		return false;
+	}
+	eq(other) {
+		return this._identifier === other._identifier;
+	}
+	toDOM() {
+		const label = this._identifier.split(/\W/).at(-1);
+		return container("border-sky-500", Domino.of("span").classNames(mx("flex items-center px-1 text-black text-xs bg-sky-500")).text("type"), Domino.of("span").classNames(mx("flex items-center px-1 text-fg-muted")).text(label));
+	}
+};
+/**
+* Tag
+*/
+var TagWidget = class extends WidgetType {
+	_str;
+	_hue;
+	constructor(_str, _hue) {
+		super();
+		this._str = _str;
+		this._hue = _hue;
+	}
+	eq(other) {
+		return this._str === other._str;
+	}
+	toDOM() {
+		const { hash, label } = chipClasses(this._hue);
+		return container(getStyles(this._hue).border, Domino.of("span").classNames(hash).text("#"), Domino.of("span").classNames(label).text(this._str));
+	}
+};
+/**
+* { type: "value" }
+*/
+var ObjectWidget = class extends WidgetType {
+	_props;
+	_entries;
+	_json;
+	constructor(_props) {
+		super();
+		this._props = _props;
+		this._entries = Object.entries(this._props);
+		this._json = JSON.stringify(this._props);
+	}
+	ignoreEvent() {
+		return false;
+	}
+	eq(other) {
+		return this._json === other._json;
+	}
+	toDOM() {
+		return container("border-separator divide-x divide-separator", ...this._entries.map(([key, value]) => {
+			const keyEl = Domino.of("span").classNames("flex items-center px-1 text-fg-muted text-xs bg-modal-surface first:rounded-l-xs").text(key);
+			const valueEl = Domino.of("span").classNames("flex items-center px-1 text-fg-muted").text(value);
+			return Domino.of("span").classNames("inline-flex items-stretch").append(keyEl, valueEl);
+		}));
+	}
+};
+/**
+* Symbol
+*/
+var SymbolWidget = class extends WidgetType {
+	_str;
+	constructor(_str) {
+		super();
+		this._str = _str;
+	}
+	eq(other) {
+		return this._str === other._str;
+	}
+	toDOM() {
+		return Domino.of("span").text(this._str).root;
+	}
+};
+var styles = EditorView.theme({
+	".cm-line": { lineHeight },
+	".cm-scroller": {
+		alignItems: "center",
+		minHeight: "2.5rem"
+	},
+	"@media (pointer: fine)": { ".cm-scroller": { minHeight: "2rem" } }
+});
+/**
+* Define syntax highlighting tags for the query language.
+*/
+var queryHighlighting = styleTags({
+	"Not And Or": tags.keyword,
+	"TypeKeyword": tags.attributeName,
+	"String": tags.string,
+	"Number": tags.number,
+	"Boolean": tags.bool,
+	"Null": tags.null,
+	"Identifier": tags.variableName,
+	"PropertyPath": tags.propertyName,
+	"{ }": tags.brace,
+	"[ ]": tags.squareBracket,
+	"( )": tags.paren,
+	":": tags.definitionOperator,
+	",": tags.separator,
+	".": tags.derefOperator
+});
+/**
+* Create the query language with the parser and highlighting.
+*/
+var queryLanguage = LRLanguage.define({
+	parser: QueryDSL.Parser.configure({
+		props: [queryHighlighting],
+		strict: false
+	}),
+	languageData: { commentTokens: { line: "//" } }
+});
+/**
+* Define a custom highlight style for the query language.
+*/
+var queryHighlightStyle = HighlightStyle.define([
+	{
+		tag: tags.keyword,
+		class: "text-blue-text"
+	},
+	{
+		tag: tags.string,
+		class: "text-orange-text"
+	},
+	{
+		tag: tags.number,
+		class: "text-green-text"
+	},
+	{
+		tag: tags.bool,
+		class: "text-green-text"
+	},
+	{
+		tag: tags.null,
+		class: "text-neutral-text"
+	},
+	{
+		tag: tags.attributeName,
+		class: "text-blue-text"
+	},
+	{
+		tag: tags.variableName,
+		class: "text-teal-text"
+	},
+	{
+		tag: tags.propertyName,
+		class: "text-teal-text"
+	},
+	{
+		tag: tags.definitionOperator,
+		class: "text-fg-subtle"
+	},
+	{
+		tag: tags.separator,
+		class: "text-fg-subtle"
+	},
+	{
+		tag: tags.derefOperator,
+		class: "text-fg-subtle"
+	},
+	{
+		tag: tags.brace,
+		class: "text-fg-subtle"
+	},
+	{
+		tag: tags.squareBracket,
+		class: "text-fg-subtle"
+	},
+	{
+		tag: tags.operator,
+		class: "text-fg-subtle"
+	},
+	{
+		tag: tags.paren,
+		class: "text-amber-text"
+	}
+]);
+function intersectRanges(a, b) {
+	const start = Math.max(a.from, b.from);
+	const end = Math.min(a.to, b.to);
+	return start <= end ? {
+		from: start,
+		to: end
+	} : null;
+}
+/** Label characters the grammar admits after `#` (`Tag { "#" $[a-zA-Z0-9_\-]+ }`). */
+var TAG_LABEL_CHAR = /[a-zA-Z0-9_-]/;
+/**
+* Ranges of an in-progress tag — a `#` the parser has not yet accepted as a {@link QueryDSL.Node.Tag},
+* because the grammar requires at least one label character after it. Skips offsets the tree already
+* claimed, and any `#` inside a string, where it is content rather than a tag.
+*/
+var bareTagRanges = (state, tagged) => {
+	const ranges = [];
+	const text = state.sliceDoc();
+	const covered = (index) => tagged.some(({ from, to }) => index >= from && index < to);
+	for (let index = text.indexOf("#"); index !== -1; index = text.indexOf("#", index + 1)) {
+		if (covered(index) || syntaxTree(state).resolveInner(index, 1).type.id === QueryDSL.Node.String) continue;
+		let end = index + 1;
+		while (end < text.length && TAG_LABEL_CHAR.test(text[end])) end++;
+		ranges.push({
+			from: index,
+			to: end
+		});
+	}
+	return ranges;
+};
+//#endregion
+//#region src/components/QueryEditor/QueryEditor.tsx
+/**
+* Query editor with decorations and autocomplete.
+*/
+var QueryEditor = forwardRef(({ db, tags, value, readonly, numItems = 8, onChange, onFilterChange, ...props }, forwardedRef) => {
+	const { t } = useTranslation(translationKey);
+	const getOptions = useMemo(() => completions({
+		db,
+		tags
+	}), [db, tags]);
+	const getMenu = useCallback(async (context) => [createMenuGroup({ items: getOptions(context) })], [getOptions]);
+	const builder = useMemo(() => onFilterChange ? new QueryBuilder(tags) : void 0, [onFilterChange, tags]);
+	const handleChange = useCallback((doc) => {
+		onChange?.(doc);
+		if (builder) onFilterChange?.(builder.build(doc));
+	}, [
+		onChange,
+		onFilterChange,
+		builder
+	]);
+	const tagsKey = useMemo(() => Object.values(tags ?? {}).map((tag) => `${tag.id}:${tag.label}:${tag.hue ?? ""}`).join(), [tags]);
+	const tagsRef = useRef(tags);
+	tagsRef.current = tags;
+	const themeMode = useThemeMode();
+	const extensions = useMemo(() => [
+		createBasicExtensions({
+			readOnly: readonly,
+			lineWrapping: false,
+			placeholder: t("query-editor.placeholder"),
+			bracketMatching: false
+		}),
+		createThemeExtensions({
+			themeMode,
+			slots: { scroller: { className: "scrollbar-none" } }
+		}),
+		query({ tags: tagsRef.current }),
+		Prec.highest(keymap.of([{
+			key: "Enter",
+			run: () => {
+				return true;
+			}
+		}]))
+	], [
+		readonly,
+		themeMode,
+		tagsKey
+	]);
+	return /* @__PURE__ */ jsx(Editor.Root, {
+		ref: forwardedRef,
+		extensions,
+		numItems,
+		trigger: ["#"],
+		activateOnDelimiters: [":"],
+		triggerKey: "Ctrl-Space",
+		getMenu,
+		children: /* @__PURE__ */ jsx(Editor.View, {
+			...props,
+			initialValue: value,
+			onChange: handleChange,
+			selectionEnd: true
+		})
+	});
+});
+//#endregion
+//#region src/components/QueryForm/Picker.tsx
+var NULL = "__NULL__";
+var Picker = ({ placeholder, values, value, onChange }) => {
+	const { t } = useTranslation(translationKey);
+	const sorted = useMemo(() => values?.sort(({ label: a }, { label: b }) => a.localeCompare(b)) ?? [], [values]);
+	return /* @__PURE__ */ jsxs(Select.Root, {
+		items: [{
+			value: NULL,
+			label: t("picker-none.label")
+		}, ...sorted],
+		value: [value ?? NULL],
+		onValueChange: ({ value: [value] }) => onChange?.(value === NULL ? null : value),
+		children: [/* @__PURE__ */ jsx(Select.Trigger, { placeholder: placeholder ?? t("picker-select.label") }), /* @__PURE__ */ jsx(Select.Content, { children: /* @__PURE__ */ jsxs(Select.ItemGroup, { children: [/* @__PURE__ */ jsx(Select.Item, { item: {
+			value: NULL,
+			label: t("picker-none.label")
+		} }), sorted.map(({ value, label }) => /* @__PURE__ */ jsx(Select.Item, { item: {
+			value,
+			label
+		} }, value))] }) })]
+	});
+};
+//#endregion
+//#region src/components/QueryForm/query.ts
+var extractTypename = (query) => {
+	return Match.value(query).pipe(Match.withReturnType(), Match.when({ type: "select" }, (q) => extractTypenameFromFilter(q.filter)), Match.when({ type: "filter" }, (q) => {
+		const selectionTypename = extractTypename(q.selection);
+		const filterTypename = extractTypenameFromFilter(q.filter);
+		return Option.isSome(selectionTypename) ? selectionTypename : filterTypename;
+	}), Match.when({ type: "options" }, (q) => extractTypename(q.query)), Match.when({ type: "from" }, (q) => extractTypename(q.query)), Match.when({ type: "order" }, (q) => extractTypename(q.query)), Match.when({ type: "limit" }, (q) => extractTypename(q.query)), Match.orElse(() => Option.none()));
+};
+var extractTag = (query) => {
+	return Match.value(query).pipe(Match.withReturnType(), Match.when({ type: "select" }, (q) => extractTagFromFilter(q.filter)), Match.when({ type: "filter" }, (q) => {
+		const selectionTag = extractTag(q.selection);
+		const filterTag = extractTagFromFilter(q.filter);
+		return Option.isSome(filterTag) ? filterTag : selectionTag;
+	}), Match.when({ type: "options" }, (q) => extractTag(q.query)), Match.when({ type: "from" }, (q) => extractTag(q.query)), Match.when({ type: "order" }, (q) => extractTag(q.query)), Match.when({ type: "limit" }, (q) => extractTag(q.query)), Match.orElse(() => Option.none()));
+};
+var extractTypenameFromFilter = (filter) => {
+	return Match.value(filter).pipe(Match.withReturnType(), Match.when({ type: "object" }, (f) => Option.fromNullishOr(f.typename)), Match.when({ type: "and" }, (f) => f.filters.reduce((acc, filterItem) => Option.isSome(acc) ? acc : extractTypenameFromFilter(filterItem), Option.none())), Match.when({ type: "or" }, (f) => f.filters.reduce((acc, filterItem) => Option.isSome(acc) ? acc : extractTypenameFromFilter(filterItem), Option.none())), Match.orElse(() => Option.none()));
+};
+var extractTagFromFilter = (filter) => {
+	return Match.value(filter).pipe(Match.withReturnType(), Match.when({ type: "tag" }, (f) => Option.some(f.tag)), Match.when({ type: "and" }, (f) => f.filters.reduce((acc, filterItem) => Option.isSome(acc) ? acc : extractTagFromFilter(filterItem), Option.none())), Match.when({ type: "or" }, (f) => f.filters.reduce((acc, filterItem) => Option.isSome(acc) ? acc : extractTagFromFilter(filterItem), Option.none())), Match.orElse(() => Option.none()));
+};
+//#endregion
+//#region src/components/QueryForm/QueryForm.tsx
+var QueryForm = ({ classNames, initialQuery, types, tags, onChange }) => {
+	const { t } = useTranslation(translationKey);
+	const initialType = initialQuery ? Option.getOrUndefined(extractTypename(initialQuery)) : void 0;
+	const initialTag = initialQuery ? Option.getOrUndefined(extractTag(initialQuery)) : void 0;
+	const [type, setType] = useState(initialType ?? null);
+	const [tag, setTag] = useState(initialTag ?? null);
+	const tagOptions = useMemo(() => tags?.map((tag) => ({
+		value: Obj.getURI(tag),
+		label: tag.label
+	})), [tags]);
+	const handleChange = useCallback(({ type, tag }) => {
+		const typeFilter = type ? Filter.type(type) : null;
+		const tagFilter = tag ? Filter.tag(tag) : null;
+		const combined = typeFilter && tagFilter ? Filter.and(typeFilter, tagFilter) : typeFilter ?? tagFilter ?? Filter.nothing();
+		onChange?.(Query.select(combined));
+	}, [onChange]);
+	const handleTypeChange = useCallback((value) => {
+		const uri = value;
+		setType(uri);
+		handleChange({
+			type: uri,
+			tag
+		});
+	}, [handleChange, tag]);
+	const handleTagChange = useCallback((tag) => {
+		setTag(tag);
+		handleChange({
+			type,
+			tag
+		});
+	}, [handleChange, type]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: mx("grid grid-cols-2 gap-2", classNames),
+		children: [types && /* @__PURE__ */ jsx(Picker, {
+			placeholder: t("picker-type.placeholder"),
+			values: types,
+			value: type,
+			onChange: handleTypeChange
+		}), tags && /* @__PURE__ */ jsx(Picker, {
+			placeholder: t("picker-tag.placeholder"),
+			values: tagOptions,
+			value: tag,
+			onChange: handleTagChange
+		})]
+	});
+};
+//#endregion
+//#region src/hooks/useQueryBuilder.ts
+/**
+* Creates a filter from a query string.
+*/
+var useQueryBuilder = (query) => {
+	const builder = useMemo(() => new QueryBuilder(), []);
+	const [filter, setFilter] = useState(Filter.everything());
+	useEffect(() => {
+		if (query) {
+			const { filter } = builder.build(query);
+			setFilter(filter ?? Filter.everything());
+		} else setFilter(Filter.everything());
+	}, [builder, query]);
+	return filter;
+};
+//#endregion
+export { QueryEditor, QueryForm, useQueryBuilder };
+
+//# sourceMappingURL=index.mjs.map