@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/components/erd-viewer/ErdViewer.js

@@ -0,0 +1,287 @@
+import { parser } from "../../erd-editor-schema/dist/parser.js";
+import { toDocumentJson } from "../../erd-editor-schema/dist/storageForm.js";
+import { CANVAS_ZOOM_MAX } from "../../constants/schema.js";
+import { hasNameViewMode } from "../../utils/validation.js";
+import { onBeforeMount, onMounted, onUnmounted } from "../../r-html/dist/render/part/node/component/hooks.js";
+import { observable, observer, watch } from "../../r-html/dist/observable/index.js";
+import { nextTick } from "../../r-html/dist/observable/scheduler.js";
+import { useProvider } from "../../r-html/dist/context/useProvider.js";
+import { html, render } from "../../r-html/dist/render/index.js";
+import { createRef, ref } from "../../r-html/dist/render/directives/attribute/ref.js";
+import { createCustomElement } from "../../r-html/dist/render/part/node/component/webComponent/index.js";
+import { toNameViewModeAction } from "../../engine/modules/settings/atom.actions.js";
+import { changeViewportAction } from "../../engine/modules/editor/atom.actions.js";
+import { initialLoadJsonAction$ } from "../../engine/modules/editor/generator.actions.js";
+import { SYSTEM_LOCALE } from "../../i18n/locales.js";
+import { localeContext } from "../localeContext.js";
+import { themeContext } from "../themeContext.js";
+import { SYSTEM_APPEARANCE } from "../../themes/radix-ui-theme.js";
+import { fitDocument } from "../../konva/scene/fitZoom.js";
+import GlobalStyles from "../global-styles/GlobalStyles.js";
+import Theme from "../theme/Theme.js";
+import { observeThemeOverrides, resolveHostTheme } from "../../konva/theme.js";
+import { useLocaleHost } from "../element-host/localeHost.js";
+import { useThemeHost } from "../element-host/themeHost.js";
+import { toLoadValue } from "../../utils/loadValue.js";
+import ErdView from "../erd-view/ErdView.js";
+import { lazyMessagesOf } from "../../i18n/loadMessages.js";
+import { createDocumentSource } from "./documentSource.js";
+//#region src/components/erd-viewer/ErdViewer.tsx
+var UPGRADED_PROPERTIES = [
+	"value",
+	"src",
+	"nameView",
+	"minimap",
+	"controls"
+];
+function takeOwnProperties(element) {
+	const upgraded = UPGRADED_PROPERTIES;
+	const taken = [];
+	for (const name of Reflect.ownKeys(element)) {
+		if (typeof name !== "string" || !upgraded.includes(name)) continue;
+		taken.push([name, Reflect.get(element, name)]);
+		Reflect.deleteProperty(element, name);
+	}
+	return taken;
+}
+var readPageLanguages = (element) => [element.ownerDocument.documentElement.lang, ...navigator.languages].filter(Boolean);
+var ErdViewer = (props, ctx) => {
+	let early = takeOwnProperties(ctx);
+	let destroyed = false;
+	const takeUpEarly = () => {
+		const taken = early;
+		early = [];
+		for (const [name, value] of taken) try {
+			Reflect.set(ctx, name, value);
+		} catch (error) {
+			queueMicrotask(() => {
+				throw error;
+			});
+		}
+	};
+	const themeHost = useThemeHost({ appearance: SYSTEM_APPEARANCE });
+	const { theme } = themeHost;
+	const pageLanguages = observable({ languages: [] }, { shallow: true });
+	let languagesRead = false;
+	onBeforeMount(() => {
+		if (destroyed || languagesRead) return;
+		languagesRead = true;
+		pageLanguages.languages = readPageLanguages(ctx);
+	});
+	const localeHost = useLocaleHost({
+		messagesOf: lazyMessagesOf,
+		languages: { state: pageLanguages },
+		fallbackOption: () => SYSTEM_LOCALE
+	});
+	const sceneTheme = observable({ ...theme }, { shallow: true });
+	const themeProvider = useProvider(ctx, themeContext, sceneTheme);
+	const localeProvider = useProvider(ctx, localeContext, localeHost.i18n);
+	const resolveSceneTheme = () => {
+		Object.assign(sceneTheme, resolveHostTheme(ctx, theme));
+	};
+	const scheduleSceneTheme = () => {
+		nextTick(resolveSceneTheme);
+	};
+	const appRef = createRef(null);
+	const live = () => destroyed ? null : appRef.value;
+	const wrapper = createRef();
+	let stopView = null;
+	let held = toLoadValue("");
+	let heldApplied = false;
+	let followedSrc = "";
+	let srcState = "none";
+	let srcRewritten = false;
+	let fitPending = false;
+	let documentNameView = null;
+	let stopOverrides = null;
+	let stopViewport = null;
+	const documentJsonOf = ({ store: { state } }) => toDocumentJson({
+		...state,
+		settings: {
+			...state.settings,
+			nameViewMode: documentNameView ?? state.settings.nameViewMode
+		}
+	});
+	const showNameView = () => {
+		const app = live();
+		const value = props.nameView ?? documentNameView;
+		if (!app || !value || app.store.state.settings.nameViewMode === value) return;
+		app.store.dispatchSync(toNameViewModeAction(app.store.state, value, true));
+	};
+	const fitWhenMeasured = () => {
+		const app = live();
+		if (!app || !fitPending) return;
+		const { width, height } = app.store.state.editor.viewport;
+		if (width <= 0 || height <= 0) return;
+		fitPending = false;
+		fitDocument(app.store, CANVAS_ZOOM_MAX);
+	};
+	const loadIntoView = (app) => {
+		app.store.dispatchSync(initialLoadJsonAction$(held));
+		heldApplied = true;
+		documentNameView = app.store.state.settings.nameViewMode;
+		showNameView();
+		fitPending = true;
+		fitWhenMeasured();
+	};
+	const takeDocument = (loadValue) => {
+		held = loadValue;
+		heldApplied = false;
+		const app = live();
+		if (app) loadIntoView(app);
+	};
+	const source = createDocumentSource({
+		apply: (text) => {
+			parser(text);
+			srcState = "applied";
+			takeDocument(toLoadValue(text));
+		},
+		onLoad: () => {
+			ctx.dispatchEvent(new CustomEvent("load"));
+		},
+		onError: (cause) => {
+			takeDocument(toLoadValue(""));
+			ctx.dispatchEvent(new CustomEvent("error", { detail: cause }));
+		}
+	});
+	const followSrc = () => {
+		if (props.src === followedSrc && !srcRewritten) return;
+		srcRewritten = false;
+		followedSrc = props.src;
+		source.cancel();
+		srcState = followedSrc ? "pending" : "none";
+	};
+	const fetchPending = () => {
+		if (srcState !== "pending" || !live() || !ctx.isConnected) return;
+		if (source.state.status === "loading") return;
+		source.load(followedSrc);
+	};
+	const rewriteSrc = () => {
+		if (destroyed || srcState !== "none" || !props.src) return;
+		srcRewritten = true;
+		nextTick(() => {
+			followSrc();
+			fetchPending();
+		});
+	};
+	Object.defineProperty(ctx, "src", {
+		get: () => {
+			takeUpEarly();
+			return props.src;
+		},
+		set: (src) => {
+			takeUpEarly();
+			Reflect.set(props, "src", src);
+			rewriteSrc();
+		}
+	});
+	const srcAttribute = new MutationObserver(rewriteSrc);
+	srcAttribute.observe(ctx, { attributeFilter: ["src"] });
+	Object.defineProperty(ctx, "value", {
+		get: () => {
+			takeUpEarly();
+			const app = live();
+			return app ? documentJsonOf(app) : toDocumentJson(parser(held));
+		},
+		set: (value) => {
+			takeUpEarly();
+			const loadValue = toLoadValue(value);
+			parser(loadValue);
+			srcAttribute.takeRecords();
+			srcRewritten = false;
+			followedSrc = props.src;
+			source.cancel();
+			srcState = "none";
+			takeDocument(loadValue);
+		}
+	});
+	const unwatch = [watch(theme).subscribe(scheduleSceneTheme), watch(props).subscribe((propName) => {
+		if (propName === "nameView") showNameView();
+		else if (propName === "src") {
+			followSrc();
+			fetchPending();
+		}
+	})];
+	const drawView = () => {
+		const target = wrapper.value;
+		if (stopView || destroyed || !target) return;
+		stopView = observer(() => render(target, html`<${ErdView} .appRef=${appRef} .minimap=${props.minimap} .controls=${props.controls} .status=${source.state.status} />`));
+	};
+	const destroy = () => {
+		if (destroyed) return;
+		const app = appRef.value;
+		if (app) held = documentJsonOf(app);
+		destroyed = true;
+		stopView?.();
+		stopView = null;
+		if (wrapper.value) render(wrapper.value, null);
+		srcState = "none";
+		source.cancel();
+		srcAttribute.disconnect();
+		stopOverrides?.();
+		stopOverrides = null;
+		stopViewport?.();
+		stopViewport = null;
+		unwatch.forEach((unsubscribe) => unsubscribe());
+		themeHost.destroy();
+		localeHost.destroy();
+		themeProvider.destroy();
+		localeProvider.destroy();
+	};
+	onMounted(() => {
+		drawView();
+		const app = live();
+		if (!app) return;
+		resolveSceneTheme();
+		stopOverrides = observeThemeOverrides(ctx, scheduleSceneTheme);
+		stopViewport ??= app.store.subscribe((actions) => {
+			if (actions.some(({ type }) => type === changeViewportAction.type)) fitWhenMeasured();
+		});
+		if (!heldApplied) loadIntoView(app);
+		followSrc();
+		fetchPending();
+	});
+	onUnmounted(() => {
+		stopOverrides?.();
+		stopOverrides = null;
+		source.cancel();
+	});
+	ctx.setPresetTheme = themeHost.setPresetTheme;
+	ctx.setSystemAppearance = themeHost.setSystemAppearance;
+	ctx.setTheme = themeHost.setTheme;
+	ctx.setLocale = localeHost.setLocale;
+	ctx.setSystemLocale = localeHost.setSystemLocale;
+	ctx.destroy = destroy;
+	onBeforeMount(takeUpEarly);
+	if (early.length && !ctx.isConnected) queueMicrotask(takeUpEarly);
+	return () => html`<${GlobalStyles} /><${Theme} .theme=${theme} /><div ${ref(wrapper)} style=${{ display: "contents" }}></div>`;
+};
+var TAG_NAME = "erd-viewer";
+var shownUnlessFalse = {
+	type: (value) => value !== "false",
+	default: true
+};
+var ErdViewerElement = /* @__PURE__ */ createCustomElement({
+	shadow: "closed",
+	observedProps: {
+		src: {
+			type: (value) => value ?? "",
+			default: ""
+		},
+		nameView: {
+			type: (value) => value !== null && hasNameViewMode(value) ? value : null,
+			default: null
+		},
+		minimap: shownUnlessFalse,
+		controls: shownUnlessFalse
+	},
+	render: ErdViewer
+});
+function defineErdViewer() {
+	const defined = customElements.get(TAG_NAME);
+	if (defined === ErdViewerElement) return;
+	if (defined) throw new Error(`Another element class already defines the custom element name ${TAG_NAME}`);
+	customElements.define(TAG_NAME, ErdViewerElement);
+}
+//#endregion
+export { ErdViewerElement, defineErdViewer };

package/dist/components/erd-viewer/documentSource.d.ts

@@ -0,0 +1,26 @@
+import { ViewStatus } from '../erd-view/ErdView';
+export type DocumentSourceOptions = {
+    /** Takes the text a response carried in, throwing when it holds no document. */
+    apply: (text: string) => void;
+    /** After apply took a fetched document in. */
+    onLoad: () => void;
+    /** After a fetch, its response or apply failed, with what failed. */
+    onError: (cause: unknown) => void;
+};
+export type DocumentSource = {
+    /** What the latest fetch is doing: loading, failed, or idle once it landed or was cancelled. */
+    state: {
+        status: ViewStatus;
+    };
+    /** Fetches the url, cancelling a fetch still running, and resolves once the fetch is done with. */
+    load: (url: string) => Promise<void>;
+    /** Aborts a fetch still running, which then calls nothing back, and clears a failure reported. */
+    cancel: () => void;
+};
+/**
+ * The viewer's src: a GET of a document in the form a file saves, which the
+ * browser's CORS rules govern. The fetch started last wins, each earlier one
+ * aborted, so a slow response never lands over a later document.
+ */
+export declare function createDocumentSource({ apply, onLoad, onError, }: DocumentSourceOptions): DocumentSource;
+//# sourceMappingURL=documentSource.d.ts.map

package/dist/components/erd-viewer/documentSource.js

@@ -0,0 +1,39 @@
+import { observable } from "../../r-html/dist/observable/index.js";
+//#region src/components/erd-viewer/documentSource.ts
+function createDocumentSource({ apply, onLoad, onError }) {
+	const state = observable({ status: "idle" });
+	let controller = null;
+	const cancel = () => {
+		controller?.abort();
+		controller = null;
+		state.status = "idle";
+	};
+	const load = async (url) => {
+		cancel();
+		const current = new AbortController();
+		controller = current;
+		state.status = "loading";
+		try {
+			const response = await fetch(url, { signal: current.signal });
+			if (!response.ok) throw new Error(`GET ${url} answered ${response.status} ${response.statusText}`.trim());
+			const text = await response.text();
+			if (controller !== current) return;
+			apply(text);
+			controller = null;
+			state.status = "idle";
+			onLoad();
+		} catch (error) {
+			if (controller !== current) return;
+			controller = null;
+			state.status = "error";
+			onError(error);
+		}
+	};
+	return {
+		state,
+		load,
+		cancel
+	};
+}
+//#endregion
+export { createDocumentSource };

package/dist/components/explorer/Explorer.js

@@ -0,0 +1,40 @@
+import { onBeforeUpdate, onUpdated } from "../../r-html/dist/render/part/node/component/hooks.js";
+import { html } from "../../r-html/dist/render/index.js";
+import { useAppContext } from "../appContext.js";
+import { focusEvent } from "../../utils/internalEvents.js";
+import { layoutOf } from "../erd-editor/viewportLayout.js";
+import ExplorerPanel from "./explorer-panel/ExplorerPanel.js";
+//#region src/components/explorer/Explorer.tsx
+var Explorer = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const focus = {
+		inside: false,
+		handBack: false
+	};
+	const handleFocusin = () => {
+		focus.inside = true;
+	};
+	const handleFocusout = (event) => {
+		const panel = event.currentTarget;
+		focus.inside = panel.contains(event.relatedTarget);
+	};
+	onBeforeUpdate(() => {
+		focus.handBack = focus.inside && layoutOf(app.value.store).reach === 0;
+	});
+	onUpdated(() => {
+		if (!focus.handBack) return;
+		focus.inside = false;
+		focus.handBack = false;
+		ctx.host.dispatchEvent(focusEvent());
+	});
+	return () => {
+		const { reach } = layoutOf(app.value.store);
+		if (reach === 0) return null;
+		return html`<div class="explorer-shell" style=${{
+			display: "flex",
+			height: "100%"
+		}} @focusin=${handleFocusin} @focusout=${handleFocusout}><${ExplorerPanel} .width=${reach} .readonly=${props.readonly} /></div>`;
+	};
+};
+//#endregion
+export { Explorer as default };

package/dist/components/explorer/explorer-controller/ExplorerController.js

@@ -0,0 +1,43 @@
+import { KeyBindingName } from "../../../utils/keyboard-shortcut/index.js";
+import { onMounted } from "../../../r-html/dist/render/part/node/component/hooks.js";
+import { watch } from "../../../r-html/dist/observable/index.js";
+import { Open } from "../../../constants/open.js";
+import { isEditingText } from "../../../engine/modules/editor/state.js";
+import { toggleSearchAction } from "../../../utils/emitter.js";
+import { useAppContext } from "../../appContext.js";
+import { useUnmounted } from "../../../hooks/useUnmounted.js";
+import { isTakenOver } from "../../../utils/takeover.js";
+import { layoutOf } from "../../erd-editor/viewportLayout.js";
+import { closeExplorer, isExplorerPressed, isExplorerShown } from "../explorerCommands.js";
+import { cancelPendingSearch, focusSearch, hasSearchDialog, noteBatch, openSearch, searchIfStale } from "../explorerSearch.js";
+import { Observable, debounceTime, filter } from "rxjs";
+var ExplorerController = (_props, ctx) => {
+	const app = useAppContext(ctx);
+	const { addUnsubscribe } = useUnmounted();
+	const showSearch = () => {
+		const { store, emitter } = app.value;
+		isExplorerShown(store) ? focusSearch(store) : openSearch(store, emitter);
+	};
+	const handleShortcut = () => {
+		const { store, emitter } = app.value;
+		const { editor } = store.state;
+		if (isEditingText(editor) || isTakenOver(store.state)) return;
+		if (editor.openMap[Open.search]) emitter.emit(toggleSearchAction());
+		else if (isExplorerPressed(store) && !hasSearchDialog(store)) {
+			closeExplorer(store);
+			return;
+		}
+		showSearch();
+	};
+	onMounted(() => {
+		const { store, shortcut$, emitter } = app.value;
+		addUnsubscribe(shortcut$.pipe(filter(({ type }) => type === KeyBindingName.findReplace)).subscribe(handleShortcut), emitter.on({ openFindReplace: showSearch }), new Observable((subscriber) => store.subscribe((actions) => {
+			noteBatch(store, actions) && subscriber.next();
+		})).pipe(debounceTime(100)).subscribe(() => searchIfStale(store)), watch(layoutOf(store)).subscribe((name) => {
+			name === "reach" && searchIfStale(store);
+		}), () => cancelPendingSearch(store));
+	});
+	return () => null;
+};
+//#endregion
+export { ExplorerController as default };

package/dist/components/explorer/explorer-panel/ExplorerPanel.js

@@ -0,0 +1,207 @@
+import { KeyBindingName, isComposing, matchesShortcut, stopsAtPanel } from "../../../utils/keyboard-shortcut/index.js";
+import { onBeforeMount } from "../../../r-html/dist/render/part/node/component/hooks.js";
+import { observable, observer } from "../../../r-html/dist/observable/index.js";
+import { html } from "../../../r-html/dist/render/index.js";
+import { createRef, ref } from "../../../r-html/dist/render/directives/attribute/ref.js";
+import { isBothNameView, isLogicalNameView, toNameLabel } from "../../../engine/modules/editor/utils/nameView.js";
+import { useAppContext } from "../../appContext.js";
+import { useI18n } from "../../localeContext.js";
+import Icon from "../../primitives/icon/Icon.js";
+import { forceFocusEvent } from "../../../utils/internalEvents.js";
+import { useUnmounted } from "../../../hooks/useUnmounted.js";
+import { formatCount } from "../../../utils/formatCount.js";
+import Sash, { SashType } from "../../primitives/sash/Sash.js";
+import { flattenTree } from "../../primitives/tree/treeModel.js";
+import Tree from "../../primitives/tree/Tree.js";
+import { FindField } from "../../../utils/find-replace/findMatches.js";
+import { snippetOf } from "../../../utils/find-replace/present.js";
+import { explorerScrollOf, explorerViewOf } from "../explorerView.js";
+import { closeExplorer, setExplorerWidth } from "../explorerCommands.js";
+import { fieldIcon } from "../../erd/fieldIcon.js";
+import { activateNode } from "../explorerNavigation.js";
+import { buildExplorerTree, buildSearchTree, matchRowId, searchExpanded } from "../explorerTree.js";
+import { goToMatch, isSearching } from "../explorerSearch.js";
+import ExplorerSearch from "../explorer-search/ExplorerSearch.js";
+import { body, count, dot, header, mark, muted, name, root, rowIcon, sash, title, tool } from "./ExplorerPanel.styles.js";
+//#region src/components/explorer/explorer-panel/ExplorerPanel.tsx
+var FOLDER_LABEL = {
+	tables: "explorer.folder.tables",
+	tableGroups: "explorer.folder.tableGroups",
+	memos: "explorer.folder.memos",
+	columns: "explorer.folder.columns",
+	indexes: "explorer.folder.indexes",
+	foreignKeys: "explorer.folder.foreignKeys"
+};
+var keyClass = (primaryKey, foreignKey) => ({
+	pk: primaryKey && !foreignKey,
+	fk: foreignKey && !primaryKey,
+	pfk: primaryKey && foreignKey
+});
+function firstMatchOf(node) {
+	if (node.kind === "excerpt") return node.match;
+	return "matches" in node ? node.matches?.[0] : void 0;
+}
+var isLogicalNameMatch = ({ field }) => field === FindField.logicalName;
+function marked(text, matches = []) {
+	const found = matches.filter((match) => match.text === text);
+	if (!found.length) return text;
+	let from = 0;
+	return [...found.flatMap(({ start, end }) => {
+		const before = text.slice(from, start);
+		from = end;
+		return [before, html`<mark class=${mark}>${text.slice(start, end)}</mark>`];
+	}), text.slice(from)];
+}
+var ExplorerPanel = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const root$1 = createRef();
+	const { addUnsubscribe } = useUnmounted();
+	const model = observable({
+		roots: [],
+		branchIds: [],
+		rows: []
+	}, { shallow: true });
+	onBeforeMount(() => {
+		const { store } = app.value;
+		const view = explorerViewOf(store);
+		addUnsubscribe(observer(() => {
+			if (isSearching(store)) {
+				const tree = buildSearchTree(store.state, view.matches);
+				model.roots = tree.roots;
+				model.branchIds = tree.branchIds;
+				return;
+			}
+			model.roots = buildExplorerTree(store.state);
+			model.branchIds = [];
+		}), observer(() => {
+			model.rows = flattenTree(model.roots, isSearching(store) ? searchExpanded(model.branchIds, view.searchCollapsed) : view.expanded);
+		}));
+	});
+	const setExpanded = (id, expanded) => {
+		const { store } = app.value;
+		const view = explorerViewOf(store);
+		const searching = isSearching(store);
+		const next = { ...searching ? view.searchCollapsed : view.expanded };
+		expanded === searching ? Reflect.deleteProperty(next, id) : next[id] = true;
+		searching ? view.searchCollapsed = next : view.expanded = next;
+	};
+	const handleActivate = (row) => {
+		const { store } = app.value;
+		const node = row.node.data;
+		if (node.kind === "folder") {
+			setExpanded(row.node.id, !row.expanded);
+			return;
+		}
+		const match = firstMatchOf(node);
+		if (match && isSearching(store)) {
+			goToMatch(store, match);
+			return;
+		}
+		activateNode(store, node);
+	};
+	const handleCollapseAll = () => {
+		const { store } = app.value;
+		const view = explorerViewOf(store);
+		const searching = isSearching(store);
+		const open = model.rows.filter((row) => row.expanded);
+		const deepest = open.reduce((level, row) => Math.max(level, row.level), 0);
+		if (deepest <= 1) {
+			searching ? view.searchCollapsed = Object.fromEntries(model.branchIds.map((id) => [id, true])) : view.expanded = {};
+			return;
+		}
+		const next = { ...searching ? view.searchCollapsed : view.expanded };
+		for (const row of open) {
+			if (row.level !== deepest) continue;
+			searching ? next[row.node.id] = true : Reflect.deleteProperty(next, row.node.id);
+		}
+		searching ? view.searchCollapsed = next : view.expanded = next;
+	};
+	const handleClose = () => {
+		closeExplorer(app.value.store);
+		ctx.host.dispatchEvent(forceFocusEvent());
+	};
+	const handleKeydown = (event) => {
+		const { keyBindingMap } = app.value;
+		if (!isComposing(event) && matchesShortcut(event, keyBindingMap[KeyBindingName.stop])) {
+			event.preventDefault();
+			event.stopPropagation();
+			ctx.host.dispatchEvent(forceFocusEvent());
+			return;
+		}
+		if (stopsAtPanel(event, keyBindingMap)) event.stopPropagation();
+	};
+	const handleMove = ({ x }) => {
+		const $root = root$1.value;
+		if (!$root) return;
+		setExplorerWidth(app.value.store, x - $root.getBoundingClientRect().left);
+	};
+	const handleSashDblclick = () => {
+		setExplorerWidth(app.value.store, 260);
+	};
+	const label = (text, unnamed, matches, standIn = false) => {
+		const blank = !text.trim();
+		return html`<span class=${[name, {
+			unnamed: blank,
+			"stand-in": standIn
+		}]} title=${blank ? unnamed : text}>${blank ? unnamed : marked(text, matches)}</span>`;
+	};
+	const nameLabel = (node, unnamed, matches = []) => {
+		const { settings } = app.value.store.state;
+		const { text, after, standIn } = toNameLabel(settings, node);
+		const logicalMatches = matches.filter(isLogicalNameMatch);
+		const nameMatches = matches.filter((match) => !isLogicalNameMatch(match));
+		const leadsLogical = node.logicalName.trim() !== "" && (isLogicalNameView(settings) || isBothNameView(settings));
+		const [shownMatches, hiddenMatches] = leadsLogical ? [logicalMatches, nameMatches] : [nameMatches, logicalMatches];
+		const second = after || (!shownMatches.length && hiddenMatches.length ? leadsLogical ? node.name : node.logicalName : "");
+		return html`${label(text, unnamed, shownMatches, standIn)}${second ? html`<span class=${muted} title=${second}>${marked(second, hiddenMatches)}</span>` : null}`;
+	};
+	const renderRow = (row) => {
+		const { t } = i18n.value;
+		const unnamed = t("common.unnamed");
+		const node = row.node.data;
+		switch (node.kind) {
+			case "folder": return html`<span class=${rowIcon}>${row.expanded ? html`<${Icon} .name="folder-open" .size=${14} />` : html`<${Icon} .name="folder" .size=${14} />`}</span>${label(t(FOLDER_LABEL[node.folder]), unnamed)}<span class=${count}>${formatCount(i18n.value.locale, node.count)}</span>`;
+			case "table": return html`<span class=${rowIcon}><${Icon} .name="table-2" .size=${14} /></span>${nameLabel(node, unnamed, node.matches)}`;
+			case "groupTable": return html`<span class=${rowIcon}><${Icon} .name="table-2" .size=${14} /></span>${nameLabel(node, unnamed)}`;
+			case "column": {
+				const detail = [
+					node.dataType,
+					node.primaryKey ? "PK" : "",
+					node.foreignKey ? "FK" : ""
+				].filter(Boolean).join(" ");
+				return html`${node.primaryKey || node.foreignKey ? html`<span class=${[rowIcon, keyClass(node.primaryKey, node.foreignKey)]}><${Icon} .name="key-round" .size=${14} /></span>` : html`<span class=${rowIcon}><${Icon} .name="list" .size=${14} /></span>`}${nameLabel(node, unnamed, node.matches)}<span class=${muted} title=${detail} .dir="ltr">${detail}</span>`;
+			}
+			case "index": {
+				const detail = `${node.unique ? "UNIQUE " : ""}(${node.columns})`;
+				return html`<span class=${rowIcon}><${Icon} .name="logs" .size=${14} /></span>${label(node.name, unnamed, node.matches)}<span class=${muted} title=${detail} .dir="ltr">${detail}</span>`;
+			}
+			case "foreignKey": {
+				const parent = `→ ${node.parent || unnamed}(${node.parentColumns})`;
+				return html`<span class=${[rowIcon, keyClass(node.identification, true)]}><${Icon} .name="key-round" .size=${14} /></span><span class=${name} title=${`${node.columns} ${parent}`} .dir="ltr">${node.columns}</span><span class=${muted} title=${parent} .dir="ltr">${parent}</span>`;
+			}
+			case "tableGroup": return html`<span class=${dot} style=${node.color ? { "background-color": node.color } : {}}></span>${label(node.name, unnamed, node.matches)}`;
+			case "memo": return html`<span class=${rowIcon}><${Icon} .name="sticky-note" .size=${14} /></span>${label(node.text, unnamed)}`;
+			case "excerpt": {
+				const snippet = snippetOf(node.match);
+				return html`<span class=${rowIcon}>${fieldIcon(node.match.field)}</span><span class=${name} title=${node.match.text} .dir="auto">${snippet.text.slice(0, snippet.start)}<mark class=${mark}>${snippet.text.slice(snippet.start, snippet.end)}</mark>${snippet.text.slice(snippet.end)}</span>`;
+			}
+		}
+	};
+	return () => {
+		const { store } = app.value;
+		const { t, dir } = i18n.value;
+		const view = explorerViewOf(store);
+		const scroll = explorerScrollOf(store);
+		const close = t("common.close");
+		const current = isSearching(store) ? view.matches[view.current] : void 0;
+		const currentId = current ? matchRowId(current) : null;
+		return html`<div class=${["explorer", root]} ${ref(root$1)} .dir=${dir} style=${{ width: `${props.width}px` }} @keydown=${handleKeydown}><div class=${header}><div class=${title}>${t("explorer.title")}</div><button class=${["explorer-collapse-all", tool]} type="button" title=${t("explorer.collapseAll")} aria-label=${t("explorer.collapseAll")} @click=${handleCollapseAll}><${Icon} .name="chevrons-down-up" .size=${14} /></button><button class=${["explorer-close", tool]} type="button" aria-label=${close} title=${close} @click=${handleClose}><${Icon} .name="x" .size=${14} /></button></div><${ExplorerSearch} .readonly=${props.readonly} /><div class=${body}><${Tree} .rows=${model.rows} .activeId=${view.activeId} .currentId=${currentId} .revealId=${currentId} .label=${t("explorer.title")} .dir=${dir} .getScrollTop=${() => scroll.top} .onScroll=${(top) => {
+			scroll.top = top;
+		}} .onToggle=${setExpanded} .onActivate=${handleActivate} .onActiveChange=${(id) => {
+			view.activeId = id;
+		}} .renderRow=${renderRow} /></div><div class=${["explorer-sash", sash]}><${Sash} .type=${SashType.vertical} .onMove=${handleMove} .onDblclick=${handleSashDblclick} /></div></div>`;
+	};
+};
+//#endregion
+export { ExplorerPanel as default };