@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/components/settings/lockSettingRows.js

@@ -0,0 +1,73 @@
+import { CanvasType, LockSettingType } from "../../constants/schema.js";
+import { toZoomFormat } from "../../utils/validation.js";
+import { formatDistance } from "../erd/content-compass/compassGeometry.js";
+import { menuLabel } from "../../i18n/menuLabel.js";
+import { nameViewOptions } from "../erd/nameViewOptions.js";
+import { menus } from "../schema-sql/schema-sql-context-menu/menus/bracketMenus.js";
+import { menus as menus$1 } from "../generator-code/generator-code-context-menu/menus/columnNameCaseMenus.js";
+import { menus as menus$2 } from "../generator-code/generator-code-context-menu/menus/languageMenus.js";
+import { menus as menus$3 } from "../generator-code/generator-code-context-menu/menus/tableNameCaseMenus.js";
+//#region src/components/settings/lockSettingRows.ts
+var CanvasTypeToMessageKey = {
+	[CanvasType.visualization]: "common.tab.visualization",
+	[CanvasType.schemaSQL]: "common.tab.schemaSql",
+	[CanvasType.generatorCode]: "common.tab.codeGenerator",
+	[CanvasType.dictionary]: "common.tab.dictionary",
+	[CanvasType.settings]: "common.tab.settings"
+};
+var canvasTypeText = (canvasType, i18n) => {
+	if (canvasType === CanvasType.ERD) return "ERD";
+	const key = CanvasTypeToMessageKey[canvasType];
+	return key ? i18n.t(key) : canvasType;
+};
+var nameViewModeText = (nameViewMode, i18n) => {
+	const menu = nameViewOptions.find((menu) => menu.value === nameViewMode);
+	return menu ? i18n.t(menu.labelKey) : nameViewMode;
+};
+var nameOf = (menus, value, i18n) => {
+	const menu = menus.find((menu) => menu.value === value);
+	return menu ? menuLabel(i18n, menu) : String(value);
+};
+var formatCoordinate = (value) => {
+	const label = formatDistance(Math.abs(value));
+	return value < 0 && label !== "0" ? `-${label}` : label;
+};
+var lockSettingRows = [
+	{
+		nameKey: "settings.lockRow.viewport",
+		lockSettingType: LockSettingType.viewport,
+		toText: ({ zoomLevel, originX, originY }) => `${toZoomFormat(zoomLevel)} · ${formatCoordinate(originX)}, ${formatCoordinate(originY)}`
+	},
+	{
+		nameKey: "settings.lockRow.canvasType",
+		lockSettingType: LockSettingType.canvasType,
+		toText: ({ canvasType }, i18n) => canvasTypeText(canvasType, i18n)
+	},
+	{
+		nameKey: "common.codeLanguage",
+		lockSettingType: LockSettingType.language,
+		toText: ({ language }, i18n) => nameOf(menus$2, language, i18n)
+	},
+	{
+		nameKey: "common.tableNameCase",
+		lockSettingType: LockSettingType.tableNameCase,
+		toText: ({ tableNameCase }, i18n) => nameOf(menus$3, tableNameCase, i18n)
+	},
+	{
+		nameKey: "common.columnNameCase",
+		lockSettingType: LockSettingType.columnNameCase,
+		toText: ({ columnNameCase }, i18n) => nameOf(menus$1, columnNameCase, i18n)
+	},
+	{
+		nameKey: "settings.lockRow.bracketType",
+		lockSettingType: LockSettingType.bracketType,
+		toText: ({ bracketType }, i18n) => nameOf(menus, bracketType, i18n)
+	},
+	{
+		nameKey: "settings.lockRow.nameViewMode",
+		lockSettingType: LockSettingType.unlockNameViewMode,
+		toText: ({ nameViewMode }, i18n) => nameViewModeText(nameViewMode, i18n)
+	}
+];
+//#endregion
+export { lockSettingRows };

package/dist/components/settings/settings-lnb/SettingsLnb.js

@@ -0,0 +1,24 @@
+import { html } from "../../../r-html/dist/render/index.js";
+import { useI18n } from "../../localeContext.js";
+import { fontSize6 } from "../../../styles/typography.styles.js";
+import Separator from "../../primitives/separator/Separator.js";
+import { item, list, lnb } from "./SettingsLnb.styles.js";
+//#region src/components/settings/settings-lnb/SettingsLnb.tsx
+var Lnb = {
+	preferences: "Preferences",
+	shortcuts: "Shortcuts"
+};
+var LnbList = Object.values(Lnb);
+var LnbLabelKey = {
+	[Lnb.preferences]: "settings.preferences",
+	[Lnb.shortcuts]: "common.shortcuts"
+};
+var SettingsLnb = (props, ctx) => {
+	const i18n = useI18n(ctx);
+	return () => {
+		const { t } = i18n.value;
+		return html`<div class=${lnb}><div class=${fontSize6}>${t("common.tab.settings")}</div><${Separator} .space=${12} /><div class=${["scrollbar", list]}>${LnbList.map((lnb) => html`<div class=${[item, { selected: lnb === props.value }]} @click=${() => props.onChange(lnb)}>${t(LnbLabelKey[lnb])}</div>`)}</div></div>`;
+	};
+};
+//#endregion
+export { Lnb, LnbLabelKey, SettingsLnb as default };

package/dist/components/settings/settings-lnb/SettingsLnb.styles.js

@@ -0,0 +1,37 @@
+import { css } from "../../../r-html/dist/template/css.js";
+//#region src/components/settings/settings-lnb/SettingsLnb.styles.ts
+var lnb = css`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+`;
+var list = css`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+`;
+var item = css`
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  height: 32px;
+  border-radius: 4px;
+  cursor: default;
+
+  &:hover {
+    background-color: var(--gray-color-3);
+    color: var(--active);
+  }
+
+  &.selected {
+    background-color: var(--context-menu-select);
+    color: var(--active);
+  }
+`;
+//#endregion
+export { item, list, lnb };

package/dist/components/settings/settingsPage.js

@@ -0,0 +1,15 @@
+import { CanvasType } from "../../constants/schema.js";
+import { changeCanvasTypeAction } from "../../engine/modules/settings/atom.actions.js";
+//#region src/components/settings/settingsPage.ts
+var requestedPages = /* @__PURE__ */ new WeakMap();
+function requestSettingsPage(store, page) {
+	requestedPages.set(store, page);
+	store.dispatch(changeCanvasTypeAction({ value: CanvasType.settings }));
+}
+function takeSettingsPage(store) {
+	const page = requestedPages.get(store);
+	requestedPages.delete(store);
+	return page;
+}
+//#endregion
+export { requestSettingsPage, takeSettingsPage };

package/dist/components/settings/shortcuts/Shortcuts.js

@@ -0,0 +1,49 @@
+import { KeyBindingName } from "../../../utils/keyboard-shortcut/index.js";
+import { html } from "../../../r-html/dist/render/index.js";
+import { useAppContext } from "../../appContext.js";
+import { useI18n } from "../../localeContext.js";
+import Kbd from "../../primitives/kbd/Kbd.js";
+import { shortcutGroup, table } from "./Shortcuts.styles.js";
+//#region src/components/settings/shortcuts/Shortcuts.tsx
+var ShortcutNameKey = {
+	[KeyBindingName.edit]: "shortcuts.name.edit",
+	[KeyBindingName.stop]: "shortcuts.name.stop",
+	[KeyBindingName.search]: "shortcuts.name.search",
+	[KeyBindingName.findReplace]: "shortcuts.name.findReplace",
+	[KeyBindingName.undo]: "shortcuts.name.undo",
+	[KeyBindingName.redo]: "shortcuts.name.redo",
+	[KeyBindingName.addTable]: "shortcuts.name.addTable",
+	[KeyBindingName.addColumn]: "shortcuts.name.addColumn",
+	[KeyBindingName.addMemo]: "shortcuts.name.addMemo",
+	[KeyBindingName.addTableGroup]: "shortcuts.name.addTableGroup",
+	[KeyBindingName.groupSelectedTables]: "shortcuts.name.groupSelectedTables",
+	[KeyBindingName.removeTable]: "shortcuts.name.removeTable",
+	[KeyBindingName.removeColumn]: "shortcuts.name.removeColumn",
+	[KeyBindingName.removeSelection]: "shortcuts.name.removeSelection",
+	[KeyBindingName.primaryKey]: "shortcuts.name.primaryKey",
+	[KeyBindingName.selectAllTable]: "shortcuts.name.selectAllTable",
+	[KeyBindingName.selectAllColumn]: "shortcuts.name.selectAllColumn",
+	[KeyBindingName.relationshipZeroOne]: "shortcuts.name.relationshipZeroOne",
+	[KeyBindingName.relationshipZeroN]: "shortcuts.name.relationshipZeroN",
+	[KeyBindingName.relationshipOneOnly]: "shortcuts.name.relationshipOneOnly",
+	[KeyBindingName.relationshipOneN]: "shortcuts.name.relationshipOneN",
+	[KeyBindingName.tableProperties]: "shortcuts.name.tableProperties",
+	[KeyBindingName.focusView]: "shortcuts.name.focusView",
+	[KeyBindingName.zoomIn]: "shortcuts.name.zoomIn",
+	[KeyBindingName.zoomOut]: "shortcuts.name.zoomOut",
+	[KeyBindingName.zoomReset]: "shortcuts.name.zoomReset",
+	[KeyBindingName.handTool]: "shortcuts.name.handTool",
+	[KeyBindingName.zenMode]: "shortcuts.name.zenMode"
+};
+var ShortcutNameList = Object.keys(ShortcutNameKey);
+var Shortcuts = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	return () => {
+		const { keyBindingMap } = app.value;
+		const { t } = i18n.value;
+		return html`<table class=${table}><thead><tr><th>${t("shortcuts.command")}</th><th>${t("shortcuts.keybinding")}</th></tr></thead><tbody>${ShortcutNameList.map((name) => html`<tr><td>${t(ShortcutNameKey[name])}</td><td>${keyBindingMap[name].map(({ shortcut }) => html`<div class=${shortcutGroup}><${Kbd} .shortcut=${shortcut} /></div>`)}</td></tr>`)}</tbody></table>`;
+	};
+};
+//#endregion
+export { Shortcuts as default };

package/dist/components/settings/shortcuts/Shortcuts.styles.js

@@ -0,0 +1,36 @@
+import { css } from "../../../r-html/dist/template/css.js";
+//#region src/components/settings/shortcuts/Shortcuts.styles.ts
+var cell = css`
+  padding: 12px;
+  height: 44px;
+  box-shadow: inset 0 -1px var(--gray-color-5);
+`;
+var table = css`
+  width: 100%;
+  text-align: start;
+  vertical-align: top;
+  border-collapse: collapse;
+  border-radius: calc(var(--table-border-radius) - 1px);
+  border-spacing: 0;
+  box-sizing: border-box;
+  height: 0;
+
+  th {
+    font-weight: var(--font-weight-bold);
+    text-align: start;
+    ${cell};
+  }
+
+  td {
+    ${cell};
+  }
+`;
+var shortcutGroup = css`
+  margin-bottom: 12px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+//#endregion
+export { shortcutGroup, table };

package/dist/components/table-view/Table.styles.js

@@ -0,0 +1,76 @@
+import { css } from "../../r-html/dist/template/css.js";
+import { typography } from "../../styles/typography.styles.js";
+//#region src/components/table-view/Table.styles.ts
+var TABLE_COLOR_EDGE_BOX = 12;
+var root = css`
+  position: absolute;
+  background-color: var(--table-background);
+  border-radius: 6px;
+  border: 1px solid var(--table-border);
+  color: transparent;
+  ${typography.paragraph};
+
+  &:hover {
+    color: var(--foreground);
+  }
+
+  &[data-selected] {
+    border: 1px solid var(--table-select);
+  }
+
+  &[data-shared-focus] {
+    outline: 1px solid var(--shared-focus);
+    outline-offset: 0;
+  }
+
+  &[data-shared-select]:not([data-shared-focus]) {
+    box-shadow: 0 0 0 1px var(--shared-select);
+  }
+
+  & .input-padding[data-shared-focus] {
+    box-shadow: inset 0 -1.5px 0 var(--shared-focus);
+  }
+
+  .column-row-move {
+    transition: transform 0.3s;
+  }
+`;
+var header = css`
+  display: flex;
+  align-items: center;
+  gap: ${8}px;
+  padding: ${2}px ${8}px;
+  background-color: var(--table-header-background);
+  border-radius: 5px 5px 0 0;
+
+  &:last-child {
+    border-radius: 5px;
+  }
+
+  & > .icon {
+    flex-shrink: 0;
+    color: var(--foreground);
+  }
+`;
+var headerColor = css`
+  position: absolute;
+  top: -1px;
+  bottom: -1px;
+  left: -1px;
+  width: ${TABLE_COLOR_EDGE_BOX}px;
+  border-radius: 6px 0 0 6px;
+  clip-path: inset(0 ${TABLE_COLOR_EDGE_BOX - 4}px 0 0);
+  pointer-events: none;
+`;
+var headerInputWrap = css`
+  display: flex;
+  height: ${24}px;
+  align-items: center;
+
+  & > .input-padding {
+    padding: ${2}px ${8}px
+      ${2}px 0;
+  }
+`;
+//#endregion
+export { header, headerColor, headerInputWrap, root };

package/dist/components/table-view/column/Column.styles.js

@@ -0,0 +1,45 @@
+import { css } from "../../../r-html/dist/template/css.js";
+//#region src/components/table-view/column/Column.styles.ts
+var root = css`
+  display: flex;
+  width: 100%;
+  height: ${24}px;
+  align-items: center;
+  color: transparent;
+  padding: 0 ${8}px;
+
+  &:hover {
+    color: var(--foreground);
+    background-color: var(--column-hover);
+  }
+
+  &[data-hover] {
+    background-color: var(--column-hover);
+  }
+
+  &[data-selected] {
+    background-color: var(--column-select);
+  }
+
+  & > .column-col {
+    padding: ${2}px ${8}px ${2}px 0;
+  }
+
+  & > .column-col[data-shared-focus] {
+    box-shadow: inset 0 -1.5px 0 var(--shared-focus);
+  }
+
+  &.none-hover {
+    background-color: transparent;
+  }
+
+  &[data-dragging] {
+    opacity: 0.5;
+  }
+
+  &[data-ghost] {
+    visibility: hidden;
+  }
+`;
+//#endregion
+export { root };

package/dist/components/table-view/column/column-data-type/ColumnDataType.js

@@ -0,0 +1,93 @@
+import { isMod } from "../../../../utils/keyboard-shortcut/index.js";
+import { onMounted, onUnmounted } from "../../../../r-html/dist/render/part/node/component/hooks.js";
+import { watch } 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 { repeat } from "../../../../r-html/dist/render/directives/node/repeat.js";
+import { useAppContext } from "../../../appContext.js";
+import { useI18n } from "../../../localeContext.js";
+import { useUnmounted } from "../../../../hooks/useUnmounted.js";
+import { lastCursorFocus } from "../../../../utils/focus.js";
+import Kbd from "../../../primitives/kbd/Kbd.js";
+import HighlightedText from "../../../primitives/highlighted-text/HighlightedText.js";
+import EditInput from "../../../primitives/edit-input/EditInput.js";
+import { useColumnCell } from "../useColumnCell.js";
+import { hint, hintItem, root } from "./ColumnDataType.styles.js";
+//#region src/components/table-view/column/column-data-type/ColumnDataType.tsx
+var ColumnDataType = (props, ctx) => {
+	const app = useAppContext(ctx, props.app?.value);
+	const i18n = useI18n(ctx);
+	const { state, setHints, handleSelectHint, handleKeydown } = useColumnCell(props, app);
+	const root$1 = createRef();
+	const hintList = createRef();
+	const { addUnsubscribe } = useUnmounted();
+	let currentFocus = false;
+	let timerId = -1;
+	let pendingBlur = null;
+	const handleFocus = () => {
+		currentFocus = true;
+	};
+	const settleFocusout = () => {
+		clearTimeout(timerId);
+		const event = pendingBlur;
+		if (!event) return;
+		pendingBlur = null;
+		const input = root$1.value?.querySelector("input");
+		currentFocus && input && props.edit ? lastCursorFocus(input) : props.onBlur?.(event);
+	};
+	const handleFocusout = (event) => {
+		if (!props.edit) return;
+		currentFocus = false;
+		pendingBlur = event;
+		clearTimeout(timerId);
+		timerId = setTimeout(settleFocusout, 1);
+	};
+	onUnmounted(settleFocusout);
+	const handleInput = (event) => {
+		const input = event.target;
+		input && setHints(input.value);
+		props.onInput?.(event);
+	};
+	const handleHintMousedown = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+	};
+	const handleHintTouchstart = (event) => {
+		event.stopPropagation();
+	};
+	const handleHintWheel = (event) => {
+		if (isMod(event) || event.ctrlKey) return;
+		const { deltaX, deltaY } = event;
+		if (deltaY === 0 || Math.abs(deltaY) < Math.abs(deltaX) || event.shiftKey && deltaX === 0) return;
+		const el = hintList.value;
+		if (!el || el.scrollHeight <= el.clientHeight) return;
+		event.stopPropagation();
+	};
+	const handleHintState = (propName) => {
+		const el = hintList.value;
+		if (!el) return;
+		if (propName === "hints") {
+			el.scrollTop = 0;
+			return;
+		}
+		if (propName !== "index" || state.index === -1) return;
+		const top = state.index * 20;
+		const bottom = top + 20;
+		if (top < el.scrollTop) el.scrollTop = top;
+		else if (bottom > el.scrollTop + el.clientHeight) el.scrollTop = bottom - el.clientHeight;
+	};
+	onMounted(() => {
+		addUnsubscribe(watch(state).subscribe(handleHintState));
+	});
+	return () => html`<div class=${root} ${ref(root$1)} .dir="ltr" tabindex="-1" @focus=${handleFocus} @focusin=${handleFocus} @focusout=${handleFocusout}><${EditInput} .placeholder=${i18n.value.t("common.placeholder.dataType")} .width=${props.width} .value=${props.value} .focus=${props.focus} .edit=${props.edit} .autofocus=${true} .onInput=${handleInput} .onKeydown=${handleKeydown} />${props.edit ? html`<div class=${[
+		"data-type-hint",
+		"scrollbar",
+		hint
+	]} ${ref(hintList)} @mousedown=${handleHintMousedown} @touchstart=${handleHintTouchstart} @wheel=${handleHintWheel}>${repeat(state.hints, (hint) => hint.name, (hint, index) => html`<div class=${[
+		"data-type-hint-item",
+		hintItem,
+		{ selected: index === state.index }
+	]} @click=${() => handleSelectHint(index)}><span><${HighlightedText} .searchWords=${[props.value]} .textToHighlight=${hint.name} /></span><${Kbd} .mini=${true} .shortcut="Tab" /></div>`)}</div>` : null}</div>`;
+};
+//#endregion
+export { ColumnDataType as default };

package/dist/components/table-view/column/column-data-type/ColumnDataType.styles.js

@@ -0,0 +1,51 @@
+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/table-view/column/column-data-type/ColumnDataType.styles.ts
+var HINT_MAX_HEIGHT = 202;
+var root = css`
+  position: relative;
+  outline: none;
+`;
+var hint = css`
+  position: absolute;
+  z-index: 1;
+  top: ${20}px;
+  left: 0;
+  max-height: ${HINT_MAX_HEIGHT}px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  color: var(--foreground);
+  background-color: var(--table-background);
+  border: ${1}px solid var(--table-border);
+  ${floatingShadow};
+  white-space: nowrap;
+  ${typography.paragraph};
+`;
+var hintItem = css`
+  display: flex;
+  align-items: center;
+  padding: 0 4px;
+  height: ${20}px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--column-hover);
+  }
+
+  &.selected {
+    background-color: var(--column-select);
+
+    .kbd {
+      visibility: visible;
+    }
+  }
+
+  & > .kbd {
+    margin-left: auto;
+    padding-left: 6px;
+    visibility: hidden;
+  }
+`;
+//#endregion
+export { hint, hintItem, root };

package/dist/components/table-view/column/column-domain/ColumnDomain.js

@@ -0,0 +1,77 @@
+import { isComposing } from "../../../../utils/keyboard-shortcut/index.js";
+import { query } from "../../../../erd-editor-schema/dist/query/index.js";
+import { observable } from "../../../../r-html/dist/observable/index.js";
+import { html } from "../../../../r-html/dist/render/index.js";
+import { ref } from "../../../../r-html/dist/render/directives/attribute/ref.js";
+import { repeat } from "../../../../r-html/dist/render/directives/node/repeat.js";
+import { toLiveDomainId } from "../../../../engine/modules/dictionary/membership.js";
+import { setColumnDomainAction$ } from "../../../../engine/modules/dictionary/generator.actions.js";
+import { useAppContext } from "../../../appContext.js";
+import { useI18n } from "../../../localeContext.js";
+import Kbd from "../../../primitives/kbd/Kbd.js";
+import HighlightedText from "../../../primitives/highlighted-text/HighlightedText.js";
+import { searchDomainOptions } from "./domainOptions.js";
+import EditInput from "../../../primitives/edit-input/EditInput.js";
+import { hint, hintItem, root } from "../column-logical-name/ColumnLogicalName.styles.js";
+import { useHintList } from "../useHintList.js";
+//#region src/components/table-view/column/column-domain/ColumnDomain.tsx
+var ColumnDomain = (props, ctx) => {
+	const app = useAppContext(ctx, props.app?.value);
+	const i18n = useI18n(ctx);
+	const state = observable({
+		typed: "",
+		rows: [],
+		index: -1
+	});
+	const list = useHintList(props, state);
+	const setRows = (typed) => {
+		const { store } = app.value;
+		const rows = searchDomainOptions(store.state, typed);
+		const column = query(store.state.collections).collection("tableColumnEntities").selectById(props.columnId);
+		const linkedId = toLiveDomainId(store.state, column?.domainId);
+		const linked = typed.trim() ? -1 : rows.findIndex(({ id }) => id === linkedId);
+		state.typed = typed;
+		state.rows = rows;
+		state.index = linked !== -1 ? linked : rows.length ? 0 : -1;
+	};
+	setRows("");
+	const handlePick = (index) => {
+		const option = state.rows[index];
+		if (!option) return;
+		const { store } = app.value;
+		store.dispatch(setColumnDomainAction$(props.tableId, props.columnId, option.id));
+		props.onEditEnd?.();
+	};
+	const handleInput = (event) => {
+		const input = event.target;
+		input && setRows(input.value);
+	};
+	const handleKeydown = (event) => {
+		if (isComposing(event)) return;
+		switch (event.key) {
+			case "ArrowUp":
+			case "ArrowDown":
+				event.preventDefault();
+				list.step(event.key === "ArrowUp" ? -1 : 1);
+				break;
+			case "Enter":
+				if (state.index === -1) return;
+				event.stopPropagation();
+				handlePick(state.index);
+		}
+	};
+	return () => {
+		const selected = state.index;
+		return html`<div class=${root} ${ref(list.root)} .dir="ltr" tabindex="-1" @focus=${list.handleFocus} @focusin=${list.handleFocus} @focusout=${list.handleFocusout}><${EditInput} .placeholder=${props.placeholder} .width=${props.width} .value=${state.typed} .focus=${true} .edit=${true} .autofocus=${true} .onInput=${handleInput} .onKeydown=${handleKeydown} />${state.rows.length ? html`<div class=${[
+			"domain-hint",
+			"scrollbar",
+			hint
+		]} ${ref(list.hintList)} @mousedown=${list.handleHintMousedown} @touchstart=${list.handleHintTouchstart} @wheel=${list.handleHintWheel}>${repeat(state.rows, (option) => option.id, (option, index) => html`<div class=${[
+			"domain-hint-item",
+			hintItem,
+			{ selected: index === selected }
+		]} @click=${() => handlePick(index)}><span>${option.id === "" ? i18n.value.t("common.none") : html`<${HighlightedText} .searchWords=${[state.typed.trim()]} .textToHighlight=${option.name} />`}</span><${Kbd} .mini=${true} .shortcut="Enter" /></div>`)}</div>` : null}</div>`;
+	};
+};
+//#endregion
+export { ColumnDomain as default };

package/dist/components/table-view/column/column-domain/domainOptions.js

@@ -0,0 +1,20 @@
+import { getDomainNames, normalizeDictionaryName } from "../../../../engine/modules/dictionary/dictionaryIndex.js";
+//#region src/components/table-view/column/column-domain/domainOptions.ts
+var NO_DOMAIN = {
+	id: "",
+	name: ""
+};
+function searchDomainOptions(state, typed) {
+	const named = getDomainNames(state).rows.flatMap(({ id, name }) => {
+		const normalized = normalizeDictionaryName(name);
+		return normalized ? [{
+			id,
+			name: normalized
+		}] : [];
+	});
+	const key = normalizeDictionaryName(typed).toLowerCase();
+	if (!key) return named.length ? [NO_DOMAIN, ...named] : [];
+	return named.filter(({ name }) => name.toLowerCase().includes(key));
+}
+//#endregion
+export { searchDomainOptions };

package/dist/components/table-view/column/column-key/ColumnKey.js

@@ -0,0 +1,24 @@
+import { ColumnUIKey } from "../../../../constants/schema.js";
+import { html } from "../../../../r-html/dist/render/index.js";
+import { bHas } from "../../../../utils/bit.js";
+import Icon from "../../../primitives/icon/Icon.js";
+import { key } from "./ColumnKey.styles.js";
+//#region src/components/table-view/column/column-key/ColumnKey.tsx
+var ColumnKey = (props, ctx) => {
+	const className = () => {
+		const isPrimaryKey = bHas(props.keys, ColumnUIKey.primaryKey);
+		const isForeignKey = bHas(props.keys, ColumnUIKey.foreignKey);
+		return {
+			pk: isPrimaryKey && !isForeignKey,
+			fk: !isPrimaryKey && isForeignKey,
+			pfk: isPrimaryKey && isForeignKey
+		};
+	};
+	return () => html`<${Icon} .class=${[
+		"column-col",
+		key,
+		className()
+	]} .size=${12} .name="key-round" .onMouseenter=${props.onMouseenter} .onMouseleave=${props.onMouseleave} />`;
+};
+//#endregion
+export { ColumnKey as default };

package/dist/components/table-view/column/column-key/ColumnKey.styles.js

@@ -0,0 +1,19 @@
+import { css } from "../../../../r-html/dist/template/css.js";
+//#region src/components/table-view/column/column-key/ColumnKey.styles.ts
+var key = css`
+  color: transparent;
+
+  &.pk {
+    color: var(--key-pk);
+  }
+
+  &.fk {
+    color: var(--key-fk);
+  }
+
+  &.pfk {
+    color: var(--key-pfk);
+  }
+`;
+//#endregion
+export { key };