@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/components/table-view/column/column-logical-name/ColumnLogicalName.js

@@ -0,0 +1,96 @@
+import { isComposing } from "../../../../utils/keyboard-shortcut/index.js";
+import { query } from "../../../../erd-editor-schema/dist/query/index.js";
+import { onUnmounted } 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 { ref } from "../../../../r-html/dist/render/directives/attribute/ref.js";
+import { repeat } from "../../../../r-html/dist/render/directives/node/repeat.js";
+import { normalizeDictionaryName } from "../../../../engine/modules/dictionary/dictionaryIndex.js";
+import { deriveColumnNameAction$, deriveTableNameAction$, setColumnLogicalNameAction$, setTableLogicalNameAction$ } from "../../../../engine/modules/dictionary/generator.actions.js";
+import { useAppContext } from "../../../appContext.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 { hint, hintItem, root } from "./ColumnLogicalName.styles.js";
+import { useHintList } from "../useHintList.js";
+import { completeTerms, getTermIndex } from "../../../../engine/modules/dictionary/termIndex.js";
+//#region src/components/table-view/column/column-logical-name/ColumnLogicalName.tsx
+function heldLogicalName(state, tableId, columnId) {
+	const { doc, collections } = state;
+	if (!doc.tableIds.includes(tableId)) return null;
+	const table = query(collections).collection("tableEntities").selectById(tableId);
+	if (!table) return null;
+	if (columnId === null) return table.logicalName;
+	if (!table.columnIds.includes(columnId)) return null;
+	return query(collections).collection("tableColumnEntities").selectById(columnId)?.logicalName ?? null;
+}
+var ColumnLogicalName = (props, ctx) => {
+	const app = useAppContext(ctx, props.app?.value);
+	const state = observable({
+		rows: [],
+		index: -1
+	});
+	const list = useHintList(props, state);
+	const opened = props.value;
+	const setRows = (value) => {
+		const { store } = app.value;
+		state.index = -1;
+		state.rows = completeTerms(getTermIndex(store.state), value);
+	};
+	const handlePick = (index) => {
+		const term = state.rows[index];
+		if (!term) return;
+		const { store } = app.value;
+		const { tableId, columnId } = props;
+		const value = normalizeDictionaryName(term.name);
+		store.dispatch(columnId === null ? setTableLogicalNameAction$(tableId, value) : setColumnLogicalNameAction$(tableId, columnId, value));
+		setRows("");
+	};
+	const handleInput = (event) => {
+		const input = event.target;
+		input && setRows(input.value);
+		props.onInput?.(event);
+	};
+	const handleKeydown = (event) => {
+		if (isComposing(event) || !state.rows.length) 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);
+				props.onEditEnd?.();
+				break;
+			case "Escape":
+				event.preventDefault();
+				event.stopPropagation();
+				setRows("");
+		}
+	};
+	onUnmounted(() => {
+		const { store, lifecycle } = app.value;
+		if (lifecycle.destroyed) return;
+		const { tableId, columnId } = props;
+		const held = heldLogicalName(store.state, tableId, columnId);
+		if (held === null || held === opened) return;
+		store.dispatch(columnId === null ? deriveTableNameAction$(tableId) : deriveColumnNameAction$(tableId, columnId));
+	});
+	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=${props.value} .focus=${true} .edit=${true} .autofocus=${true} .onInput=${handleInput} .onKeydown=${handleKeydown} />${state.rows.length ? html`<div class=${[
+			"logical-name-hint",
+			"scrollbar",
+			hint
+		]} ${ref(list.hintList)} @mousedown=${list.handleHintMousedown} @touchstart=${list.handleHintTouchstart} @wheel=${list.handleHintWheel}>${repeat(state.rows, (term) => term.id, (term, index) => html`<div class=${[
+			"logical-name-hint-item",
+			hintItem,
+			{ selected: index === selected }
+		]} @click=${() => handlePick(index)}><span><${HighlightedText} .searchWords=${[props.value.trim()]} .textToHighlight=${term.name} /></span><${Kbd} .mini=${true} .shortcut="Enter" /></div>`)}</div>` : null}</div>`;
+	};
+};
+//#endregion
+export { ColumnLogicalName as default };

package/dist/components/table-view/column/column-logical-name/ColumnLogicalName.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-logical-name/ColumnLogicalName.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-not-null/ColumnNotNull.js

@@ -0,0 +1,15 @@
+import { ColumnOption } from "../../../../constants/schema.js";
+import { html } from "../../../../r-html/dist/render/index.js";
+import { bHas } from "../../../../utils/bit.js";
+import { useI18n } from "../../../localeContext.js";
+import { notNull } from "./ColumnNotNull.styles.js";
+//#region src/components/table-view/column/column-not-null/ColumnNotNull.tsx
+var ColumnNotNull = (props, ctx) => {
+	const i18n = useI18n(ctx);
+	return () => html`<div class=${[notNull, { focus: props.focus }]} style=${{
+		width: `35px`,
+		"min-width": `35px`
+	}} title=${i18n.value.t("common.column.notNull")} ?data-focus-border-bottom=${props.focus}>${bHas(props.options, ColumnOption.notNull) ? "N-N" : "NULL"}</div>`;
+};
+//#endregion
+export { ColumnNotNull as default };

package/dist/components/table-view/column/column-not-null/ColumnNotNull.styles.js

@@ -0,0 +1,22 @@
+import { css } from "../../../../r-html/dist/template/css.js";
+import { typography } from "../../../../styles/typography.styles.js";
+//#region src/components/table-view/column/column-not-null/ColumnNotNull.styles.ts
+var notNull = css`
+  display: inline-flex;
+  height: 20px;
+  box-sizing: border-box;
+  align-items: center;
+  color: var(--active);
+  background-color: transparent;
+  border-bottom: solid transparent 1.5px;
+  ${typography.paragraph};
+  line-height: normal;
+  cursor: default;
+  user-select: none;
+
+  &.focus {
+    border-bottom: solid var(--focus) 1.5px;
+  }
+`;
+//#endregion
+export { notNull };

package/dist/components/table-view/column/column-option/ColumnOption.js

@@ -0,0 +1,18 @@
+import { html } from "../../../../r-html/dist/render/index.js";
+import { option } from "./ColumnOption.styles.js";
+//#region src/components/table-view/column/column-option/ColumnOption.tsx
+var ColumnOption = (props, ctx) => {
+	return () => html`<div class=${[
+		option,
+		{
+			focus: props.focus,
+			checked: props.checked
+		},
+		props.class
+	]} style=${{
+		width: `${props.width}px`,
+		"min-width": `${props.width}px`
+	}} title=${props.title} ?data-focus-border-bottom=${props.focus}>${props.text}</div>`;
+};
+//#endregion
+export { ColumnOption as default };

package/dist/components/table-view/column/column-option/ColumnOption.styles.js

@@ -0,0 +1,26 @@
+import { css } from "../../../../r-html/dist/template/css.js";
+import { typography } from "../../../../styles/typography.styles.js";
+//#region src/components/table-view/column/column-option/ColumnOption.styles.ts
+var option = css`
+  display: inline-flex;
+  height: 20px;
+  box-sizing: border-box;
+  align-items: center;
+  color: var(--placeholder);
+  background-color: transparent;
+  border-bottom: solid transparent 1.5px;
+  ${typography.paragraph};
+  line-height: normal;
+  cursor: default;
+  user-select: none;
+
+  &.focus {
+    border-bottom: solid var(--focus) 1.5px;
+  }
+
+  &.checked {
+    color: var(--active);
+  }
+`;
+//#endregion
+export { option };

package/dist/components/table-view/column/columnViewText.js

@@ -0,0 +1,23 @@
+import { getLiveDomainName } from "../../../engine/modules/dictionary/membership.js";
+import { drawsDomainInTypeCell, isLogicalNameView } from "../../../engine/modules/editor/utils/nameView.js";
+//#region src/components/table-view/column/columnViewText.ts
+function logicalNameCellText(settings, { name, logicalName }, nameKey, { t }) {
+	if (!isLogicalNameView(settings)) return {
+		value: logicalName,
+		placeholder: t("common.placeholder.logicalName")
+	};
+	return {
+		value: logicalName,
+		placeholder: name.trim() ? name : t(nameKey)
+	};
+}
+function nameCellText(settings, column, i18n) {
+	return isLogicalNameView(settings) ? logicalNameCellText(settings, column, "common.placeholder.column", i18n) : {
+		value: column.name,
+		placeholder: i18n.t("common.placeholder.column")
+	};
+}
+var typeCellText = (state, column) => drawsDomainInTypeCell(state, column) ? getLiveDomainName(state, column.domainId) : column.dataType;
+var domainCellText = (state, column) => getLiveDomainName(state, column.domainId);
+//#endregion
+export { domainCellText, logicalNameCellText, nameCellText, typeCellText };

package/dist/components/table-view/column/useColumnCell.js

@@ -0,0 +1,117 @@
+import { isComposing } from "../../../utils/keyboard-shortcut/index.js";
+import { arrayHas } from "../../../utils/arrayHas.js";
+import { onMounted } from "../../../r-html/dist/render/part/node/component/hooks.js";
+import { observable, watch } from "../../../r-html/dist/observable/index.js";
+import { changeColumnDataTypeAction$ } from "../../../engine/modules/table-column/generator.actions.js";
+import { useUnmounted } from "../../../hooks/useUnmounted.js";
+import { DatabaseHintMap } from "../../../constants/sql/dataType/index.js";
+import { isEmpty } from "es-toolkit/compat";
+import Fues from "fuse.js";
+//#region src/components/table-view/column/useColumnCell.ts
+var hasAutocompleteKey = arrayHas([
+	"ArrowUp",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight",
+	"Tab",
+	"Enter"
+]);
+var NAME_CHAR = /[a-z0-9_]/;
+function isPastTypeName(hints, value) {
+	const typed = value.trimStart().toLowerCase();
+	const names = hints.map((hint) => hint.name.toLowerCase());
+	return !names.some((name) => name.startsWith(typed)) && names.some((name) => typed.length > name.length && typed.startsWith(name) && !NAME_CHAR.test(typed[name.length]));
+}
+function searchDataTypeHints(hints, value) {
+	const newValue = value.trim();
+	if (isEmpty(newValue) || isPastTypeName(hints, value)) return [];
+	return new Fues(hints, { keys: ["name"] }).search(newValue).map((result) => result.item);
+}
+function useColumnCell(props, app) {
+	const state = observable({
+		hints: [],
+		index: -1
+	});
+	const { addUnsubscribe } = useUnmounted();
+	const setHints = (value) => {
+		const { store } = app.value;
+		const { settings } = store.state;
+		const hints = DatabaseHintMap[settings.database] ?? [];
+		state.index = -1;
+		state.hints = searchDataTypeHints(hints, value);
+	};
+	const handleSelectHint = (index) => {
+		const hint = state.hints[index];
+		if (!hint) return;
+		const { store } = app.value;
+		store.dispatch(changeColumnDataTypeAction$({
+			id: props.columnId,
+			tableId: props.tableId,
+			value: hint.name
+		}));
+		setHints("");
+	};
+	const handleArrowUp = (event) => {
+		if (!state.hints.length) return;
+		event.preventDefault();
+		const index = state.index - 1;
+		state.index = index < 0 ? state.hints.length - 1 : index;
+	};
+	const handleArrowDown = (event) => {
+		if (!state.hints.length) return;
+		event.preventDefault();
+		const index = state.index + 1;
+		state.index = index > state.hints.length - 1 ? 0 : index;
+	};
+	const handleArrowLeft = (event) => {
+		state.index = -1;
+	};
+	const handleArrowRight = (event) => {
+		if (state.index === -1) return;
+		event.preventDefault();
+		handleSelectHint(state.index);
+	};
+	const handleTab = (event) => {
+		if (state.index === -1) return;
+		event.preventDefault();
+		event.stopPropagation();
+		handleSelectHint(state.index);
+	};
+	const handleEnter = (event) => {
+		if (state.index === -1) return;
+		event.stopPropagation();
+		handleSelectHint(state.index);
+		props.onEditEnd?.();
+	};
+	const keyMap = {
+		ArrowUp: handleArrowUp,
+		ArrowDown: handleArrowDown,
+		ArrowLeft: handleArrowLeft,
+		ArrowRight: handleArrowRight,
+		Tab: handleTab,
+		Enter: handleEnter
+	};
+	const handleKeydown = (event) => {
+		if (isComposing(event) || !hasAutocompleteKey(event.key)) return;
+		keyMap[event.key]?.(event);
+	};
+	onMounted(() => {
+		const { store } = app.value;
+		const { settings } = store.state;
+		addUnsubscribe(watch(props).subscribe((propName) => {
+			if (propName !== "edit") return;
+			!props.edit && setHints("");
+		}), watch(settings).subscribe((propName) => {
+			if (propName !== "database") return;
+			setHints(props.value);
+		}));
+	});
+	return {
+		state,
+		setHints,
+		handleSelectHint,
+		handleKeydown
+	};
+}
+//#endregion
+export { searchDataTypeHints, useColumnCell };

package/dist/components/table-view/column/useHintList.js

@@ -0,0 +1,83 @@
+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 { createRef } from "../../../r-html/dist/render/directives/attribute/ref.js";
+import { useUnmounted } from "../../../hooks/useUnmounted.js";
+import { lastCursorFocus } from "../../../utils/focus.js";
+//#region src/components/table-view/column/useHintList.ts
+function useHintList(props, state) {
+	const root = createRef();
+	const hintList = createRef();
+	const { addUnsubscribe } = useUnmounted();
+	let currentFocus = false;
+	let timerId;
+	let pendingBlur = null;
+	const handleFocus = () => {
+		currentFocus = true;
+	};
+	const settleFocusout = () => {
+		clearTimeout(timerId);
+		const event = pendingBlur;
+		if (!event) return;
+		pendingBlur = null;
+		const input = root.value?.querySelector("input");
+		currentFocus && input ? lastCursorFocus(input) : props.onBlur?.(event);
+	};
+	const handleFocusout = (event) => {
+		currentFocus = false;
+		pendingBlur = event;
+		clearTimeout(timerId);
+		timerId = setTimeout(settleFocusout, 1);
+	};
+	onUnmounted(settleFocusout);
+	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 keepIndexInView = () => {
+		const el = hintList.value;
+		if (!el || 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;
+	};
+	const handleState = (propName) => {
+		const el = hintList.value;
+		if (el && propName === "rows") el.scrollTop = 0;
+		if (propName === "index") keepIndexInView();
+	};
+	onMounted(() => {
+		addUnsubscribe(watch(state).subscribe(handleState));
+		keepIndexInView();
+	});
+	const step = (delta) => {
+		const { length } = state.rows;
+		if (!length) return;
+		const index = state.index + delta;
+		state.index = index < 0 ? length - 1 : index >= length ? 0 : index;
+	};
+	return {
+		root,
+		hintList,
+		handleFocus,
+		handleFocusout,
+		handleHintMousedown,
+		handleHintTouchstart,
+		handleHintWheel,
+		step
+	};
+}
+//#endregion
+export { useHintList };

package/dist/components/theme/Theme.d.ts

@@ -3,6 +3,11 @@ import { Theme } from '../../themes/tokens';
 export type ThemeProps = {
     theme: Theme;
 };
+/**
+ * The theme's tokens on its element: a sheet of its shadow root's own, which a
+ * strict CSP lets through, or a <style> element where the browser adopts no
+ * constructed sheet or the theme renders outside an element's shadow root.
+ */
 declare const Theme: FC<ThemeProps>;
 export default Theme;
 //# sourceMappingURL=Theme.d.ts.map

package/dist/components/theme/Theme.js

@@ -0,0 +1,20 @@
+import { onUnmounted } from "../../r-html/dist/render/part/node/component/hooks.js";
+import { html } from "../../r-html/dist/render/index.js";
+import { adoptHostSheet, canAdoptStyleSheets } from "../../r-html/dist/template/vCSSStyleSheet.js";
+import { themeToTokensString } from "../../themes/tokens.js";
+//#region src/components/theme/Theme.tsx
+var tokensRule = (theme) => `:host {
+${themeToTokensString(theme)}
+}`;
+var Theme = (props, ctx) => {
+	const sheet = canAdoptStyleSheets() ? new CSSStyleSheet() : null;
+	const drop = sheet ? adoptHostSheet(ctx.host, sheet) : null;
+	if (!sheet || !drop) return () => html`<style>${tokensRule(props.theme)}</style>`;
+	onUnmounted(drop);
+	return () => {
+		sheet.replaceSync(tokensRule(props.theme));
+		return null;
+	};
+};
+//#endregion
+export { Theme as default };

package/dist/components/theme-builder/ThemeBuilder.js

@@ -0,0 +1,90 @@
+import { KeyBindingName, toShortcutTitle } from "../../utils/keyboard-shortcut/index.js";
+import { onMounted } from "../../r-html/dist/render/part/node/component/hooks.js";
+import { nextTick } from "../../r-html/dist/observable/scheduler.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 { setThemeOptionsAction } from "../../utils/emitter.js";
+import { useAppContext } from "../appContext.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 { AccentColorList, Appearance, GrayColorList, Palette, SYSTEM_APPEARANCE } from "../../themes/radix-ui-theme.js";
+import { insetPastExplorer } from "../erd-editor/viewportLayout.js";
+import { appearanceButton, appearanceButtonGroup, close, color, header, palette, root, subTitle, title, vertical } from "./ThemeBuilder.styles.js";
+import { get } from "es-toolkit/compat";
+import { filter } from "rxjs";
+//#region src/components/theme-builder/ThemeBuilder.tsx
+var APPEARANCE_BUTTONS = [
+	{
+		appearance: SYSTEM_APPEARANCE,
+		icon: "monitor",
+		labelKey: "common.system"
+	},
+	{
+		appearance: Appearance.light,
+		icon: "sun",
+		labelKey: "common.light"
+	},
+	{
+		appearance: Appearance.dark,
+		icon: "moon-star",
+		labelKey: "common.dark"
+	}
+];
+var ThemeBuilder = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const { addUnsubscribe } = useUnmounted();
+	const handleClose = () => {
+		const { store } = app.value;
+		store.dispatch(changeOpenMapAction({ [Open.themeBuilder]: false }));
+	};
+	const handleCloseButton = () => {
+		handleClose();
+		nextTick(() => {
+			ctx.host.dispatchEvent(focusEvent());
+		});
+	};
+	const handleCloseKeydown = (event) => {
+		if (event.code === "Space" || event.key === "Enter") event.stopPropagation();
+	};
+	const handleToggle = () => {
+		const { store } = app.value;
+		const { editor: { openMap } } = store.state;
+		const opened = !openMap[Open.themeBuilder];
+		store.dispatch(changeOpenMapAction({ [Open.themeBuilder]: opened }));
+		if (opened) store.dispatch(changeOpenMapAction({
+			[Open.tableProperties]: false,
+			[Open.localePicker]: false
+		}));
+	};
+	const handleChangeAccentColor = (accentColor) => {
+		const { emitter } = app.value;
+		emitter.emit(setThemeOptionsAction({ accentColor }));
+	};
+	const handleChangeGrayColor = (grayColor) => {
+		const { emitter } = app.value;
+		emitter.emit(setThemeOptionsAction({ grayColor }));
+	};
+	const handleChangeAppearance = (appearance) => {
+		const { emitter } = app.value;
+		emitter.emit(setThemeOptionsAction({ appearance }));
+	};
+	onMounted(() => {
+		const { shortcut$, emitter } = app.value;
+		addUnsubscribe(shortcut$.pipe(filter(({ type }) => type === KeyBindingName.stop)).subscribe(handleClose), emitter.on({ openThemeBuilder: handleToggle }));
+	});
+	return () => {
+		const { store } = app.value;
+		const { editor: { openMap } } = store.state;
+		if (!openMap[Open.themeBuilder]) return null;
+		const { theme } = props;
+		const { t } = i18n.value;
+		const { keyBindingMap } = app.value;
+		return html`<div class=${["theme-builder", root]} style=${insetPastExplorer(store, i18n.value.dir)}><div class=${header}><div class=${title}>${t("common.theme")}</div><button class=${["theme-builder-close", close]} type="button" aria-label=${t("common.close")} title=${toShortcutTitle(keyBindingMap, t("common.close"), KeyBindingName.stop)} @click=${handleCloseButton} @keydown=${handleCloseKeydown}><${Icon} .name="x" .size=${14} /></button></div><div class=${subTitle}>${t("themeBuilder.accentColor")}</div><div class=${palette}>${AccentColorList.map((key) => html`<span class=${[color, { selected: key === theme.accentColor }]} style=${{ "background-color": get(Palette, [key, `${key}9`]) }} title=${key} @click=${() => handleChangeAccentColor(key)} />`)}</div><div class=${subTitle}>${t("themeBuilder.grayColor")}</div><div class=${palette}>${GrayColorList.map((key) => html`<span class=${[color, { selected: key === theme.grayColor }]} style=${{ "background-color": get(Palette, [key, `${key}9`]) }} title=${key} @click=${() => handleChangeGrayColor(key)} />`)}</div><div class=${subTitle}>${t("themeBuilder.appearance")}</div><div class=${appearanceButtonGroup}>${APPEARANCE_BUTTONS.map(({ appearance, icon, labelKey }) => html`<div class=${[appearanceButton, { selected: theme.appearance === appearance }]} @click=${() => handleChangeAppearance(appearance)}><${Icon} .name=${icon} /><span class=${vertical} /><span>${t(labelKey)}</span></div>`)}</div></div>`;
+	};
+};
+//#endregion
+export { APPEARANCE_BUTTONS, ThemeBuilder as default };