@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/components/generator-code/generator-code-context-menu/GeneratorCodeContextMenu.js

@@ -0,0 +1,49 @@
+import { KeyBindingName } from "../../../utils/keyboard-shortcut/index.js";
+import { onMounted } from "../../../r-html/dist/render/part/node/component/hooks.js";
+import { html } from "../../../r-html/dist/render/index.js";
+import { useAppContext } from "../../appContext.js";
+import { useI18n } from "../../localeContext.js";
+import Icon from "../../primitives/icon/Icon.js";
+import { useUnmounted } from "../../../hooks/useUnmounted.js";
+import ContextMenu from "../../primitives/context-menu/ContextMenu.js";
+import SubmenuChevron from "../../primitives/context-menu/submenu-chevron/SubmenuChevron.js";
+import { menuLabel } from "../../../i18n/menuLabel.js";
+import { createDatabaseMenus } from "../../erd/erd-context-menu/menus/databaseMenus.js";
+import { resolvePanel } from "../../schema-sql/schemaSQLView.js";
+import { generatorCodeViewOf, toggleGeneratorCodePanel } from "../generatorCodeView.js";
+import { readsBracket } from "../languageSettings.js";
+import { createBracketMenus } from "../../schema-sql/schema-sql-context-menu/menus/bracketMenus.js";
+import { createColumnNameCaseMenus } from "./menus/columnNameCaseMenus.js";
+import { createLanguageMenus } from "./menus/languageMenus.js";
+import { createTableNameCaseMenus } from "./menus/tableNameCaseMenus.js";
+//#region src/components/generator-code/generator-code-context-menu/GeneratorCodeContextMenu.tsx
+var GeneratorCodeContextMenu = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const chevronRightIcon = html`<${SubmenuChevron} />`;
+	const { addUnsubscribe } = useUnmounted();
+	onMounted(() => {
+		const { shortcut$ } = app.value;
+		addUnsubscribe(shortcut$.subscribe(({ type }) => {
+			type === KeyBindingName.stop && props.onClose();
+		}));
+	});
+	const handleTogglePanel = () => {
+		toggleGeneratorCodePanel(app.value);
+		props.onClose();
+	};
+	const handleSave = () => {
+		props.onSave?.();
+		props.onClose();
+	};
+	const renderChoices = (menus, literal) => html`${menus.map((menu) => html`<${ContextMenu.Item} .onClick=${menu.onClick} .children=${html`<${ContextMenu.Menu} .icon=${menu.checked ? html`<${Icon} .name="check" .size=${14} />` : null} .name=${menuLabel(i18n.value, menu)} .literal=${literal} />`} />`)}`;
+	return () => {
+		const { t } = i18n.value;
+		const { store } = app.value;
+		const { language } = store.state.settings;
+		const panelOpen = props.full && resolvePanel(generatorCodeViewOf(app.value), store.state.editor.viewport.width) === "open";
+		return html`<${ContextMenu.Root} .children=${html`<${ContextMenu.Item} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="code" .size=${14} />`} .name=${t("common.codeLanguage")} .right=${chevronRightIcon} />`} .subChildren=${html`${createLanguageMenus(app.value).map((menu) => html`${menu.separated ? html`<${ContextMenu.Separator} />` : null}<${ContextMenu.Item} .onClick=${menu.onClick} .children=${html`<${ContextMenu.Menu} .icon=${menu.checked ? html`<${Icon} .name="check" .size=${14} />` : null} .name=${menu.name} .literal=${true} />`} />`)}`} /><${ContextMenu.Item} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="database" .size=${14} />`} .name=${t("common.database")} .right=${chevronRightIcon} />`} .subChildren=${renderChoices(createDatabaseMenus(app.value), true)} /><${ContextMenu.Item} .children=${html`<${ContextMenu.Menu} .name=${t("common.tableNameCase")} .right=${chevronRightIcon} />`} .subChildren=${html`${createTableNameCaseMenus(app.value).map((menu) => html`<${ContextMenu.Item} .onClick=${menu.onClick} .children=${html`<${ContextMenu.Menu} .icon=${menu.checked ? html`<${Icon} .name="check" .size=${14} />` : null} .name=${menuLabel(i18n.value, menu)} />`} />`)}`} /><${ContextMenu.Item} .children=${html`<${ContextMenu.Menu} .name=${t("common.columnNameCase")} .right=${chevronRightIcon} />`} .subChildren=${html`${createColumnNameCaseMenus(app.value).map((menu) => html`<${ContextMenu.Item} .onClick=${menu.onClick} .children=${html`<${ContextMenu.Menu} .icon=${menu.checked ? html`<${Icon} .name="check" .size=${14} />` : null} .name=${menuLabel(i18n.value, menu)} />`} />`)}`} />${readsBracket(language) ? html`<${ContextMenu.Item} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="brackets" .size=${14} />`} .name=${t("common.bracket")} .right=${chevronRightIcon} />`} .subChildren=${renderChoices(createBracketMenus(app.value), false)} />` : null}${props.full ? html`<${ContextMenu.Item} .onClick=${handleTogglePanel} .children=${html`<${ContextMenu.Menu} .icon=${panelOpen ? html`<${Icon} .name="check" .size=${14} />` : null} .name=${t("code.optionsPanel")} />`} /><${ContextMenu.Item} .onClick=${handleSave} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="download" .size=${14} />`} .name=${t("code.saveFile")} />`} />` : null}`} />`;
+	};
+};
+//#endregion
+export { GeneratorCodeContextMenu as default };

package/dist/components/generator-code/generator-code-context-menu/menus/columnNameCaseMenus.js

@@ -0,0 +1,37 @@
+import { NameCase } from "../../../../constants/schema.js";
+import { changeColumnNameCaseAction } from "../../../../engine/modules/settings/atom.actions.js";
+//#region src/components/generator-code/generator-code-context-menu/menus/columnNameCaseMenus.ts
+var menus = [
+	{
+		name: "Pascal",
+		value: NameCase.pascalCase
+	},
+	{
+		name: "Camel",
+		value: NameCase.camelCase
+	},
+	{
+		name: "Snake",
+		value: NameCase.snakeCase
+	},
+	{
+		name: "None",
+		labelKey: "common.none",
+		value: NameCase.none
+	}
+];
+function createColumnNameCaseMenus({ store }) {
+	const { settings } = store.state;
+	return menus.map((menu) => {
+		return {
+			checked: menu.value === settings.columnNameCase,
+			name: menu.name,
+			labelKey: menu.labelKey,
+			onClick: () => {
+				store.dispatch(changeColumnNameCaseAction({ value: menu.value }));
+			}
+		};
+	});
+}
+//#endregion
+export { createColumnNameCaseMenus, menus };

package/dist/components/generator-code/generator-code-context-menu/menus/languageMenus.js

@@ -0,0 +1,115 @@
+import { Language } from "../../../../constants/schema.js";
+import { changeLanguageAction } from "../../../../engine/modules/settings/atom.actions.js";
+//#region src/components/generator-code/generator-code-context-menu/menus/languageMenus.ts
+var menuGroups = [
+	[
+		{
+			name: "C#",
+			value: Language.csharp
+		},
+		{
+			name: "Go",
+			value: Language.Go
+		},
+		{
+			name: "Java",
+			value: Language.Java
+		},
+		{
+			name: "Kotlin",
+			value: Language.Kotlin
+		},
+		{
+			name: "PHP",
+			value: Language.PHP
+		},
+		{
+			name: "Rust",
+			value: Language.Rust
+		},
+		{
+			name: "Scala",
+			value: Language.Scala
+		},
+		{
+			name: "Swift",
+			value: Language.Swift
+		},
+		{
+			name: "TypeScript",
+			value: Language.TypeScript
+		}
+	],
+	[
+		{
+			name: "Doctrine",
+			value: Language.Doctrine
+		},
+		{
+			name: "Drizzle",
+			value: Language.Drizzle
+		},
+		{
+			name: "JPA",
+			value: Language.JPA
+		},
+		{
+			name: "SeaORM",
+			value: Language.SeaORM
+		},
+		{
+			name: "Sequelize",
+			value: Language.Sequelize
+		},
+		{
+			name: "SQLAlchemy",
+			value: Language.SQLAlchemy
+		},
+		{
+			name: "TypeORM",
+			value: Language.TypeORM
+		}
+	],
+	[
+		{
+			name: "AML",
+			value: Language.AML
+		},
+		{
+			name: "DBML",
+			value: Language.DBML
+		},
+		{
+			name: "GraphQL",
+			value: Language.GraphQL
+		},
+		{
+			name: "JSON Schema",
+			value: Language.JSONSchema
+		},
+		{
+			name: "Mermaid",
+			value: Language.Mermaid
+		},
+		{
+			name: "Zod",
+			value: Language.Zod
+		}
+	]
+];
+var menus = menuGroups.flat();
+function createLanguageMenus({ store }) {
+	const { settings } = store.state;
+	return menuGroups.flatMap((group, groupIndex) => group.map((menu, index) => {
+		return {
+			checked: menu.value === settings.language,
+			name: menu.name,
+			separated: groupIndex > 0 && index === 0,
+			onClick: () => {
+				store.dispatch(changeLanguageAction({ value: menu.value }));
+			}
+		};
+	}));
+}
+//#endregion
+export { createLanguageMenus, menuGroups, menus };

package/dist/components/generator-code/generator-code-context-menu/menus/tableNameCaseMenus.js

@@ -0,0 +1,37 @@
+import { NameCase } from "../../../../constants/schema.js";
+import { changeTableNameCaseAction } from "../../../../engine/modules/settings/atom.actions.js";
+//#region src/components/generator-code/generator-code-context-menu/menus/tableNameCaseMenus.ts
+var menus = [
+	{
+		name: "Pascal",
+		value: NameCase.pascalCase
+	},
+	{
+		name: "Camel",
+		value: NameCase.camelCase
+	},
+	{
+		name: "Snake",
+		value: NameCase.snakeCase
+	},
+	{
+		name: "None",
+		labelKey: "common.none",
+		value: NameCase.none
+	}
+];
+function createTableNameCaseMenus({ store }) {
+	const { settings } = store.state;
+	return menus.map((menu) => {
+		return {
+			checked: menu.value === settings.tableNameCase,
+			name: menu.name,
+			labelKey: menu.labelKey,
+			onClick: () => {
+				store.dispatch(changeTableNameCaseAction({ value: menu.value }));
+			}
+		};
+	});
+}
+//#endregion
+export { createTableNameCaseMenus, menus };

package/dist/components/generator-code/generator-code-options/GeneratorCodeOptions.d.ts

@@ -3,14 +3,15 @@ import { FC } from '@dineug/r-html';
 export declare const GENERATOR_CODE_OPTIONS_ID = "generator-code-options";
 export type GeneratorCodeOptionsProps = {
     isDarkMode: boolean;
+    readonly: boolean;
     onHide: () => void;
     onSave: () => void;
     onCopy: () => void;
 };
 /**
- * The options beside the generated code: the settings the document saves that
- * change it, each dimmed while the language ignores it, then the buttons that
- * save and copy the text.
+ * The options beside the generated code: the settings that change it, which the
+ * document saves, or a readonly reader's screen alone, each dimmed while the
+ * language ignores it, then the buttons that save and copy the text.
  */
 declare const GeneratorCodeOptions: FC<GeneratorCodeOptionsProps>;
 export default GeneratorCodeOptions;

package/dist/components/generator-code/generator-code-options/GeneratorCodeOptions.js

@@ -0,0 +1,122 @@
+import { html } from "../../../r-html/dist/render/index.js";
+import { changeBracketTypeAction, changeColumnNameCaseAction, changeDatabaseAction, changeLanguageAction, changeTableNameCaseAction } from "../../../engine/modules/settings/atom.actions.js";
+import { useAppContext } from "../../appContext.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 { menuLabel } from "../../../i18n/menuLabel.js";
+import { menus } from "../../erd/erd-context-menu/menus/databaseMenus.js";
+import { readsBracket, readsDatabase, readsNameCases } from "../languageSettings.js";
+import { menus as menus$1 } from "../../schema-sql/schema-sql-context-menu/menus/bracketMenus.js";
+import { menus as menus$2 } from "../generator-code-context-menu/menus/columnNameCaseMenus.js";
+import { menuGroups, menus as menus$3 } from "../generator-code-context-menu/menus/languageMenus.js";
+import { menus as menus$4 } from "../generator-code-context-menu/menus/tableNameCaseMenus.js";
+import Select from "../../primitives/select/Select.js";
+import { action, actions, body, caption, column, foot, group, head, icon, note, panel, title } from "../../schema-sql/schema-sql-options/SchemaSQLOptions.styles.js";
+import { keepSpace } from "../../schema-sql/schema-sql-options/SchemaSQLOptions.js";
+import { name, unused } from "./GeneratorCodeOptions.styles.js";
+//#region src/components/generator-code/generator-code-options/GeneratorCodeOptions.tsx
+var GENERATOR_CODE_OPTIONS_ID = "generator-code-options";
+var TITLE_ID = "generator-code-options-title";
+var DATABASE_NOTE_ID = "generator-code-database-unused";
+var NAME_CASES_NOTE_ID = "generator-code-name-cases-unused";
+var LEFT_TO_RIGHT_MARK = "‎";
+var GeneratorCodeOptions = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const dispatchOf = (create) => (value) => {
+		app.value.store.dispatch(create({ value }));
+	};
+	const handleChange = (setting) => (event) => {
+		setting.onChange(Number(event.target.value));
+	};
+	const renderSetting = (setting) => {
+		const { t, dir } = i18n.value;
+		const labelOf = (choice) => setting.leftToRight && dir === "rtl" ? `${choice.label}${LEFT_TO_RIGHT_MARK}` : choice.label;
+		return html`<div class=${[
+			"generator-code-options-setting",
+			column,
+			setting.noteId ? unused : null
+		]} data-unused=${setting.noteId ? "true" : "false"}><label class=${name} .htmlFor=${setting.id}>${t(setting.labelKey)}</label><${Select} .dimmed=${Boolean(setting.noteId)} .children=${html`<select id=${setting.id} aria-describedby=${setting.noteId ?? ""} @change=${handleChange(setting)}>${setting.choices.map((choice) => html`${choice.separated ? html`<hr />` : null}<option .value=${String(choice.value)} .selected=${choice.value === setting.value}>${labelOf(choice)}</option>`)}</select>`} /></div>`;
+	};
+	const renderNote = (id, text) => html`<p class=${["generator-code-options-unused", note]} id=${id}>${text}</p>`;
+	return () => {
+		const { store } = app.value;
+		const { settings } = store.state;
+		const { t, dir } = i18n.value;
+		const theme = props.isDarkMode ? "dark" : "light";
+		const language = settings.language;
+		const notUsed = t("code.notUsedBy", { language: menus$3.find((menu) => menu.value === language)?.name ?? "" });
+		const databaseUnused = !readsDatabase(language);
+		const nameCasesUnused = !readsNameCases(language);
+		const caption$1 = props.readonly ? t("schemaSql.thisWindowOnly") : t("code.savedInDocument");
+		const nameCases = (menus) => menus.map((menu) => ({
+			value: menu.value,
+			label: menuLabel(i18n.value, menu)
+		}));
+		const languageSetting = {
+			id: "generator-code-language",
+			labelKey: "common.codeLanguage",
+			value: language,
+			choices: menuGroups.flatMap((group, groupIndex) => group.map((menu, index) => ({
+				value: menu.value,
+				label: menu.name,
+				separated: groupIndex > 0 && index === 0
+			}))),
+			leftToRight: true,
+			onChange: dispatchOf(changeLanguageAction)
+		};
+		const database = {
+			id: "generator-code-database",
+			labelKey: "common.database",
+			value: settings.database,
+			choices: menus.map((menu) => ({
+				value: menu.value,
+				label: menu.name
+			})),
+			noteId: databaseUnused ? DATABASE_NOTE_ID : void 0,
+			onChange: dispatchOf(changeDatabaseAction)
+		};
+		const tableNameCase = {
+			id: "generator-code-table-name-case",
+			labelKey: "common.tableNameCase",
+			value: settings.tableNameCase,
+			choices: nameCases(menus$4),
+			noteId: nameCasesUnused ? NAME_CASES_NOTE_ID : void 0,
+			onChange: dispatchOf(changeTableNameCaseAction)
+		};
+		const columnNameCase = {
+			id: "generator-code-column-name-case",
+			labelKey: "common.columnNameCase",
+			value: settings.columnNameCase,
+			choices: nameCases(menus$2),
+			noteId: tableNameCase.noteId,
+			onChange: dispatchOf(changeColumnNameCaseAction)
+		};
+		const bracket = {
+			id: "generator-code-bracket",
+			labelKey: "common.bracket",
+			value: settings.bracketType,
+			choices: menus$1.map((menu) => ({
+				value: menu.value,
+				label: menuLabel(i18n.value, menu)
+			})),
+			onChange: dispatchOf(changeBracketTypeAction)
+		};
+		return html`<aside class=${["generator-code-options", panel]} id=${GENERATOR_CODE_OPTIONS_ID} .dir=${dir} aria-labelledby=${TITLE_ID} style=${{ "color-scheme": theme }} @keydown=${keepSpace}><div class=${head}><span class=${title} id=${TITLE_ID}>${t("common.tab.codeGenerator")}</span><button type="button" class=${["generator-code-options-hide", icon]} aria-label=${t("code.hideOptions")} title=${t("code.hideOptions")} aria-expanded="true" aria-controls=${GENERATOR_CODE_OPTIONS_ID} @click=${props.onHide}><${Icon} .name="panel-right-close" .size=${16} /></button></div><div class=${["scrollbar", body]}><section class=${group} role="group" aria-label=${caption$1}><span class=${caption}>${caption$1}</span>${renderSetting(languageSetting)}${renderSetting(database)}${databaseUnused ? renderNote(DATABASE_NOTE_ID, notUsed) : null}${renderSetting(tableNameCase)}${renderSetting(columnNameCase)}${nameCasesUnused ? renderNote(NAME_CASES_NOTE_ID, notUsed) : null}${readsBracket(language) ? renderSetting(bracket) : null}</section></div><div class=${foot}><div class=${actions}><button type="button" class=${[
+			"generator-code-options-save",
+			button,
+			solid,
+			size2,
+			action
+		]} @click=${props.onSave}><${Icon} .name="download" .size=${14} /><span>${t("code.saveFile")}</span></button><button type="button" class=${[
+			"generator-code-options-copy",
+			button,
+			soft,
+			size2,
+			action
+		]} @click=${props.onCopy}>${t("code.copy")}</button></div></div></aside>`;
+	};
+};
+//#endregion
+export { GENERATOR_CODE_OPTIONS_ID, GeneratorCodeOptions as default };

package/dist/components/generator-code/generator-code-options/GeneratorCodeOptions.styles.js

@@ -0,0 +1,12 @@
+import { css } from "../../../r-html/dist/template/css.js";
+//#region src/components/generator-code/generator-code-options/GeneratorCodeOptions.styles.ts
+var name = css`
+  overflow-wrap: anywhere;
+`;
+var unused = css`
+  & label {
+    color: var(--placeholder);
+  }
+`;
+//#endregion
+export { name, unused };

package/dist/components/generator-code/generatorCodeView.js

@@ -0,0 +1,17 @@
+import { observable } from "../../r-html/dist/observable/index.js";
+import { togglePanel } from "../schema-sql/schemaSQLView.js";
+//#region src/components/generator-code/generatorCodeView.ts
+var views = /* @__PURE__ */ new WeakMap();
+function generatorCodeViewOf({ store }) {
+	let view = views.get(store);
+	if (!view) {
+		view = observable({ panel: "unset" });
+		views.set(store, view);
+	}
+	return view;
+}
+function toggleGeneratorCodePanel(app) {
+	togglePanel(generatorCodeViewOf(app), app.store.state.editor.viewport.width);
+}
+//#endregion
+export { generatorCodeViewOf, toggleGeneratorCodePanel };

package/dist/components/generator-code/languageSettings.js

@@ -0,0 +1,48 @@
+import { Language } from "../../constants/schema.js";
+//#region src/components/generator-code/languageSettings.ts
+var LanguageToExtensionMap = {
+	[Language.csharp]: ".cs",
+	[Language.Go]: ".go",
+	[Language.Java]: ".java",
+	[Language.Kotlin]: ".kt",
+	[Language.PHP]: ".php",
+	[Language.Rust]: ".rs",
+	[Language.Scala]: ".scala",
+	[Language.Swift]: ".swift",
+	[Language.TypeScript]: ".ts",
+	[Language.Doctrine]: ".php",
+	[Language.Drizzle]: ".ts",
+	[Language.JPA]: ".java",
+	[Language.SeaORM]: ".rs",
+	[Language.Sequelize]: ".ts",
+	[Language.SQLAlchemy]: ".py",
+	[Language.TypeORM]: ".ts",
+	[Language.AML]: ".aml",
+	[Language.DBML]: ".dbml",
+	[Language.GraphQL]: ".graphql",
+	[Language.JSONSchema]: ".json",
+	[Language.Mermaid]: ".mmd",
+	[Language.Zod]: ".ts"
+};
+var codeFileExtension = (language) => LanguageToExtensionMap[language] ?? ".txt";
+var DATABASE_IGNORED = [
+	Language.DBML,
+	Language.AML,
+	Language.Mermaid
+];
+var NAME_CASES_IGNORED = [
+	Language.SeaORM,
+	Language.DBML,
+	Language.AML,
+	Language.Mermaid
+];
+var BRACKET_READ = [
+	Language.Doctrine,
+	Language.JPA,
+	Language.SeaORM
+];
+var readsDatabase = (language) => !DATABASE_IGNORED.includes(language);
+var readsNameCases = (language) => !NAME_CASES_IGNORED.includes(language);
+var readsBracket = (language) => BRACKET_READ.includes(language);
+//#endregion
+export { LanguageToExtensionMap, codeFileExtension, readsBracket, readsDatabase, readsNameCases };

package/dist/components/global-styles/GlobalStyles.js

@@ -0,0 +1,18 @@
+import { html } from "../../r-html/dist/render/index.js";
+import { setGlobalStyleOrder } from "../../r-html/dist/template/vCSSStyleSheet.js";
+import { typographyStyle } from "../../styles/typography.styles.js";
+import { fontsStyle } from "../../styles/fonts.styles.js";
+import { resetStyle } from "../../styles/reset.styles.js";
+import { scrollbarStyle } from "../../styles/scrollbar.styles.js";
+//#region src/components/global-styles/GlobalStyles.ts
+setGlobalStyleOrder([
+	resetStyle,
+	fontsStyle,
+	typographyStyle,
+	scrollbarStyle
+]);
+var GlobalStyles = () => {
+	return () => html``;
+};
+//#endregion
+export { GlobalStyles as default };

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

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