@dineug/erd-editor 4.2.0 → 5.0.0

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 };

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

@@ -0,0 +1,169 @@
+import { css } from "../../r-html/dist/template/css.js";
+import { fontSize4, typography } from "../../styles/typography.styles.js";
+//#region src/components/map-columns/MapColumnsDialog.styles.ts
+var body = css`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 20px;
+  color: var(--foreground);
+  ${typography.normal};
+
+  & button:focus-visible,
+  && select:focus-visible {
+    outline: 2px solid var(--input-active);
+    outline-offset: 2px;
+  }
+`;
+var header = css`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+`;
+var title = css`
+  margin: 0;
+  color: var(--active);
+  font-weight: var(--font-weight-medium);
+  ${fontSize4};
+`;
+var close = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 26px;
+  height: 26px;
+  border-radius: 4px;
+  color: var(--foreground);
+  cursor: pointer;
+  scroll-margin: 6px;
+
+  &:hover {
+    color: var(--active);
+    background-color: var(--context-menu-hover);
+  }
+`;
+var subtitle = css`
+  margin-top: -8px;
+  color: var(--placeholder);
+  overflow-wrap: anywhere;
+  ${typography.paragraph};
+`;
+var select = css`
+  width: 100%;
+  min-width: 0;
+`;
+var references = css`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  & > span {
+    flex-shrink: 0;
+  }
+`;
+var grid = css`
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: center;
+  column-gap: 12px;
+  row-gap: 8px;
+
+  &.stacked {
+    grid-template-columns: auto minmax(0, 1fr);
+    column-gap: 8px;
+    row-gap: 4px;
+  }
+`;
+var heading = css`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  color: var(--placeholder);
+  ${typography.paragraph};
+`;
+var headingIcon = css`
+  flex-shrink: 0;
+`;
+var tableName = css`
+  min-width: 0;
+  color: var(--active);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+var role = css`
+  flex-shrink: 0;
+`;
+var arrow = css`
+  color: var(--placeholder);
+`;
+var parent = css`
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+
+  & > span:first-child {
+    color: var(--active);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .stacked > & {
+    grid-column: 1 / -1;
+    margin-top: 8px;
+  }
+`;
+var dim = css`
+  color: var(--placeholder) !important;
+`;
+var dataType = css`
+  flex-shrink: 0;
+  color: var(--placeholder);
+  ${typography.paragraph};
+`;
+var note = css`
+  grid-column: -2 / -1;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: -4px;
+  color: var(--foreground);
+  ${typography.paragraph};
+
+  & > .icon {
+    flex-shrink: 0;
+    color: var(--map-columns-error);
+  }
+
+  &.changes > .icon {
+    color: var(--accent-color-11);
+  }
+`;
+var message = css`
+  color: var(--placeholder);
+  ${typography.paragraph};
+
+  &.error {
+    color: var(--map-columns-error);
+  }
+`;
+var actions = css`
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-top: 4px;
+
+  & > button:disabled,
+  & > button:disabled:hover {
+    color: var(--gray-color-8);
+    background-color: var(--gray-color-3);
+    cursor: default;
+  }
+`;
+//#endregion
+export { actions, arrow, body, close, dataType, dim, grid, header, heading, headingIcon, message, note, parent, references, role, select, subtitle, tableName, title };

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

@@ -0,0 +1,18 @@
+import { uuid25 } from "../../uuid/dist/uuid25.js";
+import { hasMappingIssues, hasMappingTargets, isSameResult, validateMapping } from "../../utils/map-columns/validate.js";
+import { toMapColumnsActions } from "../../utils/map-columns/toMapColumnsActions.js";
+//#region src/components/map-columns/mapColumnsAction.ts
+var mapColumnsAction$ = (draft, { onRefuse }) => function* (state) {
+	if (!hasMappingTargets(state, draft)) {
+		onRefuse();
+		return;
+	}
+	if (isSameResult(state, draft)) return;
+	if (hasMappingIssues(validateMapping(state, draft), ["unchanged"])) {
+		onRefuse();
+		return;
+	}
+	yield toMapColumnsActions(state, draft, uuid25);
+};
+//#endregion
+export { mapColumnsAction$ };

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

@@ -0,0 +1,8 @@
+import { nameLabelText, toNameLabel } from "../../engine/modules/editor/utils/nameView.js";
+//#region src/components/map-columns/nameOf.ts
+function nameOf(entity, { t }, settings) {
+	const text = entity ? nameLabelText(toNameLabel(settings, entity)) : "";
+	return text.trim() ? text : t("common.unnamed");
+}
+//#endregion
+export { nameOf };

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

@@ -0,0 +1,10 @@
+import { Open } from "../../constants/open.js";
+import { changeOpenMapAction } from "../../engine/modules/editor/atom.actions.js";
+import { openMapColumnsAction } from "../../utils/emitter.js";
+//#region src/components/map-columns/openMapColumns.ts
+function openMapColumns({ store, emitter }, opening) {
+	emitter.emit(openMapColumnsAction(opening));
+	store.dispatch(changeOpenMapAction({ [Open.mapColumns]: true }));
+}
+//#endregion
+export { openMapColumns };

package/dist/components/primitives/button/Button.js

@@ -0,0 +1,12 @@
+import { html } from "../../../r-html/dist/render/index.js";
+import { Button_styles_exports, button } from "./Button.styles.js";
+//#region src/components/primitives/button/Button.tsx
+var Button = (props, ctx) => {
+	return () => html`<button class=${[
+		button,
+		Reflect.get(Button_styles_exports, props.variant ?? "solid"),
+		Reflect.get(Button_styles_exports, `size${props.size ?? "2"}`)
+	]} type="button" @click=${props.onClick}>${props.text}</button>`;
+};
+//#endregion
+export { Button as default };