@dineug/erd-editor 4.1.0 → 5.0.0

package/dist/components/locale-picker/LocalePicker.js

@@ -0,0 +1,129 @@
+import { KeyBindingName, KeyBindingNameList, PANEL_PASSING_BINDINGS, isComposing, matchesShortcut, toShortcutTitle } from "../../utils/keyboard-shortcut/index.js";
+import { onMounted } from "../../r-html/dist/render/part/node/component/hooks.js";
+import { observable } from "../../r-html/dist/observable/index.js";
+import { nextTick } from "../../r-html/dist/observable/scheduler.js";
+import { html } from "../../r-html/dist/render/index.js";
+import { createRef, ref } from "../../r-html/dist/render/directives/attribute/ref.js";
+import { Open } from "../../constants/open.js";
+import { hasMoveKeys } from "../../engine/modules/editor/state.js";
+import { changeOpenMapAction } from "../../engine/modules/editor/atom.actions.js";
+import { setLocaleOptionAction } from "../../utils/emitter.js";
+import { useAppContext } from "../appContext.js";
+import { LOCALES, LocaleCodeList, SYSTEM_LOCALE, localeInfoOf } from "../../i18n/locales.js";
+import { useI18n } from "../localeContext.js";
+import Icon from "../primitives/icon/Icon.js";
+import { focusEvent } from "../../utils/internalEvents.js";
+import { useUnmounted } from "../../hooks/useUnmounted.js";
+import { insetPastExplorer } from "../erd-editor/viewportLayout.js";
+import Separator from "../primitives/separator/Separator.js";
+import { check, close, header, hint, label, list, option, pinned, root, title } from "./LocalePicker.styles.js";
+import { filter } from "rxjs";
+//#region src/components/locale-picker/LocalePicker.tsx
+var OPTIONS = [SYSTEM_LOCALE, ...LocaleCodeList];
+function stepOption(index, length, key) {
+	switch (key) {
+		case "ArrowDown": return (index + 1) % length;
+		case "ArrowUp": return (index - 1 + length) % length;
+		case "Home": return 0;
+		case "End": return length - 1;
+		default: return null;
+	}
+}
+var hasModifier = (event) => event.altKey || event.ctrlKey || event.metaKey;
+var LocalePicker = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const list$1 = createRef();
+	const { addUnsubscribe } = useUnmounted();
+	const state = observable({ active: 0 });
+	const isOpen = () => {
+		const { store } = app.value;
+		return Boolean(store.state.editor.openMap[Open.localePicker]);
+	};
+	const rows = () => Array.from(list$1.value?.querySelectorAll("[role=\"option\"]") ?? []);
+	const focusChecked = () => {
+		const row = list$1.value?.querySelector("[aria-selected=\"true\"]");
+		row?.focus({ preventScroll: true });
+		row?.scrollIntoView({ block: "nearest" });
+	};
+	const open = () => {
+		const { store } = app.value;
+		state.active = Math.max(0, OPTIONS.indexOf(props.option));
+		store.dispatchSync(changeOpenMapAction({
+			[Open.localePicker]: true,
+			[Open.themeBuilder]: false,
+			[Open.tableProperties]: false
+		}));
+		nextTick(focusChecked);
+	};
+	const close$1 = () => {
+		const { store } = app.value;
+		store.dispatch(changeOpenMapAction({ [Open.localePicker]: false }));
+		nextTick(() => {
+			ctx.host.dispatchEvent(focusEvent());
+		});
+	};
+	const handleToggle = () => {
+		isOpen() ? close$1() : open();
+	};
+	const handleStop = () => {
+		if (isOpen()) close$1();
+	};
+	const pick = (locale) => {
+		const { emitter } = app.value;
+		emitter.emit(setLocaleOptionAction({ locale }));
+		close$1();
+	};
+	const handleKeydown = (event) => {
+		const { keyBindingMap } = app.value;
+		const matches = (name) => matchesShortcut(event, keyBindingMap[name]);
+		if (isComposing(event)) {
+			event.stopPropagation();
+			return;
+		}
+		if (matches(KeyBindingName.stop)) {
+			event.preventDefault();
+			event.stopPropagation();
+			close$1();
+			return;
+		}
+		const options = rows();
+		const index = options.indexOf(event.target);
+		if (index !== -1 && !hasModifier(event)) {
+			const next = stepOption(index, options.length, event.key);
+			if (next !== null) {
+				event.preventDefault();
+				event.stopPropagation();
+				options[next].focus();
+				return;
+			}
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				event.stopPropagation();
+				pick(OPTIONS[index]);
+				return;
+			}
+		}
+		if (!PANEL_PASSING_BINDINGS.some(matches) && (hasMoveKeys(event.key) || KeyBindingNameList.some(matches))) event.stopPropagation();
+	};
+	onMounted(() => {
+		const { shortcut$, emitter } = app.value;
+		addUnsubscribe(shortcut$.pipe(filter(({ type }) => type === KeyBindingName.stop)).subscribe(handleStop), emitter.on({ openLocalePicker: handleToggle }));
+	});
+	const renderOption = (option$1, content) => {
+		const index = OPTIONS.indexOf(option$1);
+		const checked = option$1 === props.option;
+		return html`<button class=${option} type="button" role="option" aria-selected=${String(checked)} data-locale=${option$1} tabindex=${index === state.active ? 0 : -1} @click=${() => pick(option$1)} @focus=${() => {
+			state.active = index;
+		}}><span class=${check}>${checked ? html`<${Icon} .name="check" .size=${14} />` : null}</span>${content}</button>`;
+	};
+	return () => {
+		if (!isOpen()) return null;
+		const { t } = i18n.value;
+		const { keyBindingMap } = app.value;
+		const system = localeInfoOf(props.systemLocale);
+		return html`<div class=${["locale-picker", root]} style=${insetPastExplorer(app.value.store, i18n.value.dir)} @keydown=${handleKeydown}><div class=${header}><div class=${title}>${t("common.displayLanguage")}</div><button class=${["locale-picker-close", close]} type="button" aria-label=${t("common.close")} title=${toShortcutTitle(keyBindingMap, t("common.close"), KeyBindingName.stop)} @click=${close$1}><${Icon} .name="x" .size=${14} /></button></div><div ${ref(list$1)} class=${["scrollbar", list]} role="listbox" aria-label=${t("common.displayLanguage")}><div class=${pinned}>${renderOption(SYSTEM_LOCALE, html`<span class=${label}>${t("common.system")}</span><span class=${hint} .lang=${system.code} .dir="auto">${system.label}</span>`)}<${Separator} .space=${4} /></div>${LOCALES.map(({ code, label: label$1 }) => renderOption(code, html`<span class=${label} .lang=${code}>${label$1}</span>`))}</div></div>`;
+	};
+};
+//#endregion
+export { LocalePicker as default, stepOption };

package/dist/components/locale-picker/LocalePicker.styles.js

@@ -0,0 +1,112 @@
+import { css } from "../../r-html/dist/template/css.js";
+import { floatingShadow } from "../../styles/elevation.styles.js";
+import { typography } from "../../styles/typography.styles.js";
+//#region src/components/locale-picker/LocalePicker.styles.ts
+var root = css`
+  position: absolute;
+  top: 46px;
+  inset-inline-start: 16px;
+  z-index: 1;
+  width: 260px;
+  max-height: calc(100% - 62px);
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+  background-color: var(--context-menu-background);
+  border: 1px solid var(--context-menu-border);
+  border-radius: 6px;
+  ${floatingShadow};
+`;
+var header = css`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  flex-shrink: 0;
+  padding-inline-end: 4px;
+`;
+var title = css`
+  flex-shrink: 0;
+  padding: 4px 8px 8px;
+  color: var(--active);
+  ${typography.normal};
+`;
+var close = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 26px;
+  height: 26px;
+  margin-bottom: 4px;
+  border-radius: 4px;
+  color: var(--foreground);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--active);
+    background-color: var(--context-menu-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--input-active);
+    outline-offset: 1px;
+  }
+`;
+var list = css`
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  min-height: 0;
+  scroll-padding-block-start: 41px;
+`;
+var pinned = css`
+  display: flow-root;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: var(--context-menu-background);
+`;
+var option = css`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  height: 32px;
+  padding: 0 8px;
+  border-radius: 4px;
+  text-align: start;
+  color: var(--foreground);
+  cursor: pointer;
+  ${typography.paragraph};
+
+  &:hover {
+    color: var(--active);
+    background-color: var(--context-menu-hover);
+  }
+
+  &:focus-visible {
+    box-shadow: inset 0 0 0 1px var(--input-active);
+  }
+
+  &[aria-selected='true'] {
+    color: var(--active);
+  }
+`;
+var check = css`
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  width: 14px;
+`;
+var label = css`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+var hint = css`
+  margin-inline-start: auto;
+  color: var(--placeholder);
+  white-space: nowrap;
+`;
+//#endregion
+export { check, close, header, hint, label, list, option, pinned, root, title };

package/dist/components/localeContext.js

@@ -0,0 +1,8 @@
+import { createContext } from "../r-html/dist/context/createContext.js";
+import { useContext } from "../r-html/dist/context/useContext.js";
+import { sourceI18n } from "../i18n/source.js";
+//#region src/components/localeContext.ts
+var localeContext = createContext(sourceI18n);
+var useI18n = (ctx) => useContext(ctx, localeContext);
+//#endregion
+export { localeContext, useI18n };

package/dist/components/localized/Localized.js

@@ -0,0 +1,15 @@
+import { html } from "../../r-html/dist/render/index.js";
+import { useI18n } from "../localeContext.js";
+//#region src/components/localized/Localized.tsx
+var Localized = (props, ctx) => {
+	const i18n = useI18n(ctx);
+	return () => {
+		const t = i18n.value.t;
+		return html`${t(props.messageKey, props.params)}`;
+	};
+};
+function localized(key, ...args) {
+	return html`<${Localized} .messageKey=${key} .params=${args[0]} />`;
+}
+//#endregion
+export { Localized as default, localized };

package/dist/components/map-columns/MapColumnsBody.js

@@ -0,0 +1,186 @@
+import { KeyBindingName, toShortcutTitle } from "../../utils/keyboard-shortcut/index.js";
+import { uuid25 } from "../../uuid/dist/uuid25.js";
+import { query } from "../../erd-editor-schema/dist/query/index.js";
+import { html } from "../../r-html/dist/render/index.js";
+import { toNameLabel } from "../../engine/modules/editor/utils/nameView.js";
+import { useAppContext } from "../appContext.js";
+import { nameOf } from "./nameOf.js";
+import { useI18n } from "../localeContext.js";
+import Icon from "../primitives/icon/Icon.js";
+import { button, size2, soft, solid } from "../primitives/button/Button.styles.js";
+import { getTypeNote } from "../../utils/map-columns/alignTypes.js";
+import { getUsedColumnIds } from "../../utils/map-columns/mapping.js";
+import { relationshipTypeName } from "../erd/erd-context-menu/menus/relationshipMenus.js";
+import Select from "../primitives/select/Select.js";
+import { actions, arrow, body, close, dataType, dim, grid, header, heading, headingIcon, message, note, parent, references, role, select, subtitle, tableName, title } from "./MapColumnsDialog.styles.js";
+//#region src/components/map-columns/MapColumnsBody.tsx
+var EMPTY_VALUE = "";
+var NEW_VALUE = "new";
+var COLUMN_PREFIX = "column:";
+function toOptionValue(pick) {
+	if (!pick) return EMPTY_VALUE;
+	if (pick.kind === "new") return NEW_VALUE;
+	return COLUMN_PREFIX + pick.columnId;
+}
+function toPick(value) {
+	if (value === NEW_VALUE) return { kind: "new" };
+	if (!value.startsWith(COLUMN_PREFIX)) return null;
+	return {
+		kind: "existing",
+		columnId: value.slice(7)
+	};
+}
+var isBlank = (name) => !name.trim();
+var MapColumnsBody = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const labelId = `map-columns-${uuid25()}`;
+	const parentNameId = (index) => `${labelId}-${index}`;
+	const columnsOf = () => query(app.value.store.state.collections).collection("tableColumnEntities");
+	const named = (entity) => nameOf(entity, i18n.value, app.value.store.state.settings);
+	const keyLabel = (key) => {
+		const { t } = i18n.value;
+		if (key.kind === "primaryKey") return t("common.primaryKey");
+		if (key.kind === "current") return t("mapColumns.currentColumns");
+		const column = columnsOf().selectById(key.columnIds[0]);
+		return t("mapColumns.unique", { column: named(column) });
+	};
+	const mappingMessage = (emptyIndex) => {
+		const { issues, notice, keyId, parentTable } = props.view;
+		const { t } = i18n.value;
+		const table = named(parentTable);
+		if (issues.set.includes("selfOnly")) return {
+			text: t("mapColumns.selfOnly"),
+			error: true
+		};
+		if (issues.set.includes("duplicate")) return {
+			text: t("mapColumns.duplicate"),
+			error: true
+		};
+		if (keyId === null) return {
+			text: t("mapColumns.noKey", { table }),
+			error: true
+		};
+		switch (notice) {
+			case "notAKey": return {
+				text: t("mapColumns.notAKey", { table }),
+				error: false
+			};
+			case "noKey": return {
+				text: t("mapColumns.noKey", { table }),
+				error: false
+			};
+			case "fixMapping": return {
+				text: t("mapColumns.fixMapping"),
+				error: false
+			};
+			case "addKeyToFix": return {
+				text: t("mapColumns.addKeyToFix", { table }),
+				error: false
+			};
+			default: return emptyIndex === -1 ? null : {
+				text: t("mapColumns.pickEveryColumn"),
+				error: false
+			};
+		}
+	};
+	const typeNote = (row) => {
+		if (row.invalid || row.removedParent || row.removedChild || row.parentColumnId === null || row.pick?.kind !== "existing") return null;
+		const columns = columnsOf();
+		const parent = columns.selectById(row.parentColumnId);
+		const child = columns.selectById(row.pick.columnId);
+		if (!parent || !child) return null;
+		const note = getTypeNote(app.value.store.state, parent, child);
+		if (!note) return null;
+		const { t } = i18n.value;
+		return note.kind === "becomes" ? {
+			text: t("mapColumns.becomesType", {
+				column: named(child),
+				dataType: note.dataType
+			}),
+			changes: true
+		} : {
+			text: t("mapColumns.typesDiffer", {
+				parentType: note.parentType,
+				childType: note.childType
+			}),
+			changes: false
+		};
+	};
+	const tableHeading = (table, role$1) => html`<div class=${heading}><${Icon} .class=${headingIcon} .name="table-2" .size=${14} /><span class=${tableName} .dir="auto">${named(table)}</span><span class=${role}>${role$1}</span></div>`;
+	const parentCell = (row, index) => {
+		const { t } = i18n.value;
+		const nameId = parentNameId(index);
+		const dimCell = (text) => html`<div class=${parent}><span id=${nameId} class=${dim}>${text}</span></div>`;
+		if (row.invalid) return dimCell(t("mapColumns.invalid"));
+		const column = row.parentColumnId === null ? void 0 : columnsOf().selectById(row.parentColumnId);
+		if (row.removedParent || !column) return dimCell(t("mapColumns.removed"));
+		return html`<div class=${parent}><span id=${nameId} class=${isBlank(toNameLabel(app.value.store.state.settings, column).text) ? dim : null} .dir="auto">${named(column)}</span><span class=${dataType} .dir="ltr">${column.dataType}</span></div>`;
+	};
+	const childOption = (column, selected, used) => {
+		const value = COLUMN_PREFIX + column.id;
+		const inUse = used.has(column.id);
+		const text = i18n.value.t(inUse ? "mapColumns.columnOptionInUse" : "mapColumns.columnOption", {
+			name: named(column),
+			dataType: column.dataType
+		});
+		return html`<option .value=${value} ?disabled=${inUse} .selected=${value === selected}>${text}</option>`;
+	};
+	const childSelect = (row, index, childTable, autofocus) => {
+		const { rows } = props.view;
+		const { t } = i18n.value;
+		const selected = toOptionValue(row.pick);
+		const used = getUsedColumnIds(rows, index);
+		const children = columnsOf().selectByIds(childTable.columnIds);
+		const parentColumnId = row.parentColumnId;
+		const disabled = Boolean(row.invalid) || parentColumnId === null;
+		const handleChange = (event) => {
+			if (parentColumnId === null) return;
+			const { value } = event.target;
+			props.onPick(parentColumnId, toPick(value));
+		};
+		return html`<${Select} .class=${select} .children=${html`<select aria-labelledby=${`${labelId} ${parentNameId(index)}`} data-parent-column-id=${parentColumnId ?? ""} ?disabled=${disabled} ?data-autofocus=${autofocus} @change=${handleChange}><option .value=${EMPTY_VALUE} .selected=${selected === EMPTY_VALUE}>${t("mapColumns.pickColumn")}</option>${row.newColumnName ? html`<option .value=${NEW_VALUE} .selected=${selected === NEW_VALUE}>${t("mapColumns.newColumn", { name: row.newColumnName })}</option>` : null}${children.map((column) => childOption(column, selected, used))}${row.removedChild ? html`<option .value=${selected} ?disabled=${true} .selected=${true}>${t("mapColumns.removed")}</option>` : null}</select>`} />`;
+	};
+	return () => {
+		const { view, mode, stacked } = props;
+		const { t, dir } = i18n.value;
+		const { keyBindingMap } = app.value;
+		const { parentTable, childTable, relationshipType, keys, keyId, showReferences, rows, changedRemotely, canConfirm } = view;
+		const emptyIndex = rows.findIndex((row) => !row.invalid && row.parentColumnId !== null && !row.pick);
+		const message$1 = mappingMessage(emptyIndex);
+		const arrow$1 = dir === "rtl" ? "arrow-left" : "arrow-right";
+		const confirmText = t(mode === "create" ? "mapColumns.map" : "mapColumns.save");
+		return html`<div class=${["map-columns", body]} style=${{ "color-scheme": props.isDarkMode ? "dark" : "light" }}><div class=${header}><h2 class=${title}>${t("mapColumns.title")}</h2><button class=${["map-columns-close", close]} type="button" aria-label=${t("common.close")} title=${toShortcutTitle(keyBindingMap, t("common.close"), KeyBindingName.stop)} @click=${props.onCancel}><${Icon} .name="x" .size=${14} /></button></div><div class=${["map-columns-subtitle", subtitle]}>${t("mapColumns.subtitle", {
+			parent: named(parentTable),
+			child: named(childTable),
+			relationshipType: relationshipTypeName(relationshipType, i18n.value)
+		})}</div>${showReferences ? html`<label class=${["map-columns-references", references]}><span>${t("mapColumns.references")}</span><${Select} .class=${select} .children=${html`<select aria-label=${t("mapColumns.references")} @change=${(event) => props.onKeyChange(event.target.value)}>${keys.map((key) => html`<option .value=${key.id} .selected=${key.id === keyId}>${keyLabel(key)}</option>`)}</select>`} /></label>` : null}<span id=${labelId} hidden>${t("mapColumns.foreignKeyColumn")}</span>${rows.length ? html`<div class=${[
+			"map-columns-rows",
+			grid,
+			{ stacked }
+		]}>${stacked ? null : html`${tableHeading(parentTable, t("mapColumns.referencedColumn"))}<div />${tableHeading(childTable, t("mapColumns.foreignKeyColumn"))}`}${rows.map((row, index) => {
+			const note$1 = typeNote(row);
+			return html`${parentCell(row, index)}<${Icon} .class=${arrow} .name=${arrow$1} .size=${14} />${childSelect(row, index, childTable, index === emptyIndex)}${note$1 ? html`<div class=${[
+				"map-columns-note",
+				note,
+				{ changes: note$1.changes }
+			]}><${Icon} .name=${note$1.changes ? "refresh-cw" : "triangle-alert"} .size=${12} /><span>${note$1.text}</span></div>` : null}`;
+		})}</div>` : null}${message$1 ? html`<div class=${[
+			"map-columns-message",
+			message,
+			{ error: message$1.error }
+		]} role=${message$1.error ? "alert" : "status"}>${message$1.text}</div>` : null}${changedRemotely ? html`<div class=${["map-columns-changed", message]} role="status">${t("mapColumns.changedRemotely")}</div>` : null}<div class=${actions}><button class=${[
+			"map-columns-cancel",
+			button,
+			soft,
+			size2
+		]} type="button" ?data-autofocus=${emptyIndex === -1 && !canConfirm} @click=${props.onCancel}>${t("common.cancel")}</button><button class=${[
+			"map-columns-confirm",
+			button,
+			solid,
+			size2
+		]} type="button" ?disabled=${!canConfirm} ?data-autofocus=${emptyIndex === -1 && canConfirm} @click=${props.onConfirm}>${confirmText}</button></div></div>`;
+	};
+};
+//#endregion
+export { MapColumnsBody as default, toOptionValue, toPick };

package/dist/components/map-columns/MapColumnsDialog.js

@@ -0,0 +1,112 @@
+import { KeyBindingName } from "../../utils/keyboard-shortcut/index.js";
+import { query } from "../../erd-editor-schema/dist/query/index.js";
+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 { html } from "../../r-html/dist/render/index.js";
+import { Open } from "../../constants/open.js";
+import { changeOpenMapAction } from "../../engine/modules/editor/atom.actions.js";
+import { useAppContext } from "../appContext.js";
+import { nameOf } from "./nameOf.js";
+import { useI18n } from "../localeContext.js";
+import { localized } from "../localized/Localized.js";
+import { openStatusToast } from "../toast-container/openStatusToast.js";
+import { useUnmounted } from "../../hooks/useUnmounted.js";
+import { buildMapColumns, changeMapColumnsKey, openCreateSession, openEditSession, pickMapColumn } from "../../utils/map-columns/buildRows.js";
+import { editorWidthOf } from "../erd-editor/viewportLayout.js";
+import Dialog from "../primitives/dialog/Dialog.js";
+import { mapColumnsAction$ } from "./mapColumnsAction.js";
+import MapColumnsBody from "./MapColumnsBody.js";
+import { filter } from "rxjs";
+//#region src/components/map-columns/MapColumnsDialog.tsx
+var DIALOG_MAX_WIDTH = 600;
+var TableRemovedText = (props, ctx) => {
+	const i18n = useI18n(ctx);
+	return () => html`${i18n.value.t("mapColumns.closedTableRemoved", { table: nameOf(props, i18n.value, props) })}`;
+};
+var MapColumnsDialog = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const { addUnsubscribe } = useUnmounted();
+	const current = observable({ session: null }, { shallow: true });
+	const isOpen = () => Boolean(app.value.store.state.editor.openMap[Open.mapColumns]);
+	const canStand = () => !props.readonly && app.value.store.state.settings.canvasType === CanvasType.ERD;
+	const close = () => {
+		const { store } = app.value;
+		store.dispatch(changeOpenMapAction({ [Open.mapColumns]: false }));
+	};
+	const closedKey = (closed) => closed.reason === "relationshipRemoved" ? "mapColumns.closedRelationshipRemoved" : `mapColumns.closedTableRemoved:${closed.tableId}`;
+	const closedText = (closed) => {
+		if (closed.reason === "relationshipRemoved") return localized("mapColumns.closedRelationshipRemoved");
+		const table = query(app.value.store.state.collections).collection("tableEntities").selectById(closed.tableId);
+		return html`<${TableRemovedText} .name=${table?.name ?? ""} .logicalName=${table?.logicalName ?? ""} .nameViewMode=${app.value.store.state.settings.nameViewMode} />`;
+	};
+	const open = ({ payload }) => {
+		const { state } = app.value.store;
+		current.session = payload.mode === "create" ? openCreateSession(state, payload) : openEditSession(state, payload.relationshipId);
+	};
+	const checkStanding = () => {
+		const { session } = current;
+		if (!session || !isOpen()) return;
+		if (!canStand()) {
+			current.session = null;
+			close();
+			return;
+		}
+		const built = buildMapColumns(app.value.store.state, session);
+		if (built.closed === null) return;
+		current.session = null;
+		close();
+		openStatusToast(app.value.emitter, {
+			key: closedKey(built.closed),
+			title: closedText(built.closed)
+		});
+	};
+	const update = (change) => {
+		const { session } = current;
+		if (!session) return;
+		current.session = change(session);
+	};
+	const handleKeyChange = (keyId) => {
+		update((session) => changeMapColumnsKey(app.value.store.state, session, keyId));
+	};
+	const handlePick = (parentColumnId, pick) => {
+		update((session) => pickMapColumn(app.value.store.state, session, parentColumnId, pick));
+	};
+	const confirm = (view) => {
+		if (!view.canConfirm) return;
+		const { store } = app.value;
+		store.dispatch(mapColumnsAction$(view.draft, { onRefuse: () => openStatusToast(app.value.emitter, {
+			key: "mapColumns.failed",
+			tone: "error",
+			title: localized("mapColumns.failed")
+		}) }));
+		close();
+	};
+	onMounted(() => {
+		const { store, emitter, shortcut$ } = app.value;
+		addUnsubscribe(emitter.on({ openMapColumns: open }), shortcut$.pipe(filter(({ type }) => type === KeyBindingName.stop)).subscribe(() => isOpen() && close()), watch(store.state.editor.openMap).subscribe((name) => {
+			if (name !== Open.mapColumns) return;
+			if (!isOpen()) current.session = null;
+			else if (!current.session || !canStand()) {
+				current.session = null;
+				close();
+			}
+		}), store.subscribe(checkStanding), watch(props).subscribe((name) => {
+			name === "readonly" && checkStanding();
+		}), () => {
+			current.session = null;
+		});
+	});
+	return () => {
+		const { session } = current;
+		if (!session || !isOpen() || !canStand()) return null;
+		const { store } = app.value;
+		const view = buildMapColumns(store.state, session);
+		if (view.closed !== null) return null;
+		const stacked = editorWidthOf(store) < 640;
+		return html`<${Dialog} .label=${i18n.value.t("mapColumns.title")} .maxWidth=${DIALOG_MAX_WIDTH} .onClose=${close} .children=${html`<${MapColumnsBody} .mode=${session.mode} .view=${view} .stacked=${stacked} .isDarkMode=${props.isDarkMode} .onKeyChange=${handleKeyChange} .onPick=${handlePick} .onCancel=${close} .onConfirm=${() => confirm(view)} />`} />`;
+	};
+};
+//#endregion
+export { MapColumnsDialog as default };