@dineug/erd-editor 4.2.0 → 5.0.1

package/dist/components/erd-editor/ErdEditor.d.ts

@@ -1,3 +1,4 @@
+import { CustomElementClass } from '../customElementClass';
 import { DatabaseVendor } from '../../constants/sql/database';
 import { SharedStore, SharedStoreConfig } from '../../engine/shared-store';
 import { LocaleOption } from '../../i18n/locales';
@@ -83,9 +84,9 @@ export interface ErdEditorElement extends ErdEditorProps, HTMLElement {
     setSchemaAML: SetSchema;
     setSchemaJSON: (value: string, options?: SchemaJSONImportOptions) => void;
     /**
-     * The document's DDL: the vendor given or the document's own, created as
-     * the options ask, a choice the vendor lacks falling back as the Schema SQL
-     * tab does; the document's before and after scripts are always in it.
+     * The DDL in the vendor given, else the database this editor shows, in the
+     * bracket it shows, as the options ask, a choice the vendor lacks falling
+     * back as the Schema SQL tab does; the before and after scripts are in it.
      */
     getSchemaSQL: (databaseVendor?: DatabaseVendor, options?: SchemaSQLOptions) => string;
     getSharedStore: (config?: SharedStoreConfig & {
@@ -94,4 +95,14 @@ export interface ErdEditorElement extends ErdEditorProps, HTMLElement {
     }) => SharedStore;
     setDiffValue: (value: string) => void;
 }
+/**
+ * The element class, which nothing registers until defineErdEditor() runs or
+ * a caller defines it under a tag of its own.
+ */
+export declare const ErdEditorElement: CustomElementClass<ErdEditorElement>;
+/**
+ * Defines erd-editor as ErdEditorElement. A second call leaves the definition
+ * as it is, and a tag another class already holds throws, naming the tag.
+ */
+export declare function defineErdEditor(): void;
 //# sourceMappingURL=ErdEditor.d.ts.map

package/dist/components/erd-editor/ErdEditor.js

@@ -0,0 +1,188 @@
+import { CanvasType } from "../../constants/schema.js";
+import { onMounted } from "../../r-html/dist/render/part/node/component/hooks.js";
+import { observable, 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 } from "../../r-html/dist/render/index.js";
+import { createRef, ref } from "../../r-html/dist/render/directives/attribute/ref.js";
+import { cache } from "../../r-html/dist/render/directives/node/cache.js";
+import { createCustomElement } from "../../r-html/dist/render/part/node/component/webComponent/index.js";
+import { Open } from "../../constants/open.js";
+import { changeOpenMapAction, changeViewportAction } from "../../engine/modules/editor/atom.actions.js";
+import { copyAction, pasteAction } from "../../utils/emitter.js";
+import { appContext, createAppContext } from "../appContext.js";
+import { localeContext } from "../localeContext.js";
+import { isMiddleButtonPress } from "../../utils/domEvent.js";
+import { themeContext } from "../themeContext.js";
+import { focusEvent, forceFocusEvent } from "../../utils/internalEvents.js";
+import { middlePanPress$ } from "../../utils/globalEventObservable.js";
+import { useUnmounted } from "../../hooks/useUnmounted.js";
+import { dropRelationshipHighlight } from "../erd/relationshipHighlight.js";
+import Dictionary from "../dictionary/Dictionary.js";
+import { hasToolbar, measureRoot, observeViewport } from "./viewportLayout.js";
+import GeneratorCode from "../generator-code/GeneratorCode.js";
+import SchemaSQL from "../schema-sql/SchemaSQL.js";
+import Erd from "../erd/Erd.js";
+import Explorer from "../explorer/Explorer.js";
+import ExplorerController from "../explorer/explorer-controller/ExplorerController.js";
+import ExportImage from "../export-image/ExportImage.js";
+import GlobalStyles from "../global-styles/GlobalStyles.js";
+import LocalePicker from "../locale-picker/LocalePicker.js";
+import MapColumnsDialog from "../map-columns/MapColumnsDialog.js";
+import ThemeBuilder from "../theme-builder/ThemeBuilder.js";
+import { createScopeActions } from "../quick-search/actions.js";
+import QuickSearch from "../quick-search/QuickSearch.js";
+import Settings from "../settings/Settings.js";
+import Theme from "../theme/Theme.js";
+import ToastContainer from "../toast-container/ToastContainer.js";
+import Toolbar from "../toolbar/Toolbar.js";
+import Visualization from "../visualization/Visualization.js";
+import { useKeyBindingMap } from "../../hooks/useKeyBindingMap.js";
+import { observeThemeOverrides, resolveHostTheme } from "../../konva/theme.js";
+import { createText } from "../../utils/text.js";
+import { erdRow, erdScope, root, scope } from "./ErdEditor.styles.js";
+import { useErdEditorAttachElement } from "./useErdEditorAttachElement.js";
+import { fromEvent, throttleTime } from "rxjs";
+//#region src/components/erd-editor/ErdEditor.tsx
+var ErdEditor = (props, ctx) => {
+	const text = createText();
+	const getReadonly = () => props.readonly;
+	const appContextValue = createAppContext({ toWidth: text.toWidth }, {
+		getReadonly,
+		readonlyEditState: true
+	});
+	appContextValue.store.dispatchSync(changeViewportAction({
+		width: 0,
+		height: 0
+	}));
+	const provider = useProvider(ctx, appContext, appContextValue);
+	const root$1 = createRef();
+	useKeyBindingMap(ctx, root$1);
+	const { theme, themeState, i18n, resolveLocaleOption, resolveSystemLocale, destroySet, hasDarkMode } = useErdEditorAttachElement({
+		props,
+		ctx,
+		app: appContextValue,
+		root: root$1
+	});
+	const sceneTheme = observable({ ...theme }, { shallow: true });
+	const themeProvider = useProvider(ctx, themeContext, sceneTheme);
+	const localeProvider = useProvider(ctx, localeContext, i18n);
+	const { store, keydown$, emitter } = appContextValue;
+	const { addUnsubscribe } = useUnmounted();
+	const resolveSceneTheme = () => {
+		Object.assign(sceneTheme, resolveHostTheme(ctx, theme));
+	};
+	const scheduleSceneTheme = () => {
+		nextTick(resolveSceneTheme);
+	};
+	const state = observable({
+		isFocus: false,
+		mouseTracking: false
+	});
+	destroySet.add(provider.destroy);
+	destroySet.add(observeViewport(store));
+	destroySet.add(() => dropRelationshipHighlight(store.state.editor.id));
+	destroySet.add(themeProvider.destroy);
+	destroySet.add(localeProvider.destroy);
+	destroySet.add(watch(theme).subscribe(scheduleSceneTheme));
+	destroySet.add(emitter.on({
+		mouseTrackerStart: () => {
+			state.mouseTracking = true;
+		},
+		mouseTrackerEnd: () => {
+			state.mouseTracking = false;
+		}
+	}));
+	const checkAndFocus = () => {
+		setTimeout(() => {
+			if (document.activeElement !== ctx) ctx.focus();
+		}, 1);
+	};
+	const handleKeydown = (event) => {
+		keydown$.next(event);
+	};
+	let currentFocus = false;
+	let timerId = -1;
+	const handleFocus = () => {
+		currentFocus = true;
+		state.isFocus = true;
+	};
+	const handleFocusout = () => {
+		currentFocus = false;
+		clearTimeout(timerId);
+		timerId = setTimeout(() => {
+			state.isFocus = currentFocus;
+		}, 10);
+	};
+	const handleCopy = (event) => {
+		emitter.emit(copyAction({ event }));
+	};
+	const handlePaste = (event) => {
+		emitter.emit(pasteAction({ event }));
+	};
+	onMounted(() => {
+		ctx.focus();
+		resolveSceneTheme();
+		addUnsubscribe(observeThemeOverrides(ctx, scheduleSceneTheme));
+		const $root = root$1.value;
+		const resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const { width, height } = entry.contentRect;
+				measureRoot(store, {
+					width,
+					height
+				});
+			}
+		});
+		resizeObserver.observe($root);
+		addUnsubscribe(() => {
+			resizeObserver.unobserve($root);
+			resizeObserver.disconnect();
+		}, fromEvent(ctx, focusEvent.type).pipe(throttleTime(50, void 0, {
+			leading: true,
+			trailing: true
+		})).subscribe(checkAndFocus), fromEvent(ctx, forceFocusEvent.type).subscribe(ctx.focus), middlePanPress$($root).subscribe(handlePress));
+	});
+	const handlePress = (event) => {
+		if (isMiddleButtonPress(event)) checkAndFocus();
+		const el = event.target;
+		if (!el) return;
+		if (el.closest(".toolbar")) return;
+		const { store } = appContextValue;
+		const { openMap } = store.state.editor;
+		if (openMap[Open.themeBuilder] && !el.closest(".theme-builder")) store.dispatch(changeOpenMapAction({ [Open.themeBuilder]: false }));
+		if (openMap[Open.localePicker] && !el.closest(".locale-picker")) store.dispatch(changeOpenMapAction({ [Open.localePicker]: false }));
+	};
+	return () => {
+		const { settings } = store.state;
+		const isDarkMode = hasDarkMode();
+		return html`<${GlobalStyles} /><${Theme} .theme=${theme} /><div ${ref(root$1)} class=${[
+			"root",
+			root,
+			{
+				dark: isDarkMode,
+				"none-focus": !state.isFocus
+			}
+		]} .lang=${i18n.locale} .dir=${i18n.dir} tabindex="-1" @keydown=${handleKeydown} @focus=${handleFocus} @focusin=${handleFocus} @focusout=${handleFocusout} @copy=${handleCopy} @paste=${handlePaste} @mousedown=${handlePress}>${hasToolbar(store.state) ? html`<${Toolbar} .enableThemeBuilder=${props.enableThemeBuilder} .enableLocalePicker=${props.enableLocalePicker} .readonly=${props.readonly} />` : null}${cache(settings.canvasType === CanvasType.ERD ? html`<div class=${erdRow} .dir="ltr"><${Explorer} .readonly=${props.readonly} /><div class=${erdScope} .dir=${i18n.dir}><${Erd} .isDarkMode=${isDarkMode} .mouseTracking=${state.mouseTracking} .readonly=${props.readonly} .enableWelcomeScreen=${props.enableWelcomeScreen} .enableThemeBuilder=${props.enableThemeBuilder} .enableLocalePicker=${props.enableLocalePicker} /></div></div>` : null)}${settings.canvasType === CanvasType.visualization ? html`<div class=${scope}><${Visualization} /></div>` : settings.canvasType === CanvasType.schemaSQL ? html`<div class=${scope}><${SchemaSQL} .isDarkMode=${isDarkMode} .readonly=${props.readonly} /></div>` : settings.canvasType === CanvasType.generatorCode ? html`<div class=${scope}><${GeneratorCode} .isDarkMode=${isDarkMode} .readonly=${props.readonly} /></div>` : settings.canvasType === CanvasType.dictionary ? html`<div class=${scope}><${Dictionary} .readonly=${props.readonly} /></div>` : settings.canvasType === CanvasType.settings ? html`<div class=${scope}><${Settings} /></div>` : null}<${ToastContainer} />${props.enableThemeBuilder ? html`<${ThemeBuilder} .theme=${themeState.options} />` : null}${props.enableLocalePicker ? html`<${LocalePicker} .option=${resolveLocaleOption()} .systemLocale=${resolveSystemLocale()} />` : null}<${ExportImage} .themeOptions=${themeState.options} .isDarkMode=${isDarkMode} /><${MapColumnsDialog} .readonly=${props.readonly} .isDarkMode=${isDarkMode} /><${ExplorerController} /><${QuickSearch} .topLevel=${createScopeActions} .readonly=${props.readonly} .appearance=${props.enableThemeBuilder ? themeState.options.appearance : void 0} .locale=${props.enableLocalePicker ? resolveLocaleOption() : void 0} />${text.span}</div>`;
+	};
+};
+var TAG_NAME = "erd-editor";
+var ErdEditorElement = /* @__PURE__ */ createCustomElement({
+	shadow: "closed",
+	observedProps: {
+		readonly: Boolean,
+		systemDarkMode: Boolean,
+		enableThemeBuilder: Boolean,
+		enableLocalePicker: Boolean,
+		enableWelcomeScreen: Boolean
+	},
+	render: ErdEditor
+});
+function defineErdEditor() {
+	const defined = customElements.get(TAG_NAME);
+	if (defined === ErdEditorElement) return;
+	if (defined) throw new Error(`Another element class already defines the custom element name ${TAG_NAME}`);
+	customElements.define(TAG_NAME, ErdEditorElement);
+}
+//#endregion
+export { ErdEditorElement, defineErdEditor };

package/dist/components/erd-editor/ErdEditor.styles.js

@@ -0,0 +1,47 @@
+import { css } from "../../r-html/dist/template/css.js";
+//#region src/components/erd-editor/ErdEditor.styles.ts
+var container = css`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+`;
+var root = css`
+  ${container};
+  background-color: var(--canvas-boundary-background);
+  outline: none;
+
+  &.none-focus {
+    div[data-focus-border] {
+      border-color: var(--placeholder) !important;
+    }
+
+    div[data-focus-border-bottom] {
+      border-bottom-color: var(--placeholder) !important;
+    }
+
+    input[data-focus-border-bottom] {
+      border-bottom-color: var(--placeholder) !important;
+    }
+  }
+`;
+var scope = css`
+  ${container};
+`;
+var erdRow = css`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+`;
+var erdScope = css`
+  ${container};
+  flex: 1 1 0;
+  min-width: 0;
+`;
+//#endregion
+export { erdRow, erdScope, root, scope };

package/dist/components/erd-editor/useErdEditorAttachElement.d.ts

@@ -1,10 +1,7 @@
 import { Ref } from '@dineug/r-html';
 import { AppContext } from '../appContext';
-import { LocaleCode, LocaleOption } from '../../i18n/locales';
-import { I18n } from '../../i18n/translate';
+import { LocaleOption } from '../../i18n/locales';
 import { Unsubscribe } from '../../internal-types';
-import { Appearance, ThemeOptions } from '../../themes/radix-ui-theme';
-import { Theme } from '../../themes/tokens';
 import { ErdEditorElement, ErdEditorProps } from './ErdEditor';
 type Props = {
     props: ErdEditorProps;
@@ -13,23 +10,12 @@ type Props = {
     root: Ref<HTMLDivElement>;
 };
 export declare function useErdEditorAttachElement({ props, ctx, app, root }: Props): {
-    theme: Theme;
-    themeState: {
-        options: ThemeOptions;
-        /** What system shows once a host names it; null follows the OS color scheme. */
-        systemAppearance: Appearance | null;
-        preset: Theme;
-        custom: Partial<Theme>;
-    };
-    i18n: I18n;
-    localeState: {
-        /** The option a host or a pick last set; null until either sets one. */
-        option: LocaleOption | null;
-        /** What system means once a host names its own language; null reads the browser's. */
-        systemTag: string | null;
-    };
+    theme: import('../../themes/tokens').Theme;
+    themeState: import('../element-host/themeHost').ThemeState;
+    i18n: import('../../i18n/translate').I18n;
+    localeState: import('../element-host/localeHost').LocaleState;
     resolveLocaleOption: () => LocaleOption;
-    resolveSystemLocale: () => LocaleCode;
+    resolveSystemLocale: () => import('../../i18n/locales').LocaleCode;
     destroySet: Set<Unsubscribe>;
     hasDarkMode: () => boolean;
 };

package/dist/components/erd-editor/useErdEditorAttachElement.js

@@ -0,0 +1,284 @@
+import { KeyBindingName, KeyBindingNameList } from "../../utils/keyboard-shortcut/index.js";
+import { DatabaseVendorToDatabase } from "../../constants/sql/database.js";
+import { arrayHas } from "../../utils/arrayHas.js";
+import { hasDatabaseVendor, toSafeString } from "../../utils/validation.js";
+import { onMounted } from "../../r-html/dist/render/part/node/component/hooks.js";
+import { watch } from "../../r-html/dist/observable/index.js";
+import { SHARED_DRAG_SELECT_TRACKER_TIMEOUT, SHARED_FOCUS_TRACKER_TIMEOUT, changeHandToolAction, changeOpenMapAction, clearAction, dragendColumnAction, drawEndRelationshipAction, editMemoEndAction, editTableEndAction, editTableGroupEndAction, getLWWAction, sharedDragSelectTrackerAction, sharedFocusTrackerAction, sharedSelectionTrackerAction } from "../../engine/modules/editor/atom.actions.js";
+import { initialLoadJsonAction$, loadJsonAction$, unselectAllAction$ } from "../../engine/modules/editor/generator.actions.js";
+import { restoreScreenSettingsAction$ } from "../../engine/modules/settings/generator.actions.js";
+import { EDIT_OPEN_KEYS } from "../../engine/actions.js";
+import { cancelElkPlacementAction, closeColorPickerAction, dragendColumnAllAction, duplicateDragCancelAction, mouseTrackerEndAction, mouseTrackerStartAction, openDiffViewerAction } from "../../utils/emitter.js";
+import { appDestroy } from "../appContext.js";
+import { SYSTEM_LOCALE } from "../../i18n/locales.js";
+import { useUnmounted } from "../../hooks/useUnmounted.js";
+import { SYSTEM_APPEARANCE } from "../../themes/radix-ui-theme.js";
+import { toSharedFocus, toSharedFocusKey } from "../../utils/focus.js";
+import { appendSchema, appendSchemaJSON, appendSchemaPlaced, importSchema, importSchemaPlaced } from "../../utils/file/importSchema.js";
+import { createSchemaSQL } from "../../utils/schema-sql/index.js";
+import { documentJsonOf, runtimeJsonOf } from "../../engine/documentJson.js";
+import { useLocaleHost } from "../element-host/localeHost.js";
+import { useThemeHost } from "../element-host/themeHost.js";
+import { createSharedStore } from "../../engine/shared-store.js";
+import { useNavigatorLanguages } from "../../hooks/useNavigatorLanguages.js";
+import { messagesOf } from "../../i18n/messages/index.js";
+import { toLoadValue } from "../../utils/loadValue.js";
+import { cloneDeep } from "es-toolkit";
+import { get, isEmpty } from "es-toolkit/compat";
+//#region src/components/erd-editor/useErdEditorAttachElement.ts
+var hasOmitKeyBindingName = arrayHas([
+	KeyBindingName.edit,
+	KeyBindingName.stop,
+	KeyBindingName.undo,
+	KeyBindingName.redo,
+	KeyBindingName.zoomIn,
+	KeyBindingName.zoomOut,
+	KeyBindingName.zoomReset
+]);
+var ExternalKeyBindingNameList = KeyBindingNameList.filter((key) => !hasOmitKeyBindingName(key));
+var CLOSED_EDIT_DIALOGS = Object.fromEntries(EDIT_OPEN_KEYS.map((key) => [key, false]));
+function useErdEditorAttachElement({ props, ctx, app, root }) {
+	const { store, keyBindingMap, emitter, shortcut$, keydown$ } = app;
+	const getReadonly = () => props.readonly;
+	const themeHost = useThemeHost();
+	const { themeState, resolveAppearance, followsSystem } = themeHost;
+	const navigatorLanguages = useNavigatorLanguages();
+	const { addUnsubscribe } = useUnmounted();
+	const localeHost = useLocaleHost({
+		messagesOf,
+		languages: navigatorLanguages,
+		fallbackOption: () => props.enableLocalePicker ? SYSTEM_LOCALE : "en"
+	});
+	const { localeState, applyLocale } = localeHost;
+	const sharedStoreSet = /* @__PURE__ */ new Set();
+	let presenceTrackerUnsubscribe = null;
+	let presenceTrackerIntervalId = -1;
+	let dragSelectTrackerIntervalId = -1;
+	let sharedFocusKey = "";
+	let sharedSelectionKey = "";
+	let sharedDragSelectKey = "";
+	const broadcastSharedFocus = (force) => {
+		const focus = toSharedFocus(store.state.editor.focusTable);
+		const key = toSharedFocusKey(focus);
+		if (key === sharedFocusKey && !force) return;
+		sharedFocusKey = key;
+		store.dispatch(sharedFocusTrackerAction({ focus }));
+	};
+	const broadcastSharedSelection = (force) => {
+		const selectedIds = Object.keys(store.state.editor.selectedMap).sort();
+		const key = selectedIds.length ? JSON.stringify(selectedIds) : "";
+		if (key === sharedSelectionKey && !force) return;
+		sharedSelectionKey = key;
+		store.dispatch(sharedSelectionTrackerAction({ selectedIds }));
+	};
+	const broadcastSharedDragSelect = (force) => {
+		const rect = store.state.editor.dragSelect;
+		const key = rect ? JSON.stringify([
+			rect.x,
+			rect.y,
+			rect.w,
+			rect.h
+		]) : "";
+		if (key === sharedDragSelectKey && !force) return;
+		sharedDragSelectKey = key;
+		store.dispatch(sharedDragSelectTrackerAction({ rect: rect ? { ...rect } : null }));
+	};
+	const presenceTrackerEnd = () => {
+		presenceTrackerUnsubscribe?.();
+		presenceTrackerUnsubscribe = null;
+		clearInterval(presenceTrackerIntervalId);
+		presenceTrackerIntervalId = -1;
+		clearInterval(dragSelectTrackerIntervalId);
+		dragSelectTrackerIntervalId = -1;
+	};
+	const presenceTrackerStart = () => {
+		presenceTrackerEnd();
+		sharedFocusKey = "";
+		sharedSelectionKey = "";
+		sharedDragSelectKey = "";
+		presenceTrackerUnsubscribe = store.subscribe((actions) => {
+			const force = actions.some((action) => action.type === getLWWAction.type);
+			broadcastSharedFocus(force);
+			broadcastSharedSelection(force);
+			broadcastSharedDragSelect(force);
+		});
+		presenceTrackerIntervalId = setInterval(() => {
+			sharedFocusKey && broadcastSharedFocus(true);
+			sharedSelectionKey && broadcastSharedSelection(true);
+		}, SHARED_FOCUS_TRACKER_TIMEOUT / 3);
+		dragSelectTrackerIntervalId = setInterval(() => {
+			sharedDragSelectKey && broadcastSharedDragSelect(true);
+		}, SHARED_DRAG_SELECT_TRACKER_TIMEOUT / 3);
+		broadcastSharedFocus(false);
+		broadcastSharedSelection(false);
+		broadcastSharedDragSelect(false);
+	};
+	const emitChange = () => {
+		getReadonly() || ctx.dispatchEvent(new CustomEvent("change"));
+	};
+	const closeEditState = () => {
+		store.dispatchSync(editTableEndAction(), editMemoEndAction(), editTableGroupEndAction(), drawEndRelationshipAction(), dragendColumnAction(), unselectAllAction$(), changeHandToolAction({ value: false }), changeOpenMapAction(CLOSED_EDIT_DIALOGS));
+		emitter.emit(closeColorPickerAction());
+		emitter.emit(dragendColumnAllAction());
+		emitter.emit(duplicateDragCancelAction());
+		emitter.emit(cancelElkPlacementAction());
+	};
+	const restoreScreen = () => {
+		store.dispatchSync(restoreScreenSettingsAction$());
+	};
+	const sendHeldStreams = () => {
+		sharedStoreSet.forEach((sharedStore) => sharedStore.flushStreamBuffers());
+	};
+	const destroySet = /* @__PURE__ */ new Set([
+		watch(props).subscribe((propName) => {
+			if (propName === "readonly") {
+				if (props.readonly) {
+					sendHeldStreams();
+					closeEditState();
+				} else restoreScreen();
+				return;
+			}
+			if (propName === "enableLocalePicker") {
+				applyLocale();
+				return;
+			}
+			if (propName !== "systemDarkMode") return;
+			if (props.systemDarkMode) themeState.options.appearance = SYSTEM_APPEARANCE;
+			else if (followsSystem()) themeState.options.appearance = resolveAppearance();
+		}),
+		themeHost.destroy,
+		localeHost.destroy
+	]);
+	let firstMount = true;
+	onMounted(() => {
+		if (firstMount && props.readonly) closeEditState();
+		firstMount = false;
+		addUnsubscribe(store.change$.subscribe(emitChange), emitter.on({
+			setThemeOptions: ({ payload }) => {
+				ctx.setPresetTheme(payload);
+				ctx.dispatchEvent(new CustomEvent("changePresetTheme", { detail: cloneDeep(themeState.options) }));
+			},
+			setLocaleOption: ({ payload }) => {
+				ctx.setLocale(payload.locale);
+				if (localeState.option !== payload.locale) return;
+				ctx.dispatchEvent(new CustomEvent("changeLocale", { detail: { locale: payload.locale } }));
+			}
+		}));
+	});
+	Object.defineProperties(ctx, {
+		focus: {
+			configurable: true,
+			enumerable: true,
+			writable: true,
+			value: () => {
+				root.value?.focus();
+			}
+		},
+		blur: {
+			configurable: true,
+			enumerable: true,
+			writable: true,
+			value: () => {
+				ctx.focus();
+				root.value?.blur();
+			}
+		}
+	});
+	ctx.clear = () => {
+		store.dispatchSync(clearAction());
+	};
+	ctx.destroy = () => {
+		appDestroy(app);
+		Array.from(destroySet).forEach((destroy) => destroy());
+		Array.from(sharedStoreSet).forEach((sharedStore) => sharedStore.destroy());
+		destroySet.clear();
+		sharedStoreSet.clear();
+	};
+	ctx.setInitialValue = (value) => {
+		store.dispatchSync(initialLoadJsonAction$(toLoadValue(value)));
+		store.resetHistory();
+	};
+	ctx.setPresetTheme = themeHost.setPresetTheme;
+	ctx.setSystemAppearance = themeHost.setSystemAppearance;
+	ctx.setLocale = localeHost.setLocale;
+	ctx.setSystemLocale = localeHost.setSystemLocale;
+	ctx.setTheme = themeHost.setTheme;
+	ctx.setKeyBindingMap = (newKeyBindingMap) => {
+		ExternalKeyBindingNameList.forEach((key) => {
+			const value = get(newKeyBindingMap, key);
+			Array.isArray(value) && Reflect.set(keyBindingMap, key, value);
+		});
+	};
+	const setSchema = (type) => ((value, options) => {
+		const safeValue = toSafeString(value);
+		const append = options?.mode === "append";
+		if (options?.placement !== "auto") {
+			if (isEmpty(safeValue)) return;
+			if (!append) importSchema(app, type, safeValue);
+			else if (!getReadonly()) appendSchema(app, type, safeValue);
+			return;
+		}
+		if (isEmpty(safeValue)) return Promise.resolve();
+		return append ? appendSchemaPlaced(app, type, safeValue) : importSchemaPlaced(app, type, safeValue);
+	});
+	ctx.setSchemaSQL = setSchema("sql");
+	ctx.setSchemaGraphQL = setSchema("graphql");
+	ctx.setSchemaDBML = setSchema("dbml");
+	ctx.setSchemaAML = setSchema("aml");
+	ctx.setSchemaJSON = (value, options) => {
+		const safeValue = toSafeString(value);
+		if (isEmpty(safeValue)) return;
+		if (options?.mode !== "append") store.dispatchSync(loadJsonAction$(safeValue));
+		else if (!getReadonly()) appendSchemaJSON(app, safeValue);
+	};
+	ctx.getSchemaSQL = (databaseVendor, options) => {
+		const database = hasDatabaseVendor(databaseVendor ?? "") ? get(DatabaseVendorToDatabase, databaseVendor ?? "") : void 0;
+		return createSchemaSQL(store.state, database, void 0, {
+			statements: options?.statements,
+			header: options?.header,
+			logicalNameAsComment: options?.logicalNameAsComment
+		});
+	};
+	ctx.getSharedStore = (config) => {
+		const mouseTracker = config?.mouseTracker ?? true;
+		const focusTracker = config?.focusTracker ?? true;
+		const sharedStore = createSharedStore(store, config);
+		const facade = Object.freeze({
+			...sharedStore,
+			destroy: () => {
+				sharedStore.destroy();
+				sharedStoreSet.delete(facade);
+				if (sharedStoreSet.size === 0) {
+					emitter.emit(mouseTrackerEndAction());
+					presenceTrackerEnd();
+				}
+			}
+		});
+		sharedStoreSet.add(facade);
+		if (mouseTracker) emitter.emit(mouseTrackerStartAction());
+		if (focusTracker) presenceTrackerStart();
+		return facade;
+	};
+	ctx.setDiffValue = (value) => {
+		emitter.emit(openDiffViewerAction({ value: toLoadValue(value) }));
+	};
+	Object.defineProperty(ctx, "value", {
+		get: () => documentJsonOf(store),
+		set: (value) => {
+			store.dispatchSync(loadJsonAction$(toLoadValue(value)));
+		}
+	});
+	Object.defineProperty(ctx, "runtimeValue", { get: () => runtimeJsonOf(store) });
+	return {
+		theme: themeHost.theme,
+		themeState,
+		i18n: localeHost.i18n,
+		localeState,
+		resolveLocaleOption: localeHost.resolveLocaleOption,
+		resolveSystemLocale: localeHost.resolveSystemLocale,
+		destroySet,
+		hasDarkMode: themeHost.hasDarkMode
+	};
+}
+//#endregion
+export { useErdEditorAttachElement };