@dineug/erd-editor 4.2.0 → 5.0.1

package/dist/components/schema-sql/schema-sql-options/ScriptEditor.js

@@ -0,0 +1,117 @@
+import { KeyBindingName, KeyBindingNameList, isComposing, matchesShortcut } from "../../../utils/keyboard-shortcut/index.js";
+import { onBeforeMount, onMounted, onUpdated } 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 { html } from "../../../r-html/dist/render/index.js";
+import { createRef, ref } from "../../../r-html/dist/render/directives/attribute/ref.js";
+import { innerHTML } from "../../../r-html/dist/render/directives/node/innerHTML.js";
+import { useAppContext } from "../../appContext.js";
+import { useUnmounted } from "../../../hooks/useUnmounted.js";
+import { getShikiService } from "../../../services/shiki/index.js";
+import { editor, input, preview } from "./ScriptEditor.styles.js";
+//#region src/components/schema-sql/schema-sql-options/ScriptEditor.tsx
+var SCRIPT_PASSING_BINDINGS = [
+	KeyBindingName.findReplace,
+	KeyBindingName.search,
+	KeyBindingName.stop,
+	KeyBindingName.zoomIn,
+	KeyBindingName.zoomOut,
+	KeyBindingName.zoomReset
+];
+var ScriptEditor = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const textarea = createRef();
+	const preview$1 = createRef();
+	const { addUnsubscribe } = useUnmounted();
+	const state = observable({
+		draft: props.value,
+		highlight: "",
+		backgroundColor: ""
+	});
+	let focused = false;
+	let unmounted = false;
+	let focusedDraft = "";
+	let highlightSource = null;
+	let highlightRequestId = 0;
+	const fitHeight = () => {
+		const $textarea = textarea.value;
+		const $box = $textarea?.parentElement;
+		if (!$textarea || !$box) return;
+		$box.style.height = `${$box.offsetHeight}px`;
+		$textarea.style.height = "auto";
+		$textarea.style.height = `${$textarea.scrollHeight}px`;
+		$box.style.height = "";
+	};
+	const getPre = () => preview$1.value?.querySelector("pre.shiki") ?? null;
+	const setBackgroundColor = () => {
+		nextTick(() => {
+			const pre = getPre();
+			state.backgroundColor = pre?.style.backgroundColor ?? "";
+			pre?.removeAttribute("tabindex");
+		});
+	};
+	const setHighlight = () => {
+		const value = state.draft;
+		const requestId = ++highlightRequestId;
+		if (highlightSource !== value) {
+			highlightSource = value;
+			state.highlight = "";
+		}
+		getShikiService()?.codeToHtml(value, {
+			lang: "sql",
+			theme: props.theme
+		}).then((highlight) => {
+			if (requestId !== highlightRequestId) return;
+			state.highlight = highlight;
+			setBackgroundColor();
+		});
+	};
+	const commit = () => {
+		if (state.draft !== focusedDraft && state.draft !== props.value) props.onCommit(state.draft);
+	};
+	const followValue = () => {
+		if (state.draft === props.value) return;
+		state.draft = props.value;
+		setHighlight();
+	};
+	const handleInput = () => {
+		const $textarea = textarea.value;
+		if (!$textarea) return;
+		state.draft = $textarea.value;
+		fitHeight();
+		setHighlight();
+	};
+	const handleFocus = () => {
+		focused = true;
+		focusedDraft = state.draft;
+	};
+	const handleBlur = () => {
+		if (unmounted) return;
+		focused = false;
+		if (props.readonly || state.draft === focusedDraft) followValue();
+		else commit();
+	};
+	const keepClipboard = (event) => {
+		event.stopPropagation();
+	};
+	const handleKeydown = (event) => {
+		const { keyBindingMap } = app.value;
+		const matches = (name) => matchesShortcut(event, keyBindingMap[name]);
+		if (isComposing(event) || !SCRIPT_PASSING_BINDINGS.some(matches) && KeyBindingNameList.some(matches)) event.stopPropagation();
+	};
+	onBeforeMount(() => {
+		setHighlight();
+		addUnsubscribe(watch(props).subscribe((propName) => {
+			if (propName === "value" && !focused) followValue();
+			else if (propName === "theme") setHighlight();
+		}), () => {
+			unmounted = true;
+			if (focused) commit();
+		});
+	});
+	onMounted(fitHeight);
+	onUpdated(fitHeight);
+	return () => html`<div class=${editor} .dir="ltr" style=${{ "background-color": state.backgroundColor || "var(--canvas-background)" }}><textarea ${ref(textarea)} class=${input} id=${props.id} placeholder=${props.placeholder} spellcheck="false" autocorrect="off" autocapitalize="off" autocomplete="off" aria-readonly=${props.readonly ? "true" : "false"} .readOnly=${props.readonly} .value=${state.draft} @input=${handleInput} @focus=${handleFocus} @blur=${handleBlur} @keydown=${handleKeydown} @copy=${keepClipboard} @cut=${keepClipboard} @paste=${keepClipboard}></textarea><div class=${preview} aria-hidden="true" ${ref(preview$1)}>${state.highlight ? innerHTML(state.highlight) : state.draft}</div></div>`;
+};
+//#endregion
+export { ScriptEditor as default };

package/dist/components/schema-sql/schema-sql-options/ScriptEditor.styles.js

@@ -0,0 +1,82 @@
+import { css } from "../../../r-html/dist/template/css.js";
+//#region src/components/schema-sql/schema-sql-options/ScriptEditor.styles.ts
+var layer = css`
+  margin: 0;
+  padding: 8px;
+  box-sizing: border-box;
+  font-family: var(--code-font-family);
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: 0;
+  font-weight: var(--font-weight-regular);
+  font-kerning: none;
+  font-variant-ligatures: none;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  tab-size: 8;
+  text-align: left;
+`;
+var editor = css`
+  position: relative;
+  isolation: isolate;
+  border: 1px solid var(--context-menu-border);
+  border-radius: 4px;
+  overflow: hidden;
+
+  &:focus-within {
+    border-color: var(--focus);
+  }
+`;
+var input = css`
+  ${layer};
+  position: relative;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  min-height: 110px;
+  border: 0;
+  outline: none;
+  resize: none;
+  overflow: hidden;
+  background: transparent;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  caret-color: var(--active);
+
+  &::selection {
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+    background-color: var(--placeholder);
+  }
+
+  /* the reset gives every placeholder the text font, a hint here being SQL */
+  &::placeholder {
+    font-family: inherit;
+    color: #6a737d;
+    -webkit-text-fill-color: #6a737d;
+  }
+`;
+var preview = css`
+  ${layer};
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  color: var(--active);
+  -webkit-user-select: none;
+  user-select: none;
+
+  /* the UA matches pre and code directly, which beats anything this rule only inherits down */
+  & pre,
+  & code,
+  & span {
+    margin: 0;
+    padding: 0;
+    font: inherit;
+    white-space: inherit;
+    overflow-wrap: inherit;
+    background: none;
+  }
+`;
+//#endregion
+export { editor, input, preview };

package/dist/components/schema-sql/schema-sql-options/dropWarning.js

@@ -0,0 +1,13 @@
+import { Database } from "../../../constants/schema.js";
+import { isolate } from "../../../i18n/translate.js";
+//#region src/components/schema-sql/schema-sql-options/dropWarning.ts
+var LISTED_TABLES = 5;
+function formatDropWarning(i18n, database, tables) {
+	if (!tables.length) return null;
+	const names = i18n.dir === "rtl" ? tables.map(isolate) : tables;
+	const listed = names.length <= LISTED_TABLES ? names : [...names.slice(0, 4), i18n.t("schemaSql.moreTables", { count: names.length - 4 })];
+	const list = new Intl.ListFormat(i18n.locale, { type: "conjunction" }).format(listed);
+	return database === Database.Snowflake ? i18n.t("schemaSql.replaceWarning", { tables: list }) : i18n.t("schemaSql.dropWarning", { tables: list });
+}
+//#endregion
+export { formatDropWarning };

package/dist/components/schema-sql/schemaSQLView.js

@@ -0,0 +1,107 @@
+import { query } from "../../erd-editor-schema/dist/query/index.js";
+import { CanvasType } from "../../constants/schema.js";
+import { observable } from "../../r-html/dist/observable/index.js";
+import { getTableGroupId } from "../../utils/tableGroup.js";
+import { changeCanvasTypeAction } from "../../engine/modules/settings/atom.actions.js";
+import { SchemaSQLHeader, SchemaSQLStatements } from "../../utils/schema-sql/options.js";
+//#region src/components/schema-sql/schemaSQLView.ts
+var views = /* @__PURE__ */ new WeakMap();
+function schemaSQLViewOf({ store }) {
+	let view = views.get(store);
+	if (!view) {
+		view = observable({
+			statements: SchemaSQLStatements.ifNotExists,
+			header: SchemaSQLHeader.createAndUse,
+			logicalNameAsComment: false,
+			tables: {
+				groups: {},
+				noGroup: true
+			},
+			panel: "unset",
+			focusSave: false
+		});
+		views.set(store, view);
+	}
+	return view;
+}
+function resolvePanel(view, editorWidth) {
+	if (view.panel !== "unset") return view.panel;
+	if (editorWidth <= 0) return "unknown";
+	view.panel = editorWidth < 640 ? "closed" : "open";
+	return view.panel;
+}
+function togglePanel(view, editorWidth) {
+	view.panel = resolvePanel(view, editorWidth) === "open" ? "closed" : "open";
+}
+function toggleSchemaSQLPanel(app) {
+	togglePanel(schemaSQLViewOf(app), app.store.state.editor.viewport.width);
+}
+function showSchemaSQLExport(app) {
+	const { store } = app;
+	const view = schemaSQLViewOf(app);
+	view.panel = "open";
+	view.focusSave = true;
+	if (store.state.settings.canvasType !== CanvasType.schemaSQL) store.dispatch(changeCanvasTypeAction({ value: CanvasType.schemaSQL }));
+}
+function isEveryTableChosen({ groups, noGroup }) {
+	return noGroup && Object.values(groups).every(Boolean);
+}
+function resolveTableChoice(choice, groupIds) {
+	if (!groupIds.length) return {
+		groups: {},
+		noGroup: true
+	};
+	const fresh = isEveryTableChosen(choice);
+	const groups = {};
+	for (const id of groupIds) groups[id] = Object.hasOwn(choice.groups, id) ? choice.groups[id] : fresh;
+	return {
+		groups,
+		noGroup: choice.noGroup
+	};
+}
+function isSameChoice(a, b) {
+	const ids = Object.keys(a.groups);
+	return a.noGroup === b.noGroup && ids.length === Object.keys(b.groups).length && ids.every((id) => Object.hasOwn(b.groups, id) && a.groups[id] === b.groups[id]);
+}
+function syncTableChoice(view, groupIds) {
+	const next = resolveTableChoice(view.tables, groupIds);
+	if (!isSameChoice(view.tables, next)) view.tables = next;
+}
+function chooseAllTables(view, groupIds, checked) {
+	view.tables = {
+		groups: Object.fromEntries(groupIds.map((id) => [id, checked])),
+		noGroup: checked
+	};
+}
+function chooseTableGroup(view, groupIds, groupId, checked) {
+	const { groups, noGroup } = resolveTableChoice(view.tables, groupIds);
+	view.tables = {
+		groups: {
+			...groups,
+			[groupId]: checked
+		},
+		noGroup
+	};
+}
+function chooseNoGroup(view, groupIds, checked) {
+	const { groups } = resolveTableChoice(view.tables, groupIds);
+	view.tables = {
+		groups,
+		noGroup: checked
+	};
+}
+function isNoTableChosen(choice, groupIds) {
+	const { groups, noGroup } = resolveTableChoice(choice, groupIds);
+	return !noGroup && !Object.values(groups).some(Boolean);
+}
+function chosenTableIds(state, choice) {
+	const { doc, collections } = state;
+	const resolved = resolveTableChoice(choice, doc.tableGroupIds);
+	if (isEveryTableChosen(resolved)) return void 0;
+	return query(collections).collection("tableEntities").selectByIds(doc.tableIds).filter((table) => {
+		const groupId = getTableGroupId(state, table);
+		return groupId ? resolved.groups[groupId] : resolved.noGroup;
+	}).map(({ id }) => id);
+}
+//#endregion
+export { chooseAllTables, chooseNoGroup, chooseTableGroup, chosenTableIds, isEveryTableChosen, isNoTableChosen, resolvePanel, resolveTableChoice, schemaSQLViewOf, showSchemaSQLExport, syncTableChoice, togglePanel, toggleSchemaSQLPanel };

package/dist/components/settings/Settings.js

@@ -0,0 +1,112 @@
+import { isSettingLocked } from "../../erd-editor-schema/dist/v3/schema/settings.js";
+import { CanvasType } from "../../constants/schema.js";
+import { maxWidthCommentInRange, toMaxWidthCommentFormat, toNumString } from "../../utils/validation.js";
+import { onBeforeMount, onUpdated } from "../../r-html/dist/render/part/node/component/hooks.js";
+import { observable } 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 { changeColumnOrderAction, changeMaxWidthCommentAction, changeRelationshipDataTypeSyncAction } from "../../engine/modules/settings/atom.actions.js";
+import { changeLockSettingsAction$ } from "../../engine/modules/settings/generator.actions.js";
+import { useAppContext } from "../appContext.js";
+import { useI18n } from "../localeContext.js";
+import Icon from "../primitives/icon/Icon.js";
+import { fontSize6 } from "../../styles/typography.styles.js";
+import { onPrevent } from "../../utils/domEvent.js";
+import Menu from "../primitives/context-menu/menu/Menu.js";
+import TextInput from "../primitives/text-input/TextInput.js";
+import { FlipAnimation } from "../../utils/flipAnimation.js";
+import { fromShadowDraggable } from "../../utils/rx-operators/fromShadowDraggable.js";
+import Separator from "../primitives/separator/Separator.js";
+import { readonlyBadge } from "../erd/table-properties/TableProperties.styles.js";
+import Switch from "../primitives/switch/Switch.js";
+import SettingsLnb, { Lnb, LnbLabelKey } from "./settings-lnb/SettingsLnb.js";
+import { takeSettingsPage } from "./settingsPage.js";
+import { ColumnTypeToMessageKey } from "./columnTypeLabels.js";
+import { lockSettingRows } from "./lockSettingRows.js";
+import Shortcuts from "./shortcuts/Shortcuts.js";
+import { columnOrderItem, columnOrderList, columnOrderSection, content, contentArea, header, lnbArea, lockButton, lockControl, lockList, lockName, lockRow, lockSection, lockValue, root, row, section, vertical } from "./Settings.styles.js";
+//#region src/components/settings/Settings.tsx
+var Settings = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const root$1 = createRef();
+	const flipAnimation = new FlipAnimation(root$1, `.${columnOrderItem}:not(.dragging)`, "column-order-move");
+	const state = observable({ lnb: Lnb.preferences });
+	onBeforeMount(() => {
+		state.lnb = takeSettingsPage(app.value.store) ?? Lnb.preferences;
+	});
+	const handleChangeRelationshipDataTypeSync = (value) => {
+		const { store } = app.value;
+		store.dispatch(changeRelationshipDataTypeSyncAction({ value }));
+	};
+	const handleChangeColumnOrderAction = (value, target) => {
+		const { store } = app.value;
+		if (store.getReadonly()) return;
+		if (value !== target) {
+			flipAnimation.snapshot();
+			store.dispatch(changeColumnOrderAction({
+				value,
+				target
+			}));
+		}
+	};
+	const handleDragstartColumnOrder = (event) => {
+		const $root = root$1.value;
+		const $target = event.target;
+		if (!$root || !$target) return;
+		const id = $target.dataset?.id;
+		if (!id) return;
+		const columnType = Number(id);
+		const elements = Array.from($root.querySelectorAll(`.${columnOrderItem}`));
+		elements.forEach((el) => el.classList.add("none-hover"));
+		$target.classList.add("dragging");
+		fromShadowDraggable(elements, (el) => el.dataset.id).subscribe({
+			next: (target) => {
+				handleChangeColumnOrderAction(columnType, Number(target));
+			},
+			complete: () => {
+				$target.classList.remove("dragging");
+				elements.forEach((el) => el.classList.remove("none-hover"));
+			}
+		});
+	};
+	onUpdated(() => flipAnimation.play());
+	const handleChangeLnb = (value) => {
+		state.lnb = value;
+	};
+	const handleSwitchMaxWidthComment = (checked) => {
+		const { store } = app.value;
+		store.dispatch(changeMaxWidthCommentAction({ value: checked ? 60 : -1 }));
+	};
+	const handleChangeMaxWidthComment = (event) => {
+		const el = event.target;
+		if (!el) return;
+		const maxWidthComment = maxWidthCommentInRange(Number(toNumString(el.value)));
+		const { store } = app.value;
+		el.value = toMaxWidthCommentFormat(maxWidthComment);
+		store.dispatch(changeMaxWidthCommentAction({ value: maxWidthComment }));
+	};
+	const handleChangeLock = (lockSettingType, value) => {
+		const { store } = app.value;
+		store.dispatch(changeLockSettingsAction$(lockSettingType, value));
+	};
+	return () => {
+		const { store } = app.value;
+		const { settings } = store.state;
+		const { t } = i18n.value;
+		const readonly = store.getReadonly();
+		const maxWidthCommentDisabled = settings.maxWidthComment === -1;
+		const liveValues = {
+			...settings,
+			canvasType: settings.canvasType === CanvasType.settings ? store.state.editor.lastCanvasType : settings.canvasType
+		};
+		return html`<div class=${root} ${ref(root$1)}><div class=${lnbArea}><${SettingsLnb} .value=${state.lnb} .onChange=${handleChangeLnb} /></div><div class=${contentArea}><div class=${header}><div class=${fontSize6}>${t(LnbLabelKey[state.lnb])}</div>${readonly ? html`<span class=${readonlyBadge}><${Icon} .name="lock" .size=${12} /><span>${t("tableProperties.readOnly")}</span></span>` : null}</div><${Separator} .space=${12} /><div class=${["scrollbar", content]}>${state.lnb === Lnb.preferences ? html`<div class=${section}><div class=${row}><div>${t("settings.relationshipDataTypeSync")}</div><div class=${vertical(16)}></div><${Switch} .value=${settings.relationshipDataTypeSync} .disabled=${readonly} .onChange=${handleChangeRelationshipDataTypeSync} /></div><div class=${row}><div>${t("settings.maxCommentWidth")}</div><div class=${vertical(16)}></div><${Switch} .value=${!maxWidthCommentDisabled} .disabled=${readonly} .onChange=${handleSwitchMaxWidthComment} /><div class=${vertical(8)}></div><${TextInput} .title=${t("settings.maxCommentWidth")} .placeholder=${t("settings.maxCommentWidth")} .width=${45} .value=${maxWidthCommentDisabled ? toMaxWidthCommentFormat(60) : toMaxWidthCommentFormat(settings.maxWidthComment)} .disabled=${readonly || maxWidthCommentDisabled} .numberOnly=${true} .onChange=${readonly ? void 0 : handleChangeMaxWidthComment} /></div><div class=${lockSection}><div>${t("settings.lockHeading")}</div><${Separator} .space=${12} /><div class=${lockList}>${lockSettingRows.map((row) => {
+			const locked = isSettingLocked(settings.lockSettings, row.lockSettingType);
+			const name = t(row.nameKey);
+			return html`<div class=${lockRow}><div class=${lockName}>${name}</div><div class=${lockControl}><div class=${lockValue} ?data-locked=${locked} title=${locked ? t("settings.lockedValue") : t("settings.currentValue")}><span .dir="auto">${row.toText(locked ? settings.lockedValues : liveValues, i18n.value)}</span></div><button class=${lockButton} type="button" title=${locked ? t("settings.unlockSetting", { name }) : t("settings.lockSetting", { name })} aria-pressed=${locked ? "true" : "false"} ?data-locked=${locked} ?disabled=${readonly} @click=${readonly ? null : () => handleChangeLock(row.lockSettingType, !locked)}>${locked ? html`<${Icon} .name="lock" .size=${14} />` : html`<${Icon} .name="lock-open" .size=${14} />`}</button></div></div>`;
+		})}</div></div><div class=${columnOrderSection}><div>${t("settings.columnOrder")}</div><${Separator} .space=${12} /><div class=${columnOrderList} @dragenter=${onPrevent} @dragover=${onPrevent}>${repeat(settings.columnOrder, (columnType) => columnType, (columnType) => html`<div class=${columnOrderItem} ?data-readonly=${readonly} draggable=${readonly ? "false" : "true"} data-id=${columnType} @dragstart=${readonly ? null : handleDragstartColumnOrder}><${Menu} .icon=${readonly ? null : html`<${Icon} .name="grip-vertical" .size=${14} />`} .name=${t(ColumnTypeToMessageKey[columnType])} /></div>`)}</div></div></div>` : state.lnb === Lnb.shortcuts ? html`<${Shortcuts} />` : null}</div></div></div>`;
+	};
+};
+//#endregion
+export { Settings as default };

package/dist/components/settings/Settings.styles.d.ts

@@ -1,6 +1,7 @@
 export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const lnbArea: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const contentArea: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const header: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const content: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const section: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const row: import('@dineug/r-html').CSSTemplateLiterals;

package/dist/components/settings/Settings.styles.js

@@ -0,0 +1,158 @@
+import { css } from "../../r-html/dist/template/css.js";
+//#region src/components/settings/Settings.styles.ts
+var root = css`
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  padding: 32px;
+  background-color: var(--context-menu-background);
+
+  .column-order-move {
+    transition: transform 0.3s;
+  }
+`;
+var lnbArea = css`
+  display: flex;
+  width: 200px;
+  height: 100%;
+  overflow: hidden;
+`;
+var contentArea = css`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  padding-inline-start: 16px;
+`;
+var header = css`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+var content = css`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  flex-flow: wrap;
+`;
+var section = css`
+  margin-block: 0 32px;
+  margin-inline: 0 32px;
+  min-width: 300px;
+`;
+var row = css`
+  display: flex;
+  white-space: nowrap;
+  height: 24px;
+  align-items: center;
+  margin-bottom: 16px;
+`;
+var vertical = (size) => css`
+  width: ${size}px;
+  height: 100%;
+`;
+var lockSection = css`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+`;
+var lockList = css`
+  display: grid;
+  grid-template-columns: minmax(140px, max-content) max-content;
+  grid-auto-rows: 28px;
+  align-items: center;
+  white-space: nowrap;
+`;
+var lockRow = css`
+  display: contents;
+`;
+var lockName = css`
+  padding-inline-end: 12px;
+`;
+var lockControl = css`
+  display: flex;
+  align-items: center;
+`;
+var lockValue = css`
+  min-width: 120px;
+  margin-inline-end: 8px;
+  color: var(--placeholder);
+
+  &[data-locked] {
+    color: var(--foreground);
+  }
+`;
+var lockButton = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  color: var(--placeholder);
+  cursor: pointer;
+
+  &[data-locked] {
+    color: var(--active);
+  }
+
+  &:not(:disabled):hover {
+    background-color: var(--context-menu-hover);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--input-active);
+    outline-offset: 1px;
+  }
+`;
+var columnOrderSection = css`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+`;
+var columnOrderList = css`
+  display: flex;
+  flex-direction: column;
+`;
+var columnOrderItem = css`
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  height: 32px;
+  cursor: move;
+  border-radius: 4px;
+
+  &:hover {
+    background-color: var(--context-menu-hover);
+    color: var(--active);
+  }
+
+  &.none-hover {
+    background-color: transparent;
+    color: var(--foreground);
+  }
+
+  &.dragging {
+    opacity: 0.5;
+  }
+
+  &[data-readonly] {
+    cursor: default;
+  }
+
+  &[data-readonly]:hover {
+    background-color: transparent;
+    color: var(--foreground);
+  }
+`;
+//#endregion
+export { columnOrderItem, columnOrderList, columnOrderSection, content, contentArea, header, lnbArea, lockButton, lockControl, lockList, lockName, lockRow, lockSection, lockValue, root, row, section, vertical };

package/dist/components/settings/columnTypeLabels.js

@@ -0,0 +1,15 @@
+import { ColumnType } from "../../constants/schema.js";
+//#region src/components/settings/columnTypeLabels.ts
+var ColumnTypeToMessageKey = {
+	[ColumnType.columnName]: "common.column.name",
+	[ColumnType.columnLogicalName]: "common.column.logicalName",
+	[ColumnType.columnDataType]: "common.column.dataType",
+	[ColumnType.columnDomain]: "common.column.domain",
+	[ColumnType.columnDefault]: "common.column.default",
+	[ColumnType.columnComment]: "common.column.comment",
+	[ColumnType.columnAutoIncrement]: "common.column.autoIncrement",
+	[ColumnType.columnUnique]: "common.column.unique",
+	[ColumnType.columnNotNull]: "common.column.notNull"
+};
+//#endregion
+export { ColumnTypeToMessageKey };