@revisium/schema-toolkit-ui 0.2.2 → 0.3.0

package/dist/index.mjs

@@ -1,12 +1,12 @@
 import * as mobx from "mobx";
 import { makeAutoObservable, observable, reaction, runInAction } from "mobx";
-import { FIELD_NAME_ERROR_MESSAGE, JsonSchemaTypeName, SystemSchemaIds, createRowModel, createTableModel, createTableModel as createTableModel$1, fileSchema, generateDefaultValue, isValidFieldName, jsonPointerToSimplePath, rowCreatedAtSchema, rowCreatedIdSchema, rowHashSchema, rowIdSchema, rowPublishedAtSchema, rowSchemaHashSchema, rowUpdatedAtSchema, rowVersionIdSchema, validateFormulaAgainstSchema } from "@revisium/schema-toolkit";
+import { FIELD_NAME_ERROR_MESSAGE, SystemSchemaIds, createRowModel, createTableModel, fileSchema, generateDefaultValue, isForeignKeyValueNode, isValidFieldName, jsonPointerToSimplePath, rowCreatedAtSchema, rowCreatedIdSchema, rowHashSchema, rowIdSchema, rowPublishedAtSchema, rowSchemaHashSchema, rowUpdatedAtSchema, rowVersionIdSchema, validateFormulaAgainstSchema } from "@revisium/schema-toolkit";
 import { createMobxProvider, setReactivityProvider } from "@revisium/schema-toolkit/core";
-import { Badge, Box, Button, Flex, Icon, IconButton, Input, Menu, Popover, Portal, SegmentGroup, Text, Textarea, Tooltip as Tooltip$1, VStack } from "@chakra-ui/react";
+import { Badge, Box, Button, Flex, HStack, HoverCard, Icon, IconButton, Image, Input, Menu, Popover, Portal, SegmentGroup, Spinner, Text, Textarea, Tooltip as Tooltip$1, VStack } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 import * as React$1 from "react";
 import React, { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { PiArrowCounterClockwiseBold, PiArrowRight, PiArrowsLeftRightLight, PiBracketsCurlyThin, PiCaretDownLight, PiCaretLeft, PiCaretRight, PiCopy, PiDotOutlineFill, PiDotsSixVerticalBold, PiEquals, PiFunction, PiGear, PiLinkThin, PiMinusLight, PiPencilSimpleLight, PiPlusBold, PiPlusLight, PiTextT, PiTrash, PiTreeViewThin, PiWarning, PiWarningCircle, PiX } from "react-icons/pi";
+import { PiArrowCounterClockwiseBold, PiArrowRight, PiArrowSquareUpRightThin, PiArrowsLeftRightLight, PiBracketsCurlyThin, PiCaretDownLight, PiCaretLeft, PiCaretRight, PiCopy, PiDotOutlineFill, PiDotsSixVerticalBold, PiDotsThreeVerticalBold, PiEquals, PiFile, PiFunction, PiFunctionLight, PiGear, PiInfo, PiLinkThin, PiMagnifyingGlassBold, PiMinusLight, PiPencilSimpleLight, PiPlusBold, PiPlusLight, PiTextT, PiTrash, PiTreeViewThin, PiUploadThin, PiWarning, PiWarningCircle, PiX, PiXBold } from "react-icons/pi";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { githubLight } from "@uiw/codemirror-theme-github";
 import CodeMirror, { EditorView } from "@uiw/react-codemirror";
@@ -16,6 +16,9 @@ import { Menu as Menu$1 } from "@chakra-ui/react/menu";
 import { LuChevronRight } from "react-icons/lu";
 import { draggable, dropTargetForElements, monitorForElements } from "@atlaskit/drag-and-drop/adapter/element";
 import { DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogPositioner, DialogRoot, DialogTitle } from "@chakra-ui/react/dialog";
+import { Virtuoso } from "react-virtuoso";
+
+export * from "@revisium/schema-toolkit"
 
 //#region src/schema-editor/model/state/TreeState.ts
 var TreeState = class {
@@ -1680,7 +1683,7 @@ var SchemaEditorCore = class {
 	keyboard;
 	constructor(jsonSchema, options = {}, accessorFactory = new NodeAccessorFactory()) {
 		ensureReactivityProvider();
-		this._tableModel = createTableModel$1({
+		this._tableModel = createTableModel({
 			tableId: options.tableId ?? "",
 			schema: jsonSchema,
 			refSchemas: options.refSchemas ?? defaultRefSchemas
@@ -4585,5 +4588,1969 @@ const UpdatingSchemaEditor = observer(({ vm }) => {
 });
 
 //#endregion
-export { BackButton, CloseButton, ContentEditable, CopyButton, CreateButton, CreatingEditorVM, CreatingSchemaEditor, GrayButton, JsonCard, JsonSchemaTypeName, SchemaEditorCore, SchemaTypeIds, SettingsButton, Tooltip, UpdatingEditorVM, UpdatingSchemaEditor, ViewerSwitcher, ViewerSwitcherMode, createRowModel, createTableModel, ensureReactivityProvider, getLabelByRef, typeMenuGroups, useContentEditable };
+//#region src/row-editor/vm/flattenNodes.ts
+function traverse(node, result) {
+	result.push({
+		type: "node",
+		node
+	});
+	if (node.showChildren) for (const child of node.childNodes) traverse(child, result);
+	if (node.isArray() && node.showAddButton) result.push({
+		type: "add-button",
+		array: node,
+		guides: [...node.guides, false]
+	});
+}
+function flattenNodes(root) {
+	const result = [];
+	if (root.isObject()) for (const child of root.children) traverse(child, result);
+	else traverse(root, result);
+	return result;
+}
+
+//#endregion
+//#region src/row-editor/vm/state/RowTreeState.ts
+var RowTreeState = class {
+	_expanded = observable.map();
+	_focused = observable.map();
+	constructor() {
+		makeAutoObservable(this, {}, { autoBind: true });
+	}
+	isExpanded(nodeId) {
+		return this._expanded.get(nodeId) ?? true;
+	}
+	setExpanded(nodeId, value) {
+		this._expanded.set(nodeId, value);
+	}
+	toggleExpanded(nodeId) {
+		this._expanded.set(nodeId, !this.isExpanded(nodeId));
+	}
+	isFocused(nodeId) {
+		return this._focused.get(nodeId) ?? false;
+	}
+	setFocused(nodeId, value) {
+		this._focused.set(nodeId, value);
+	}
+	expandAll(nodeIds) {
+		for (const nodeId of nodeIds) this._expanded.set(nodeId, true);
+	}
+	collapseAll(nodeIds) {
+		for (const nodeId of nodeIds) this._expanded.set(nodeId, false);
+	}
+	reset() {
+		this._expanded.clear();
+		this._focused.clear();
+	}
+};
+
+//#endregion
+//#region src/row-editor/vm/accessor/RowNodeAccessor.ts
+var RowNodeAccessor = class {
+	_menu;
+	_layout;
+	constructor(node, parent, _state, _tree, editorContext, _childResolver) {
+		this.node = node;
+		this.parent = parent;
+		this._state = _state;
+		this._tree = _tree;
+		this.editorContext = editorContext;
+		this._childResolver = _childResolver;
+		makeAutoObservable(this, {}, { autoBind: true });
+	}
+	setMenu(menu) {
+		this._menu = menu;
+	}
+	setLayout(layout) {
+		this._layout = layout;
+	}
+	get id() {
+		return this.node.id;
+	}
+	get name() {
+		return this.node.name;
+	}
+	get displayName() {
+		if (this.parent) return this.node.name;
+		return this._rootDisplayName();
+	}
+	get testId() {
+		if (!this.parent) return "root";
+		const parentId = this.parent.testId;
+		if (parentId === "root" && this.parent.isObject()) return this.name;
+		return `${parentId}-${this.name}`;
+	}
+	isPrimitive() {
+		return this.node.isPrimitive();
+	}
+	isObject() {
+		return this.node.isObject();
+	}
+	isArray() {
+		return this.node.isArray();
+	}
+	get isExpanded() {
+		return this._state.isExpanded;
+	}
+	set isExpanded(value) {
+		this._state.setExpanded(value);
+	}
+	get isFocused() {
+		return this._state.isFocused;
+	}
+	expand() {
+		this._state.setExpanded(true);
+	}
+	collapse() {
+		this._state.setExpanded(false);
+	}
+	toggleExpanded() {
+		this._state.toggleExpanded();
+	}
+	setFocused(focused) {
+		this._state.setFocused(focused);
+	}
+	get depth() {
+		return this._layout.depth;
+	}
+	get guides() {
+		return this._layout.guides;
+	}
+	get isCollapsible() {
+		return this._layout.isCollapsible;
+	}
+	get isCollapsibleTree() {
+		return this._layout.isCollapsibleTree;
+	}
+	get rendererType() {
+		return this._layout.rendererType;
+	}
+	get isContainer() {
+		return this._layout.isContainer;
+	}
+	get childNodes() {
+		return this._childResolver.getChildren(this);
+	}
+	get showChildren() {
+		return this._layout.showChildren;
+	}
+	get collapsedLabel() {
+		return this._layout.collapsedLabel;
+	}
+	get isLongText() {
+		return this._layout.isLongText;
+	}
+	expandAll() {
+		this._layout.expandAll();
+	}
+	collapseAll() {
+		this._layout.collapseAll();
+	}
+	get menu() {
+		return this._menu.menu;
+	}
+	get formula() {
+		if (this.node.isPrimitive()) return this.node.formula?.expression;
+	}
+	get isEditorReadOnly() {
+		return this.editorContext?.isReadOnly ?? false;
+	}
+	get path() {
+		return this._tree.pathOf(this.node).asString();
+	}
+	get isDirty() {
+		return this.node.isDirty;
+	}
+	get value() {
+		return this.node.value;
+	}
+	get defaultValue() {
+		return this.node.defaultValue;
+	}
+	get isReadOnly() {
+		return this.node.isReadOnly;
+	}
+	get isFieldReadOnly() {
+		return this.isReadOnly || this.isEditorReadOnly;
+	}
+	setValue(value) {
+		this.node.setValue(value);
+	}
+	get children() {
+		if (!this.node.isObject()) return [];
+		return this._childResolver.getChildren(this);
+	}
+	child(name) {
+		return this.children.find((c) => c.name === name);
+	}
+	get items() {
+		if (!this.node.isArray()) return [];
+		return this._childResolver.getChildren(this);
+	}
+	get length() {
+		if (!this.node.isArray()) return 0;
+		return this.node.length;
+	}
+	at(index) {
+		const allItems = this.items;
+		if (index < 0 || index >= allItems.length) return;
+		return allItems[index];
+	}
+	pushValue(value) {
+		this.node.pushValue(value);
+	}
+	removeAt(index) {
+		this.node.removeAt(index);
+	}
+	move(fromIndex, toIndex) {
+		this.node.move(fromIndex, toIndex);
+	}
+	insertAt(index) {
+		this.node.pushValue(null);
+		const lastIndex = this.length - 1;
+		if (index < lastIndex) this.node.move(lastIndex, index);
+	}
+	get showAddButton() {
+		return this.isExpanded && !this.isEditorReadOnly;
+	}
+	isForeignKey() {
+		return isForeignKeyValueNode(this.node);
+	}
+	get foreignKeyTableId() {
+		return this.node.foreignKey;
+	}
+	isFile() {
+		return this.rendererType === "file";
+	}
+	get fileStatus() {
+		return this._getFileChildValue("status", "");
+	}
+	get fileId() {
+		return this._getFileChildValue("fileId", "");
+	}
+	get fileUrl() {
+		return this._getFileChildValue("url", "");
+	}
+	get fileMimeType() {
+		return this._getFileChildValue("mimeType", "");
+	}
+	get fileWidth() {
+		return this._getFileChildNumericValue("width");
+	}
+	get fileHeight() {
+		return this._getFileChildNumericValue("height");
+	}
+	get callbacks() {
+		return this.editorContext?.callbacks ?? null;
+	}
+	getChildAccessors() {
+		return this._childResolver.getChildren(this);
+	}
+	_getFileChildValue(name, fallback) {
+		if (!this.node.isObject()) return fallback;
+		const child = this.node.child(name);
+		if (child?.isPrimitive()) return String(child.value);
+		return fallback;
+	}
+	_rootDisplayName() {
+		const schema = this.node.schema;
+		if (!("type" in schema)) return this.node.name;
+		return `<${schema.type}>`;
+	}
+	_getFileChildNumericValue(name) {
+		if (!this.node.isObject()) return 0;
+		const child = this.node.child(name);
+		if (child?.isPrimitive()) return Number(child.value) || 0;
+		return 0;
+	}
+};
+
+//#endregion
+//#region src/row-editor/vm/accessor/RowNodeState.ts
+var RowNodeState = class {
+	constructor(_nodeId, _treeState) {
+		this._nodeId = _nodeId;
+		this._treeState = _treeState;
+		makeAutoObservable(this, {}, { autoBind: true });
+	}
+	get isExpanded() {
+		return this._treeState.isExpanded(this._nodeId);
+	}
+	setExpanded(value) {
+		this._treeState.setExpanded(this._nodeId, value);
+	}
+	toggleExpanded() {
+		this._treeState.toggleExpanded(this._nodeId);
+	}
+	get isFocused() {
+		return this._treeState.isFocused(this._nodeId);
+	}
+	setFocused(value) {
+		this._treeState.setFocused(this._nodeId, value);
+	}
+};
+
+//#endregion
+//#region src/row-editor/vm/accessor/RowNodeMenu.ts
+var RowNodeMenu = class {
+	constructor(_accessor) {
+		this._accessor = _accessor;
+		makeAutoObservable(this, {}, { autoBind: true });
+	}
+	get menu() {
+		return [
+			...this.topMenu,
+			...this.arrayOwnMenu,
+			...this.arrayItemMenu,
+			...this.bottomMenu
+		];
+	}
+	get arrayItemContext() {
+		const parent = this._accessor.parent;
+		if (!parent || !parent.node.isArray()) return null;
+		const arrayNode = parent.node;
+		const index = arrayNode.value.indexOf(this._accessor.node);
+		if (index === -1) return null;
+		return {
+			index,
+			arrayLength: arrayNode.value.length,
+			insertAt: (i) => parent.insertAt(i),
+			removeAt: (i) => parent.removeAt(i),
+			move: (from, to) => parent.move(from, to)
+		};
+	}
+	get topMenu() {
+		if (!this._accessor.isCollapsibleTree) return [];
+		return [{
+			value: "expand",
+			label: "Expand",
+			handler: () => this._accessor.expandAll()
+		}, {
+			value: "collapse",
+			label: "Collapse",
+			handler: () => this._accessor.collapseAll(),
+			afterSeparator: true
+		}];
+	}
+	get arrayOwnMenu() {
+		if (!this._accessor.node.isArray()) return [];
+		return [{
+			value: "array",
+			label: "Array",
+			children: [...this._accessor.length > 0 ? [{
+				value: "add-first",
+				label: "Add item to start",
+				handler: () => this._accessor.insertAt(0)
+			}] : [], {
+				value: "add-last",
+				label: "Add item to end",
+				handler: () => this._accessor.pushValue(null)
+			}]
+		}];
+	}
+	get arrayItemMenu() {
+		const ctx = this.arrayItemContext;
+		if (!ctx) return [];
+		const moveMenuItem = ctx.arrayLength > 1 ? this.buildMoveMenuItem(ctx) : null;
+		return [
+			...moveMenuItem ? [moveMenuItem] : [],
+			{
+				value: "item",
+				label: "Item",
+				children: [{
+					value: "add-before",
+					label: "Add before",
+					handler: () => ctx.insertAt(ctx.index)
+				}, {
+					value: "add-after",
+					label: "Add after",
+					handler: () => ctx.insertAt(ctx.index + 1)
+				}]
+			},
+			{
+				value: "delete",
+				label: "Delete",
+				handler: () => ctx.removeAt(ctx.index),
+				afterSeparator: true
+			}
+		];
+	}
+	buildMoveMenuItem(ctx) {
+		const { index, arrayLength } = ctx;
+		const isFirst = index === 0;
+		const isLast = index === arrayLength - 1;
+		return {
+			value: "move",
+			label: "Move",
+			children: [
+				...arrayLength > 2 && index > 1 ? [{
+					value: "move-to-start",
+					label: "to start",
+					handler: () => ctx.move(index, 0)
+				}] : [],
+				...!isFirst ? [{
+					value: "move-up",
+					label: "up",
+					handler: () => ctx.move(index, index - 1)
+				}] : [],
+				...!isLast ? [{
+					value: "move-down",
+					label: "down",
+					handler: () => ctx.move(index, index + 1)
+				}] : [],
+				...arrayLength > 2 && index < arrayLength - 2 ? [{
+					value: "move-to-end",
+					label: "to end",
+					handler: () => ctx.move(index, arrayLength - 1)
+				}] : []
+			]
+		};
+	}
+	get bottomMenu() {
+		const copyChildren = [{
+			value: "json",
+			label: "json",
+			handler: () => this.copyJson()
+		}];
+		if (this._accessor.path) copyChildren.push({
+			value: "path",
+			label: "path",
+			handler: () => this.copyPath()
+		});
+		return [{
+			value: "copy",
+			label: "Copy",
+			children: copyChildren
+		}];
+	}
+	async copyJson() {
+		const json = JSON.stringify(this._accessor.node.getPlainValue(), null, 2);
+		await navigator.clipboard.writeText(json);
+	}
+	async copyPath() {
+		await navigator.clipboard.writeText(this._accessor.path);
+	}
+};
+
+//#endregion
+//#region src/row-editor/vm/accessor/RowNodeLayout.ts
+const STRING_COLLAPSE_THRESHOLD = 64;
+var RowNodeLayout = class {
+	constructor(_accessor) {
+		this._accessor = _accessor;
+		makeAutoObservable(this, {}, { autoBind: true });
+	}
+	get depth() {
+		let d = 0;
+		let current = this._accessor.parent;
+		while (current) {
+			d++;
+			current = current.parent;
+		}
+		return d;
+	}
+	get guides() {
+		const result = [];
+		let current = this._accessor.parent;
+		while (current) {
+			if (current.parent) {
+				const isLastSibling = current.parent.getChildAccessors().at(-1)?.id === current.id;
+				result.unshift(!isLastSibling);
+			} else if (!current.isObject()) result.unshift(false);
+			current = current.parent;
+		}
+		return result;
+	}
+	get isCollapsible() {
+		return this._accessor.getChildAccessors().length > 0;
+	}
+	get isCollapsibleTree() {
+		return this.isCollapsible || this._accessor.getChildAccessors().some((c) => c.isCollapsible);
+	}
+	get rendererType() {
+		if (this._accessor.node.isObject()) {
+			const schema = this._accessor.node.schema;
+			if ("$ref" in schema && schema.$ref === SystemSchemaIds.File) return "file";
+			return "container";
+		}
+		if (this._accessor.node.isArray()) return "container";
+		if (isForeignKeyValueNode(this._accessor.node)) return "foreignKey";
+		if (this._accessor.node.isPrimitive()) {
+			const v = this._accessor.value;
+			if (typeof v === "boolean") return "boolean";
+			if (typeof v === "number") return "number";
+		}
+		return "string";
+	}
+	get isContainer() {
+		return this._accessor.node.isObject() || this._accessor.node.isArray();
+	}
+	get isRefNode() {
+		return "$ref" in this._accessor.node.schema && this.isContainer;
+	}
+	get showChildren() {
+		return this.isContainer && this._accessor.isExpanded && this._accessor.getChildAccessors().length > 0;
+	}
+	get collapsedLabel() {
+		if (this._accessor.node.isPrimitive()) return this.primitiveCollapsedLabel;
+		if (this._accessor.node.isObject()) return formatCount(this._accessor.children.length, "key", "keys");
+		if (this._accessor.node.isArray()) return formatCount(this._accessor.length, "item", "items");
+		return "";
+	}
+	get primitiveCollapsedLabel() {
+		const v = this._accessor.value;
+		if (typeof v !== "string") return "";
+		if (!v.trim()) return "<empty text>";
+		const wordCount = v.trim().split(/\s+/).length;
+		return formatCount(wordCount, "word", "words", "text: ");
+	}
+	get isLongText() {
+		const v = this._accessor.value;
+		return typeof v === "string" && v.length > STRING_COLLAPSE_THRESHOLD;
+	}
+	expandAll() {
+		this._accessor.expand();
+		for (const child of this._accessor.getChildAccessors()) if (child.isCollapsible) child.expandAll();
+	}
+	collapseAll() {
+		this._accessor.collapse();
+		for (const child of this._accessor.getChildAccessors()) if (child.isCollapsible) child.collapseAll();
+	}
+};
+function formatCount(count, singular, plural, prefix = "") {
+	return `<${prefix}${count} ${count === 1 ? singular : plural}>`;
+}
+
+//#endregion
+//#region src/row-editor/vm/accessor/RowAccessorFactory.ts
+var RowAccessorFactory = class {
+	constructor(_tree, _treeState, _editorContext) {
+		this._tree = _tree;
+		this._treeState = _treeState;
+		this._editorContext = _editorContext;
+	}
+	create(node, parent, childResolver) {
+		const accessor = new RowNodeAccessor(node, parent, new RowNodeState(node.id, this._treeState), this._tree, this._editorContext, childResolver);
+		const layout = new RowNodeLayout(accessor);
+		const menu = new RowNodeMenu(accessor);
+		accessor.setLayout(layout);
+		accessor.setMenu(menu);
+		if (layout.isRefNode) this._treeState.setExpanded(node.id, false);
+		return accessor;
+	}
+};
+
+//#endregion
+//#region src/row-editor/vm/accessor/RowAccessorCache.ts
+var RowAccessorCache = class {
+	_cache = observable.map();
+	constructor(_factory) {
+		this._factory = _factory;
+	}
+	getOrCreate(node, parent) {
+		const cached = this._cache.get(node.id);
+		if (cached) return cached;
+		const accessor = this._factory.create(node, parent, this);
+		this._cache.set(node.id, accessor);
+		return accessor;
+	}
+	getChildren(accessor) {
+		const node = accessor.node;
+		if (node.isObject()) return node.children.map((childNode) => this.getOrCreate(childNode, accessor));
+		if (node.isArray()) return node.value.map((itemNode) => this.getOrCreate(itemNode, accessor));
+		return [];
+	}
+	clear() {
+		this._cache.clear();
+	}
+};
+
+//#endregion
+//#region src/row-editor/vm/RowEditorCore.ts
+var RowEditorCore = class {
+	treeState = new RowTreeState();
+	_cache;
+	_root;
+	constructor(tree, editorContext, options) {
+		this._cache = new RowAccessorCache(new RowAccessorFactory(tree, this.treeState, editorContext));
+		this._root = this._cache.getOrCreate(tree.root, null);
+		if (options?.collapseComplexity) this._collapseIfComplex(options.collapseComplexity);
+		makeAutoObservable(this, { treeState: false }, { autoBind: true });
+	}
+	get root() {
+		return this._root;
+	}
+	get flattenedNodes() {
+		return flattenNodes(this._root);
+	}
+	dispose() {
+		this._cache.clear();
+		this.treeState.reset();
+	}
+	_collapseIfComplex(threshold) {
+		const nodeIds = this._collectAllNodeIds(this._root);
+		if (nodeIds.length >= threshold) {
+			this.treeState.collapseAll(nodeIds);
+			this.treeState.setExpanded(this._root.id, true);
+		}
+	}
+	_collectAllNodeIds(accessor, ids = []) {
+		ids.push(accessor.id);
+		for (const child of accessor.getChildAccessors()) this._collectAllNodeIds(child, ids);
+		return ids;
+	}
+};
+
+//#endregion
+//#region src/row-editor/vm/RowEditorVM.ts
+var RowEditorVM = class {
+	_rowModel;
+	_core;
+	_mode;
+	_callbacks;
+	_onChange;
+	_onSave;
+	_onCancel;
+	_disposeReaction;
+	_prevPatchCount = 0;
+	_rowId;
+	_initialRowId;
+	constructor(schema, initialValue, options) {
+		ensureReactivityProvider();
+		this._mode = options?.mode ?? "editing";
+		this._rowId = options?.rowId ?? "";
+		this._initialRowId = this._rowId;
+		this._callbacks = options?.callbacks ?? null;
+		this._onChange = options?.onChange ?? null;
+		this._onSave = options?.onSave ?? null;
+		this._onCancel = options?.onCancel ?? null;
+		this._rowModel = createRowModel({
+			rowId: "editor",
+			schema,
+			data: initialValue,
+			refSchemas: options?.refSchemas
+		});
+		this._core = new RowEditorCore(this._rowModel.tree, this, { collapseComplexity: options?.collapseComplexity });
+		makeAutoObservable(this, {}, { autoBind: true });
+		this._disposeReaction = this._onChange ? reaction(() => this.patches, () => this._emitChange()) : null;
+	}
+	get root() {
+		return this._core.root;
+	}
+	get flattenedNodes() {
+		return this._core.flattenedNodes;
+	}
+	get rowModel() {
+		return this._rowModel;
+	}
+	get mode() {
+		return this._mode;
+	}
+	get rowId() {
+		return this._rowId;
+	}
+	get initialRowId() {
+		return this._initialRowId;
+	}
+	get isRowIdChanged() {
+		return this._rowId !== this._initialRowId;
+	}
+	setRowId(value) {
+		this._rowId = value;
+	}
+	get isDirty() {
+		return this._rowModel.isDirty;
+	}
+	get hasChanges() {
+		return this.isDirty || this.isRowIdChanged;
+	}
+	get isValid() {
+		return this._rowModel.isValid;
+	}
+	get errors() {
+		return this._rowModel.errors;
+	}
+	get isReadOnly() {
+		return this._mode === "reading";
+	}
+	get callbacks() {
+		return this._callbacks;
+	}
+	get patches() {
+		return this._rowModel.patches;
+	}
+	getValue() {
+		return this._rowModel.getPlainValue();
+	}
+	save() {
+		const value = this.getValue();
+		const patches = this.patches;
+		this.commit();
+		this._onSave?.(this._rowId, value, patches);
+	}
+	markAsSaved() {
+		this.commit();
+	}
+	cancel() {
+		this._onCancel?.();
+	}
+	commit() {
+		this._rowModel.commit();
+		this._prevPatchCount = 0;
+		this._initialRowId = this._rowId;
+	}
+	revert() {
+		this._rowModel.revert();
+		this._prevPatchCount = 0;
+	}
+	dispose() {
+		this._disposeReaction?.();
+		this._core.dispose();
+		this._rowModel.dispose();
+	}
+	_emitChange() {
+		if (!this._onChange || !this.isValid) return;
+		const all = this.patches;
+		const newPatches = all.slice(this._prevPatchCount);
+		this._prevPatchCount = all.length;
+		if (newPatches.length > 0) this._onChange(newPatches);
+	}
+};
+
+//#endregion
+//#region src/row-editor/ui/components/Guides.tsx
+function toGuideItems(guides) {
+	return guides.map((showLine, i) => ({
+		key: `d${i}`,
+		showLine
+	}));
+}
+const Guides = ({ guides }) => {
+	const items = toGuideItems(guides);
+	return /* @__PURE__ */ jsxs(Flex, {
+		position: "relative",
+		alignItems: "center",
+		children: [/* @__PURE__ */ jsx(Box, {
+			left: "-48px",
+			width: "48px",
+			height: "100%",
+			position: "absolute"
+		}), items.map((item) => /* @__PURE__ */ jsx(Box, {
+			position: "relative",
+			width: "24px",
+			height: "100%",
+			_before: item.showLine ? {
+				content: "\"\"",
+				position: "absolute",
+				left: "8px",
+				top: 0,
+				bottom: 0,
+				width: "1px",
+				backgroundColor: "blackAlpha.200"
+			} : void 0
+		}, item.key))]
+	});
+};
+
+//#endregion
+//#region src/row-editor/ui/components/Dot.tsx
+const getDotTestId = (testId, isCollapsed) => {
+	if (!testId) return;
+	return isCollapsed ? `${testId}-expand` : `${testId}-collapse`;
+};
+const Dot = ({ isCollapsed, isCollapsible, toggleCollapsed, testId }) => {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [!isCollapsed && /* @__PURE__ */ jsx(Flex, {
+		color: "gray.300",
+		width: "16px",
+		height: "28px",
+		_groupHover: { display: isCollapsible ? "none" : "flex" },
+		alignItems: "center",
+		justifyContent: "center",
+		children: /* @__PURE__ */ jsx(PiDotOutlineFill, {})
+	}), isCollapsible && /* @__PURE__ */ jsx(Flex, {
+		_groupHover: {
+			display: "inline-flex",
+			color: "gray.500"
+		},
+		display: isCollapsed ? "inline-flex" : "none",
+		_hover: { backgroundColor: "transparent" },
+		color: "gray.400",
+		onClick: toggleCollapsed,
+		width: "16px",
+		height: "28px",
+		alignItems: "center",
+		justifyContent: "center",
+		cursor: "pointer",
+		"data-testid": getDotTestId(testId, isCollapsed),
+		children: /* @__PURE__ */ jsx(Box, {
+			transform: isCollapsed ? "rotate(0deg)" : "rotate(90deg)",
+			children: /* @__PURE__ */ jsx(MdOutlineChevronRight, { size: 16 })
+		})
+	})] });
+};
+
+//#endregion
+//#region src/row-editor/ui/components/Field.tsx
+const Field = ({ name, formula, description, isDeprecated }) => {
+	const getTooltipContent = () => {
+		if (formula && description) return /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsxs(Flex, {
+			alignItems: "center",
+			gap: "4px",
+			marginBottom: "4px",
+			fontWeight: "medium",
+			children: [/* @__PURE__ */ jsx(PiFunctionLight, { size: 14 }), /* @__PURE__ */ jsx("span", { children: formula })]
+		}), /* @__PURE__ */ jsx(Box, {
+			color: "gray.300",
+			children: description
+		})] });
+		if (formula) return /* @__PURE__ */ jsxs(Flex, {
+			alignItems: "center",
+			gap: "4px",
+			children: [/* @__PURE__ */ jsx(PiFunctionLight, { size: 14 }), /* @__PURE__ */ jsx("span", { children: formula })]
+		});
+		if (description) return description;
+		return null;
+	};
+	const tooltipContent = getTooltipContent();
+	const fieldContent = /* @__PURE__ */ jsxs(Flex, {
+		alignItems: "center",
+		gap: "4px",
+		color: "gray.400",
+		children: [/* @__PURE__ */ jsxs(Text, {
+			textDecoration: isDeprecated ? "line-through" : void 0,
+			children: [name, ":"]
+		}), formula && /* @__PURE__ */ jsx(PiFunctionLight, { size: 14 })]
+	});
+	return /* @__PURE__ */ jsx(Flex, {
+		height: "28px",
+		alignItems: "center",
+		children: tooltipContent ? /* @__PURE__ */ jsx(Tooltip, {
+			openDelay: 350,
+			content: tooltipContent,
+			positioning: { placement: "right-end" },
+			showArrow: true,
+			children: fieldContent
+		}) : fieldContent
+	});
+};
+
+//#endregion
+//#region src/row-editor/ui/components/More.tsx
+const More = ({ onClick, label }) => {
+	return /* @__PURE__ */ jsx(Text, {
+		ml: "8px",
+		color: "gray.300",
+		onClick,
+		cursor: "pointer",
+		children: label
+	});
+};
+
+//#endregion
+//#region src/row-editor/ui/components/NodeMenu/NodeMenu.tsx
+const NodeMenu = observer(({ node }) => {
+	const [isOpen, setIsOpen] = useState(false);
+	if (node.menu.length === 0) return null;
+	return /* @__PURE__ */ jsxs(Menu.Root, {
+		lazyMount: true,
+		unmountOnExit: true,
+		onOpenChange: ({ open }) => setIsOpen(open),
+		children: [/* @__PURE__ */ jsx(Menu.Trigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Flex, {
+				width: "24px",
+				left: "-24px",
+				position: "absolute",
+				zIndex: 1,
+				alignItems: "center",
+				justifyContent: "center",
+				cursor: "pointer",
+				children: /* @__PURE__ */ jsx(Flex, {
+					alignItems: "center",
+					justifyContent: "center",
+					mt: "2px",
+					height: "24px",
+					width: "12px",
+					borderRadius: "4px",
+					bg: "blackAlpha.50",
+					backdropFilter: "blur(4px)",
+					boxShadow: "0 0 0 1px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.08)",
+					opacity: isOpen ? 1 : 0,
+					transition: isOpen ? "opacity 1s ease 0s" : void 0,
+					_groupHover: {
+						opacity: 1,
+						transition: "opacity 0.5s ease 0s"
+					},
+					_hover: { boxShadow: "0 0 0 1px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.1)" },
+					children: /* @__PURE__ */ jsx(Icon, {
+						size: "md",
+						color: "gray.400",
+						as: PiDotsThreeVerticalBold
+					})
+				})
+			})
+		}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsx(Menu.Content, { children: node.menu.map((item) => item.children ? /* @__PURE__ */ jsxs(Menu.Root, {
+			positioning: {
+				placement: "right-start",
+				gutter: 2
+			},
+			children: [
+				item.beforeSeparator && /* @__PURE__ */ jsx(Menu.Separator, {}),
+				/* @__PURE__ */ jsxs(Menu.TriggerItem, {
+					width: "100%",
+					justifyContent: "space-between",
+					children: [
+						item.label,
+						" ",
+						/* @__PURE__ */ jsx(LuChevronRight, {})
+					]
+				}),
+				item.afterSeparator && /* @__PURE__ */ jsx(Menu.Separator, {}),
+				/* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsx(Menu.Content, { children: item.children.map((childItem) => /* @__PURE__ */ jsxs(Fragment, { children: [
+					childItem.beforeSeparator && /* @__PURE__ */ jsx(Menu.Separator, {}),
+					/* @__PURE__ */ jsx(Menu.Item, {
+						value: childItem.value,
+						onClick: childItem.handler,
+						children: /* @__PURE__ */ jsx(Box, {
+							flex: 1,
+							children: childItem.label
+						})
+					}),
+					childItem.afterSeparator && /* @__PURE__ */ jsx(Menu.Separator, {})
+				] }, childItem.value)) }) }) })
+			]
+		}, item.value) : /* @__PURE__ */ jsxs(Fragment, { children: [
+			item.beforeSeparator && /* @__PURE__ */ jsx(Menu.Separator, {}),
+			/* @__PURE__ */ jsx(Menu.Item, {
+				value: item.value,
+				onClick: item.handler,
+				children: /* @__PURE__ */ jsx(Box, {
+					flex: 1,
+					children: item.label
+				})
+			}),
+			item.afterSeparator && /* @__PURE__ */ jsx(Menu.Separator, {})
+		] }, item.value)) }) }) })]
+	});
+});
+
+//#endregion
+//#region src/row-editor/ui/components/Row.tsx
+const Row = ({ node, name, guides, isCollapsible = false, isExpanded = true, onToggle, formula, description, isDeprecated, skipDot, skipField, skipMore, collapsedLabel, isReadOnly, testId, onMouseEnter, onMouseLeave, children }) => {
+	const isCollapsed = isCollapsible && !isExpanded;
+	const showMenu = node && !isReadOnly;
+	return /* @__PURE__ */ jsxs(Flex, {
+		width: "100%",
+		onMouseEnter,
+		onMouseLeave,
+		position: "relative",
+		className: "group",
+		"data-testid": testId,
+		children: [
+			/* @__PURE__ */ jsx(Guides, { guides }),
+			showMenu && /* @__PURE__ */ jsx(NodeMenu, { node }),
+			/* @__PURE__ */ jsxs(Flex, {
+				width: "100%",
+				alignItems: "center",
+				children: [/* @__PURE__ */ jsxs(Flex, { children: [
+					!skipDot && /* @__PURE__ */ jsx(Dot, {
+						isCollapsed,
+						isCollapsible,
+						toggleCollapsed: onToggle,
+						testId
+					}),
+					!skipField && /* @__PURE__ */ jsx(Field, {
+						name,
+						formula,
+						description,
+						isDeprecated
+					}),
+					children
+				] }), !skipMore && isCollapsed && collapsedLabel && /* @__PURE__ */ jsx(More, {
+					onClick: onToggle,
+					label: collapsedLabel
+				})]
+			})
+		]
+	});
+};
+
+//#endregion
+//#region src/row-editor/ui/renderers/ContainerRenderer.tsx
+const ContainerRendererComponent = observer(({ node }) => {
+	const handleToggle = useCallback(() => {
+		node.toggleExpanded();
+	}, [node]);
+	return /* @__PURE__ */ jsx(Row, {
+		node,
+		name: node.displayName,
+		guides: node.guides,
+		isCollapsible: node.isCollapsible,
+		isExpanded: node.isExpanded,
+		onToggle: handleToggle,
+		collapsedLabel: node.collapsedLabel,
+		isReadOnly: node.isEditorReadOnly,
+		testId: node.testId
+	});
+});
+
+//#endregion
+//#region src/row-editor/ui/editors/PrimitiveBox.tsx
+const PrimitiveBox = observer(({ value, readonly, prefix = "", postfix = "", restrict, dataTestId, onChange, onFocus, onBlur }) => {
+	const [focused, setFocused] = useState(false);
+	const handleFocus = useCallback(() => {
+		setFocused(true);
+		onFocus?.();
+	}, [onFocus]);
+	const handleBlur = useCallback(() => {
+		setFocused(false);
+		onBlur?.();
+	}, [onBlur]);
+	return /* @__PURE__ */ jsx(Box, {
+		borderRadius: "4px",
+		bgColor: focused ? "gray.100" : void 0,
+		_hover: { bgColor: readonly ? void 0 : "gray.100" },
+		mt: "2px",
+		ml: "2px",
+		pl: "4px",
+		pr: "4px",
+		minHeight: "24px",
+		minWidth: "15px",
+		cursor: readonly ? "text" : void 0,
+		children: readonly ? `${prefix}${value}${postfix}` : /* @__PURE__ */ jsx(ContentEditable, {
+			dataTestId,
+			prefix,
+			postfix,
+			initValue: value,
+			onChange,
+			onFocus: handleFocus,
+			onBlur: handleBlur,
+			restrict
+		})
+	});
+});
+
+//#endregion
+//#region src/row-editor/ui/editors/StringEditor.tsx
+const StringEditor = ({ value, setValue, readonly, dataTestId }) => {
+	const [internalValue, setInternalValue] = useState(value);
+	useEffect(() => {
+		setInternalValue(value);
+	}, [value]);
+	const handleChange = useCallback((newValue) => {
+		setInternalValue(newValue);
+	}, []);
+	const handleBlur = useCallback(() => {
+		setValue(internalValue);
+	}, [internalValue, setValue]);
+	const prefix = internalValue ? "" : "\"";
+	return /* @__PURE__ */ jsx(PrimitiveBox, {
+		prefix,
+		postfix: prefix,
+		value: internalValue,
+		readonly,
+		dataTestId,
+		onChange: handleChange,
+		onBlur: handleBlur
+	});
+};
+
+//#endregion
+//#region src/row-editor/ui/renderers/StringRenderer.tsx
+const StringRendererComponent = observer(({ node }) => {
+	const value = String(node.value);
+	const handleSetValue = useCallback((newValue) => {
+		node.setValue(newValue);
+	}, [node]);
+	const handleToggle = useCallback(() => {
+		node.toggleExpanded();
+	}, [node]);
+	if (node.isLongText) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Row, {
+		node,
+		name: node.displayName,
+		guides: node.guides,
+		formula: node.formula,
+		isCollapsible: true,
+		isExpanded: node.isExpanded,
+		onToggle: handleToggle,
+		collapsedLabel: node.collapsedLabel,
+		isReadOnly: node.isEditorReadOnly,
+		testId: node.testId
+	}), node.isExpanded && /* @__PURE__ */ jsx(Row, {
+		name: "",
+		guides: [...node.guides, true],
+		skipDot: true,
+		skipField: true,
+		children: /* @__PURE__ */ jsx(StringEditor, {
+			value,
+			setValue: handleSetValue,
+			readonly: node.isFieldReadOnly,
+			dataTestId: `${node.testId}-editor`
+		})
+	})] });
+	return /* @__PURE__ */ jsx(Row, {
+		node,
+		name: node.displayName,
+		guides: node.guides,
+		formula: node.formula,
+		isReadOnly: node.isEditorReadOnly,
+		testId: node.testId,
+		children: /* @__PURE__ */ jsx(StringEditor, {
+			value,
+			setValue: handleSetValue,
+			readonly: node.isFieldReadOnly,
+			dataTestId: `${node.testId}-editor`
+		})
+	});
+});
+
+//#endregion
+//#region src/row-editor/ui/editors/NumberEditor.tsx
+const NUMERIC_CHARS = /^[\d.eE+-]+$/;
+const NumberEditor = ({ value, setValue, readonly, dataTestId }) => {
+	const stringValue = value.toString();
+	const lastValidValue = useRef(stringValue);
+	const [state, setState] = useState(stringValue);
+	useEffect(() => {
+		setState(stringValue);
+		lastValidValue.current = stringValue;
+	}, [stringValue]);
+	return /* @__PURE__ */ jsx(PrimitiveBox, {
+		value: state,
+		readonly,
+		dataTestId,
+		onChange: useCallback((newValue) => {
+			setState(newValue);
+		}, []),
+		onBlur: useCallback(() => {
+			const trimmed = state.trim();
+			const parsedValue = Number(trimmed);
+			if (trimmed !== "" && Number.isFinite(parsedValue)) {
+				setValue(parsedValue);
+				setState(parsedValue.toString());
+				lastValidValue.current = parsedValue.toString();
+			} else setState(lastValidValue.current);
+		}, [setValue, state]),
+		restrict: NUMERIC_CHARS
+	});
+};
+
+//#endregion
+//#region src/row-editor/ui/renderers/NumberRenderer.tsx
+const NumberRendererComponent = observer(({ node }) => {
+	const handleSetValue = useCallback((value) => {
+		node.setValue(value);
+	}, [node]);
+	return /* @__PURE__ */ jsx(Row, {
+		node,
+		name: node.displayName,
+		guides: node.guides,
+		formula: node.formula,
+		isReadOnly: node.isEditorReadOnly,
+		testId: node.testId,
+		children: /* @__PURE__ */ jsx(NumberEditor, {
+			value: Number(node.value),
+			setValue: handleSetValue,
+			readonly: node.isFieldReadOnly,
+			dataTestId: `${node.testId}-editor`
+		})
+	});
+});
+
+//#endregion
+//#region src/row-editor/ui/editors/FocusPopover.tsx
+const FocusPopover = ({ isOpen, setIsOpen, trigger, children, disabled, width }) => {
+	const triggerRef = useRef(null);
+	const lastRectRef = useRef(null);
+	const getAnchorRect = useCallback(() => {
+		const rect = triggerRef.current?.getBoundingClientRect();
+		if (rect && rect.width > 0) lastRectRef.current = rect;
+		return lastRectRef.current;
+	}, []);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Box, {
+		ref: triggerRef,
+		onFocus: useCallback(() => {
+			if (!disabled) setIsOpen(true);
+		}, [disabled, setIsOpen]),
+		children: trigger
+	}), !disabled && /* @__PURE__ */ jsx(Popover.Root, {
+		lazyMount: true,
+		unmountOnExit: true,
+		open: isOpen,
+		onOpenChange: ({ open }) => setIsOpen(open),
+		autoFocus: false,
+		closeOnInteractOutside: true,
+		modal: false,
+		positioning: {
+			placement: "bottom-start",
+			getAnchorRect
+		},
+		children: /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsx(Popover.Content, {
+			width,
+			p: 1,
+			children
+		}) }) })
+	})] });
+};
+
+//#endregion
+//#region src/row-editor/ui/editors/FocusPopoverItem.tsx
+const FocusPopoverItem = ({ children, onClick }) => {
+	return /* @__PURE__ */ jsx(Box, {
+		px: 2,
+		py: 1.5,
+		cursor: "pointer",
+		borderRadius: "md",
+		fontSize: "sm",
+		_hover: { bg: "gray.100" },
+		onClick,
+		children
+	});
+};
+
+//#endregion
+//#region src/row-editor/ui/editors/BooleanMenu.tsx
+const BooleanMenu = ({ children, onChange, disabled }) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const handleSelect = useCallback((value) => {
+		onChange(value === "true");
+		setIsOpen(false);
+	}, [onChange]);
+	return /* @__PURE__ */ jsxs(FocusPopover, {
+		width: "60px",
+		isOpen,
+		setIsOpen,
+		trigger: children,
+		disabled,
+		children: [/* @__PURE__ */ jsx(FocusPopoverItem, {
+			onClick: () => handleSelect("true"),
+			children: "true"
+		}), /* @__PURE__ */ jsx(FocusPopoverItem, {
+			onClick: () => handleSelect("false"),
+			children: "false"
+		})]
+	});
+};
+
+//#endregion
+//#region src/row-editor/ui/editors/BooleanEditor.tsx
+const BooleanEditor = ({ value, setValue, readonly, dataTestId }) => {
+	const stringValue = value.toString();
+	const [state, setState] = useState(stringValue);
+	useEffect(() => {
+		setState(stringValue);
+	}, [stringValue]);
+	const handleChange = useCallback((value) => {
+		setState(value);
+	}, []);
+	const handleBlur = useCallback(() => {
+		const trimmed = state.trim();
+		const boolValue = trimmed.toLowerCase() === "false" || trimmed === "0" ? false : Boolean(trimmed);
+		setState(boolValue.toString());
+		setValue(boolValue);
+	}, [setValue, state]);
+	return /* @__PURE__ */ jsx(BooleanMenu, {
+		onChange: useCallback((boolValue) => {
+			setState(boolValue.toString());
+			setValue(boolValue);
+		}, [setValue]),
+		disabled: readonly,
+		children: /* @__PURE__ */ jsx(PrimitiveBox, {
+			value: state,
+			readonly,
+			dataTestId,
+			onChange: handleChange,
+			onBlur: handleBlur
+		})
+	});
+};
+
+//#endregion
+//#region src/row-editor/ui/renderers/BooleanRenderer.tsx
+const BooleanRendererComponent = observer(({ node }) => {
+	const handleSetValue = useCallback((value) => {
+		node.setValue(value);
+	}, [node]);
+	return /* @__PURE__ */ jsx(Row, {
+		node,
+		name: node.displayName,
+		guides: node.guides,
+		formula: node.formula,
+		isReadOnly: node.isEditorReadOnly,
+		testId: node.testId,
+		children: /* @__PURE__ */ jsx(BooleanEditor, {
+			value: Boolean(node.value),
+			setValue: handleSetValue,
+			readonly: node.isFieldReadOnly,
+			dataTestId: `${node.testId}-editor`
+		})
+	});
+});
+
+//#endregion
+//#region src/row-editor/ui/editors/ForeignKeyActions.tsx
+const ForeignKeyActions = observer(({ node }) => {
+	const value = String(node.value);
+	const showNavigate = Boolean(value) && Boolean(node.callbacks?.onNavigateToForeignKey);
+	const showWarning = !value && !node.isEditorReadOnly;
+	const handleNavigate = useCallback(() => {
+		node.callbacks?.onNavigateToForeignKey?.(node.foreignKeyTableId, value);
+	}, [node, value]);
+	return /* @__PURE__ */ jsxs(Flex, {
+		alignItems: "center",
+		gap: "4px",
+		children: [showNavigate && /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": "Navigate to foreign key",
+			variant: "ghost",
+			size: "2xs",
+			color: "gray.500",
+			_hover: {
+				color: "black",
+				bg: "gray.100"
+			},
+			onClick: handleNavigate,
+			"data-testid": `${node.testId}-fk-navigate`,
+			children: /* @__PURE__ */ jsx(PiArrowSquareUpRightThin, {})
+		}), showWarning && /* @__PURE__ */ jsx(Tooltip, {
+			openDelay: 50,
+			closeDelay: 50,
+			content: "This field requires a valid foreign key ID",
+			children: /* @__PURE__ */ jsx(Flex, {
+				width: "24px",
+				height: "24px",
+				alignItems: "center",
+				justifyContent: "center",
+				color: "gray.400",
+				children: /* @__PURE__ */ jsx(PiInfo, {})
+			})
+		})]
+	});
+});
+
+//#endregion
+//#region src/lib/Debounce.ts
+var Debounce = class {
+	_timer = null;
+	constructor(_delay) {
+		this._delay = _delay;
+	}
+	schedule(fn) {
+		if (this._timer) clearTimeout(this._timer);
+		this._timer = setTimeout(fn, this._delay);
+	}
+	dispose() {
+		if (this._timer) {
+			clearTimeout(this._timer);
+			this._timer = null;
+		}
+	}
+};
+
+//#endregion
+//#region src/search-foreign-key/vm/SearchForeignKeyVM.ts
+var SearchForeignKeyVM = class {
+	_search = "";
+	_state = "loading";
+	_ids = [];
+	_hasMore = false;
+	_initialized = false;
+	_disposeReaction = null;
+	_debounce = new Debounce(300);
+	constructor(_tableId, _onSearch) {
+		this._tableId = _tableId;
+		this._onSearch = _onSearch;
+		makeAutoObservable(this, {}, { autoBind: true });
+	}
+	get search() {
+		return this._search;
+	}
+	get state() {
+		return this._state;
+	}
+	get ids() {
+		return this._ids;
+	}
+	get hasMore() {
+		return this._hasMore;
+	}
+	get showInput() {
+		return this._state === "list" || this._state === "notFound" || this._state === "loading" && this._initialized;
+	}
+	get showFooter() {
+		return this._state === "list" || this._state === "notFound" || this._state === "error" || this._state === "empty";
+	}
+	get showLoading() {
+		return this._state === "loading";
+	}
+	get showNotFound() {
+		return this._state === "notFound";
+	}
+	get showError() {
+		return this._state === "error";
+	}
+	get showEmpty() {
+		return this._state === "empty";
+	}
+	get showList() {
+		return this._state === "list";
+	}
+	get tableId() {
+		return this._tableId;
+	}
+	init() {
+		this._performSearch();
+		this._disposeReaction = reaction(() => this._search, () => this._debouncedSearch());
+	}
+	setSearch(value) {
+		this._search = value;
+	}
+	dispose() {
+		this._disposeReaction?.();
+		this._disposeReaction = null;
+		this._debounce.dispose();
+	}
+	_debouncedSearch() {
+		this._debounce.schedule(() => {
+			this._performSearch();
+		});
+	}
+	_resolveState(ids, search) {
+		if (ids.length === 0 && !search) return "empty";
+		if (ids.length === 0) return "notFound";
+		return "list";
+	}
+	async _performSearch() {
+		if (!this._onSearch) {
+			this._state = "error";
+			return;
+		}
+		const searchTerm = this._search;
+		try {
+			this._state = "loading";
+			const result = await this._onSearch(this._tableId, searchTerm);
+			runInAction(() => {
+				if (this._search !== searchTerm) return;
+				this._initialized = true;
+				this._ids = result.ids;
+				this._hasMore = result.hasMore;
+				this._state = this._resolveState(result.ids, searchTerm);
+			});
+		} catch {
+			runInAction(() => {
+				if (this._search !== searchTerm) return;
+				this._state = "error";
+			});
+		}
+	}
+};
+
+//#endregion
+//#region src/search-foreign-key/ui/Header.tsx
+const Header = ({ tableId, onClose }) => {
+	return /* @__PURE__ */ jsxs(Flex, {
+		p: "4px",
+		alignItems: "center",
+		justifyContent: "space-between",
+		children: [/* @__PURE__ */ jsxs(Text, {
+			fontSize: "xs",
+			color: "gray.600",
+			fontWeight: "medium",
+			children: [
+				"Select from \"",
+				tableId,
+				"\""
+			]
+		}), onClose && /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": "Close",
+			variant: "ghost",
+			size: "2xs",
+			color: "gray.500",
+			_hover: { color: "black" },
+			onClick: onClose,
+			children: /* @__PURE__ */ jsx(PiXBold, {})
+		})]
+	});
+};
+
+//#endregion
+//#region src/search-foreign-key/ui/SearchInput.tsx
+const SearchInput = ({ value, onChange }) => {
+	const handleChange = useCallback((e) => {
+		onChange(e.target.value);
+	}, [onChange]);
+	const handleClear = useCallback(() => {
+		onChange("");
+	}, [onChange]);
+	return /* @__PURE__ */ jsxs(Box, {
+		px: "4px",
+		pb: "4px",
+		position: "relative",
+		children: [/* @__PURE__ */ jsx(Input, {
+			value,
+			onChange: handleChange,
+			placeholder: "Search by ID...",
+			size: "sm",
+			"data-testid": "fk-search-input",
+			autoFocus: true
+		}), value && /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": "Clear",
+			variant: "ghost",
+			size: "2xs",
+			position: "absolute",
+			right: "8px",
+			top: "50%",
+			transform: "translateY(-50%)",
+			onClick: handleClear,
+			color: "gray.400",
+			_hover: { color: "black" },
+			children: /* @__PURE__ */ jsx(PiXBold, {})
+		})]
+	});
+};
+
+//#endregion
+//#region src/search-foreign-key/ui/Item.tsx
+const Item = ({ id, onSelect }) => {
+	return /* @__PURE__ */ jsx(Box, {
+		px: 2,
+		py: 1.5,
+		mr: "12px",
+		cursor: "pointer",
+		borderRadius: "md",
+		fontSize: "sm",
+		_hover: { bg: "gray.100" },
+		onClick: useCallback(() => {
+			onSelect(id);
+		}, [id, onSelect]),
+		"data-testid": `fk-item-${id}`,
+		children: id
+	});
+};
+
+//#endregion
+//#region src/search-foreign-key/ui/List.tsx
+const List = ({ ids, onSelect }) => {
+	return /* @__PURE__ */ jsx(Box, {
+		flex: 1,
+		overflowY: "auto",
+		"data-testid": "fk-list",
+		children: ids.map((id) => /* @__PURE__ */ jsx(Item, {
+			id,
+			onSelect
+		}, id))
+	});
+};
+
+//#endregion
+//#region src/search-foreign-key/ui/Empty.tsx
+const Empty = () => {
+	return /* @__PURE__ */ jsx(Flex, {
+		flex: 1,
+		justifyContent: "center",
+		alignItems: "center",
+		"data-testid": "fk-empty",
+		children: /* @__PURE__ */ jsx(Text, {
+			fontSize: "sm",
+			color: "gray.500",
+			children: "No rows found in this table"
+		})
+	});
+};
+
+//#endregion
+//#region src/search-foreign-key/ui/Footer.tsx
+const Footer = ({ onOpenTableSearch, onCreateAndConnect }) => {
+	if (!(onOpenTableSearch || onCreateAndConnect)) return null;
+	return /* @__PURE__ */ jsxs(HStack, {
+		mt: "4px",
+		p: "4px",
+		gap: 2,
+		borderTopWidth: "1px",
+		borderColor: "gray.200",
+		children: [onOpenTableSearch && /* @__PURE__ */ jsxs(Button, {
+			size: "xs",
+			variant: "ghost",
+			color: "gray.500",
+			onClick: onOpenTableSearch,
+			"data-testid": "fk-open-table-search",
+			children: [/* @__PURE__ */ jsx(PiMagnifyingGlassBold, {}), "Open Table Search"]
+		}), onCreateAndConnect && /* @__PURE__ */ jsxs(Button, {
+			size: "xs",
+			variant: "ghost",
+			color: "gray.500",
+			onClick: onCreateAndConnect,
+			"data-testid": "fk-create-and-connect",
+			children: [/* @__PURE__ */ jsx(PiPlusBold, {}), "Create & Connect"]
+		})]
+	});
+};
+
+//#endregion
+//#region src/search-foreign-key/ui/SearchForeignKey.tsx
+const SearchForeignKey = observer(({ tableId, onSearch, onSelect, onClose, onOpenTableSearch, onCreateAndConnect }) => {
+	const [model] = useState(() => new SearchForeignKeyVM(tableId, onSearch));
+	useEffect(() => {
+		model.init();
+		return () => model.dispose();
+	}, [model]);
+	return /* @__PURE__ */ jsxs(Flex, {
+		flexDirection: "column",
+		height: "290px",
+		width: "100%",
+		"data-testid": "fk-picker",
+		children: [
+			/* @__PURE__ */ jsx(Header, {
+				tableId,
+				onClose
+			}),
+			model.showInput && /* @__PURE__ */ jsx(SearchInput, {
+				value: model.search,
+				onChange: model.setSearch
+			}),
+			model.showLoading && /* @__PURE__ */ jsx(Flex, {
+				flex: 1,
+				justifyContent: "center",
+				alignItems: "center",
+				children: /* @__PURE__ */ jsx(Spinner, {
+					size: "sm",
+					color: "gray.400"
+				})
+			}),
+			model.showNotFound && /* @__PURE__ */ jsx(Flex, {
+				flex: 1,
+				justifyContent: "center",
+				alignItems: "center",
+				children: /* @__PURE__ */ jsx(Text, {
+					fontSize: "sm",
+					color: "gray.500",
+					children: "No results found"
+				})
+			}),
+			model.showError && /* @__PURE__ */ jsx(Flex, {
+				flex: 1,
+				justifyContent: "center",
+				alignItems: "center",
+				children: /* @__PURE__ */ jsx(Text, {
+					fontSize: "sm",
+					color: "gray.500",
+					children: "Could not load data"
+				})
+			}),
+			model.showEmpty && /* @__PURE__ */ jsx(Empty, {}),
+			model.showList && /* @__PURE__ */ jsx(List, {
+				ids: model.ids,
+				onSelect
+			}),
+			model.showFooter && /* @__PURE__ */ jsx(Footer, {
+				onOpenTableSearch,
+				onCreateAndConnect
+			})
+		]
+	});
+});
+
+//#endregion
+//#region src/row-editor/ui/editors/ForeignKeyMenu.tsx
+const ForeignKeyMenu = ({ node, onSelect, disabled, children }) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const onSearchForeignKey = node.callbacks?.onSearchForeignKey;
+	const handleSelect = useCallback((id) => {
+		onSelect(id);
+		setIsOpen(false);
+	}, [onSelect]);
+	const handleClose = useCallback(() => {
+		setIsOpen(false);
+	}, []);
+	const handleOpenTableSearch = useCallback(async () => {
+		if (!node.callbacks?.onOpenTableSearch) return;
+		const selectedId = await node.callbacks.onOpenTableSearch(node.foreignKeyTableId);
+		if (selectedId) handleSelect(selectedId);
+	}, [
+		node.callbacks,
+		node.foreignKeyTableId,
+		handleSelect
+	]);
+	const handleCreateAndConnect = useCallback(async () => {
+		if (!node.callbacks?.onCreateAndConnect) return;
+		const createdId = await node.callbacks.onCreateAndConnect(node.foreignKeyTableId);
+		if (createdId) handleSelect(createdId);
+	}, [
+		node.callbacks,
+		node.foreignKeyTableId,
+		handleSelect
+	]);
+	if (!onSearchForeignKey) return /* @__PURE__ */ jsx(Fragment$1, { children });
+	return /* @__PURE__ */ jsx(FocusPopover, {
+		isOpen,
+		setIsOpen,
+		trigger: children,
+		disabled,
+		width: "320px",
+		children: /* @__PURE__ */ jsx(SearchForeignKey, {
+			tableId: node.foreignKeyTableId,
+			onSearch: onSearchForeignKey,
+			onSelect: handleSelect,
+			onClose: handleClose,
+			onOpenTableSearch: node.callbacks?.onOpenTableSearch ? handleOpenTableSearch : void 0,
+			onCreateAndConnect: node.callbacks?.onCreateAndConnect ? handleCreateAndConnect : void 0
+		})
+	});
+};
+
+//#endregion
+//#region src/row-editor/ui/renderers/ForeignKeyRenderer.tsx
+const ForeignKeyRendererComponent = observer(({ node }) => {
+	const value = String(node.value);
+	const handleSetValue = useCallback((newValue) => {
+		node.setValue(newValue);
+	}, [node]);
+	const handleSelect = useCallback((id) => {
+		node.setValue(id);
+	}, [node]);
+	return /* @__PURE__ */ jsx(Row, {
+		node,
+		name: node.displayName,
+		guides: node.guides,
+		formula: node.formula,
+		isReadOnly: node.isEditorReadOnly,
+		testId: node.testId,
+		children: /* @__PURE__ */ jsxs(Flex, {
+			alignItems: "center",
+			gap: "2px",
+			children: [/* @__PURE__ */ jsx(ForeignKeyMenu, {
+				node,
+				onSelect: handleSelect,
+				disabled: node.isFieldReadOnly,
+				children: /* @__PURE__ */ jsx(StringEditor, {
+					value,
+					setValue: handleSetValue,
+					readonly: node.isFieldReadOnly,
+					dataTestId: `${node.testId}-editor`
+				})
+			}), /* @__PURE__ */ jsx(ForeignKeyActions, { node })]
+		})
+	});
+});
+
+//#endregion
+//#region src/row-editor/ui/editors/FileHoverCard.tsx
+const FileIcon = ({ onClick, dataTestId }) => {
+	return /* @__PURE__ */ jsx(IconButton, {
+		"data-testid": dataTestId,
+		"aria-label": "Open file",
+		variant: "ghost",
+		size: "2xs",
+		color: "gray.400",
+		_hover: {
+			bg: "gray.100",
+			color: "black"
+		},
+		onClick,
+		children: /* @__PURE__ */ jsx(PiFile, {})
+	});
+};
+const FileHoverCard = ({ url, availablePreview, width, height, onClick, dataTestId }) => {
+	if (!availablePreview) return /* @__PURE__ */ jsx(FileIcon, {
+		onClick,
+		dataTestId
+	});
+	return /* @__PURE__ */ jsxs(HoverCard.Root, {
+		lazyMount: true,
+		unmountOnExit: true,
+		openDelay: 350,
+		closeDelay: 100,
+		positioning: { gutter: 16 },
+		children: [/* @__PURE__ */ jsx(HoverCard.Trigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(FileIcon, {
+				onClick,
+				dataTestId
+			}) })
+		}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(HoverCard.Positioner, { children: /* @__PURE__ */ jsxs(HoverCard.Content, { children: [/* @__PURE__ */ jsx(HoverCard.Arrow, { children: /* @__PURE__ */ jsx(HoverCard.ArrowTip, {}) }), /* @__PURE__ */ jsx(Image, {
+			aspectRatio: height > 0 ? width / height : 1,
+			width: "400px",
+			src: url,
+			alt: "File preview"
+		})] }) }) })]
+	});
+};
+
+//#endregion
+//#region src/row-editor/ui/editors/FileActions.tsx
+const FileActions = observer(({ node }) => {
+	const fileInputRef = useRef(null);
+	const url = node.fileUrl;
+	const fileId = node.fileId;
+	const status = node.fileStatus;
+	const mimeType = node.fileMimeType;
+	const width = node.fileWidth;
+	const height = node.fileHeight;
+	const readonly = node.isEditorReadOnly;
+	const availablePreview = mimeType.startsWith("image/");
+	const showViewFile = Boolean(url);
+	const showUploadFile = !readonly && Boolean(node.callbacks?.onUploadFile) && (status === "ready" || status === "uploaded");
+	const showInfo = !showViewFile && !showUploadFile;
+	const handleFileChange = useCallback(async (event) => {
+		const file = event.target.files?.[0];
+		if (!file) return;
+		event.target.value = "";
+		await node.callbacks?.onUploadFile?.(fileId, file);
+	}, [node, fileId]);
+	const handleOpenFile = useCallback(() => {
+		if (node.callbacks?.onOpenFile) node.callbacks.onOpenFile(url);
+		else window.open(url, "_blank", "noopener,noreferrer");
+	}, [node, url]);
+	const handleUploadClick = useCallback(() => {
+		fileInputRef.current?.click();
+	}, []);
+	return /* @__PURE__ */ jsxs(Flex, {
+		alignItems: "center",
+		children: [
+			showInfo && /* @__PURE__ */ jsx(Tooltip, {
+				openDelay: 50,
+				closeDelay: 50,
+				content: readonly ? "The file was not uploaded in this revision" : "Save the row first, then upload the file",
+				children: /* @__PURE__ */ jsx(Flex, {
+					width: "24px",
+					height: "24px",
+					alignItems: "center",
+					justifyContent: "center",
+					color: "gray.400",
+					children: /* @__PURE__ */ jsx(PiInfo, {})
+				})
+			}),
+			showViewFile && /* @__PURE__ */ jsx(FileHoverCard, {
+				url,
+				availablePreview,
+				width,
+				height,
+				onClick: handleOpenFile,
+				dataTestId: `${node.testId}-open-file`
+			}),
+			showUploadFile && /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx("input", {
+				ref: fileInputRef,
+				type: "file",
+				onChange: handleFileChange,
+				style: { display: "none" },
+				"data-testid": `${node.testId}-file-input`
+			}), /* @__PURE__ */ jsx(IconButton, {
+				"aria-label": "Upload file",
+				variant: "ghost",
+				size: "2xs",
+				color: showViewFile ? "gray.300" : "gray.500",
+				_hover: {
+					bg: "gray.100",
+					color: "black"
+				},
+				onClick: handleUploadClick,
+				"data-testid": `${node.testId}-upload-file`,
+				children: /* @__PURE__ */ jsx(PiUploadThin, {})
+			})] })
+		]
+	});
+});
+
+//#endregion
+//#region src/row-editor/ui/renderers/FileRenderer.tsx
+const FileRendererComponent = observer(({ node }) => {
+	const handleToggle = useCallback(() => {
+		node.toggleExpanded();
+	}, [node]);
+	return /* @__PURE__ */ jsx(Row, {
+		node,
+		name: node.displayName,
+		guides: node.guides,
+		isCollapsible: node.isCollapsible,
+		isExpanded: node.isExpanded,
+		onToggle: handleToggle,
+		collapsedLabel: node.collapsedLabel,
+		isReadOnly: node.isEditorReadOnly,
+		testId: node.testId,
+		skipMore: true,
+		children: /* @__PURE__ */ jsx(FileActions, { node })
+	});
+});
+
+//#endregion
+//#region src/row-editor/ui/renderers/NodeRenderers.ts
+const NODE_RENDERERS = {
+	container: ContainerRendererComponent,
+	string: StringRendererComponent,
+	number: NumberRendererComponent,
+	boolean: BooleanRendererComponent,
+	foreignKey: ForeignKeyRendererComponent,
+	file: FileRendererComponent
+};
+
+//#endregion
+//#region src/row-editor/ui/RowEditor/FlatItemView.tsx
+const FlatItemView = observer(({ item }) => {
+	if (item.type === "node") {
+		const Renderer = NODE_RENDERERS[item.node.rendererType];
+		return /* @__PURE__ */ jsx(Renderer, { node: item.node });
+	}
+	const handleAddItem = () => {
+		item.array.pushValue(null);
+	};
+	return /* @__PURE__ */ jsx(Row, {
+		name: "",
+		guides: item.guides,
+		skipDot: true,
+		skipField: true,
+		skipMore: true,
+		children: /* @__PURE__ */ jsx(CreateButton, {
+			title: "Item",
+			onClick: handleAddItem,
+			dataTestId: `${item.array.testId}-add-button`
+		})
+	});
+});
+
+//#endregion
+//#region src/row-editor/ui/RowEditor/RowEditor.tsx
+const RowEditor = observer(({ viewModel }) => {
+	const itemContent = useCallback((_index, item) => /* @__PURE__ */ jsx(FlatItemView, { item }), []);
+	return /* @__PURE__ */ jsx(Virtuoso, {
+		data: viewModel.flattenedNodes,
+		itemContent,
+		useWindowScroll: true,
+		style: {
+			width: "100%",
+			height: "100%"
+		}
+	});
+});
+
+//#endregion
+//#region src/row-editor/ui/NodeView/NodeView.tsx
+const NodeView = observer(({ viewModel }) => {
+	const Renderer = NODE_RENDERERS[viewModel.rendererType];
+	const { showChildren, childNodes } = viewModel;
+	const showAddButton = viewModel.isArray() && viewModel.showAddButton;
+	const handleAddItem = useCallback(() => {
+		if (viewModel.isArray()) viewModel.pushValue(null);
+	}, [viewModel]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Renderer, { node: viewModel }),
+		showChildren && /* @__PURE__ */ jsx(VStack, {
+			align: "stretch",
+			gap: 0,
+			children: childNodes.map((child) => /* @__PURE__ */ jsx(NodeView, { viewModel: child }, child.id))
+		}),
+		showAddButton && /* @__PURE__ */ jsx(Row, {
+			name: "",
+			guides: [...viewModel.guides, false],
+			skipDot: true,
+			skipField: true,
+			skipMore: true,
+			children: /* @__PURE__ */ jsx(CreateButton, {
+				title: "Item",
+				onClick: handleAddItem,
+				dataTestId: `${viewModel.testId}-add-button`
+			})
+		})
+	] });
+});
+
+//#endregion
+export { BackButton, CloseButton, ContentEditable, CopyButton, CreateButton, CreatingEditorVM, CreatingSchemaEditor, GrayButton, JsonCard, RowEditor, RowEditorVM, SchemaEditorCore, SchemaTypeIds, SearchForeignKey, SearchForeignKeyVM, SettingsButton, Tooltip, UpdatingEditorVM, UpdatingSchemaEditor, ViewerSwitcher, ViewerSwitcherMode, ensureReactivityProvider, getLabelByRef, typeMenuGroups, useContentEditable };
 //# sourceMappingURL=index.mjs.map