@dineug/erd-editor 4.1.0 → 5.0.0

package/dist/components/dictionary/domain-cell-editor/DomainCellEditor.js

@@ -0,0 +1,110 @@
+import { isComposing } 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 { repeat } from "../../../r-html/dist/render/directives/node/repeat.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 "../../table-view/column/column-domain/domainOptions.js";
+import { input, list, option, root } from "./DomainCellEditor.styles.js";
+//#region src/components/dictionary/domain-cell-editor/DomainCellEditor.tsx
+var MAX_OPTIONS = 8;
+var EDGE = 4;
+var ABOVE = {
+	top: "auto",
+	bottom: "100%",
+	marginTop: "0",
+	marginBottom: "2px"
+};
+var DomainCellEditor = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const { editor } = props;
+	const inputRef = createRef();
+	const listRef = createRef();
+	const state = observable({
+		typed: "",
+		rows: [],
+		index: -1,
+		above: false,
+		maxHeight: 26 * MAX_OPTIONS
+	});
+	const setRows = (typed) => {
+		const rows = searchDomainOptions(app.value.store.state, typed);
+		const linked = typed.trim() ? -1 : rows.findIndex(({ id }) => id === props.linkedId);
+		state.typed = typed;
+		state.rows = rows;
+		state.index = linked !== -1 ? linked : rows.length ? 0 : -1;
+	};
+	setRows(editor.mode === "replace" ? editor.initialValue : "");
+	let closed = false;
+	const close = (option) => {
+		if (closed) return;
+		closed = true;
+		editor.cancel();
+		if (option) props.onPick(option);
+		props.onClose();
+	};
+	editor.onClose(() => close(null));
+	const revealSelected = () => {
+		listRef.value?.querySelector("[aria-selected=\"true\"]")?.scrollIntoView({ block: "nearest" });
+	};
+	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;
+		nextTick(revealSelected);
+	};
+	const handleInput = (event) => {
+		const input = event.target;
+		if (input) setRows(input.value);
+	};
+	const handleKeydown = (event) => {
+		if (isComposing(event)) return;
+		switch (event.key) {
+			case "ArrowUp":
+			case "ArrowDown":
+				event.preventDefault();
+				event.stopPropagation();
+				step(event.key === "ArrowUp" ? -1 : 1);
+				break;
+			case "Enter":
+			case "Tab":
+				if (event.altKey || event.ctrlKey || event.metaKey) return;
+				event.preventDefault();
+				event.stopPropagation();
+				if (state.index !== -1) close(state.rows[state.index]);
+				else if (event.key === "Tab") close(null);
+		}
+	};
+	const keepFocus = (event) => event.preventDefault();
+	const place = () => {
+		const area = editor.container.parentElement;
+		if (!area) return;
+		const { top, bottom } = editor.rect;
+		const full = 26 * MAX_OPTIONS + 2;
+		const below = area.clientHeight - bottom - EDGE;
+		const above = top - EDGE;
+		state.above = below < full && above > below;
+		state.maxHeight = Math.max(26, Math.min(full, state.above ? above : below));
+	};
+	onMounted(() => {
+		place();
+		inputRef.value?.focus({ preventScroll: true });
+		nextTick(revealSelected);
+	});
+	return () => {
+		const selected = state.index;
+		return html`<div class=${["dictionary-domain-editor", root]} .dir="ltr"><input class=${input} ${ref(inputRef)} type="text" spellcheck="false" autocomplete="off" aria-label=${props.label} placeholder=${props.label} .value=${state.typed} @input=${handleInput} @keydown=${handleKeydown} />${state.rows.length ? html`<div class=${["scrollbar", list]} ${ref(listRef)} role="listbox" aria-label=${props.label} style=${{
+			maxHeight: `${state.maxHeight}px`,
+			...state.above ? ABOVE : {}
+		}} @mousedown=${keepFocus}>${repeat(state.rows, (option) => option.id, (option$1, index) => html`<div class=${option} role="option" aria-selected=${String(index === selected)} @click=${() => close(option$1)}><span>${option$1.id === "" ? i18n.value.t("common.none") : html`<${HighlightedText} .searchWords=${[state.typed.trim()]} .textToHighlight=${option$1.name} />`}</span><${Kbd} .mini=${true} .shortcut="Enter" /></div>`)}</div>` : null}</div>`;
+	};
+};
+//#endregion
+export { DomainCellEditor as default };

package/dist/components/dictionary/domain-cell-editor/DomainCellEditor.styles.d.ts

@@ -0,0 +1,7 @@
+/** The height of one domain in the list. */
+export declare const OPTION_HEIGHT = 26;
+export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const input: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const list: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const option: import('@dineug/r-html').CSSTemplateLiterals;
+//# sourceMappingURL=DomainCellEditor.styles.d.ts.map

package/dist/components/dictionary/domain-cell-editor/DomainCellEditor.styles.js

@@ -0,0 +1,65 @@
+import { css } from "../../../r-html/dist/template/css.js";
+import { floatingShadow } from "../../../styles/elevation.styles.js";
+import { TextFontFamily } from "../../../styles/fonts.styles.js";
+var root = css`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  font: 13px ${TextFontFamily};
+`;
+var input = css`
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0 7px;
+  border: 0;
+  outline: none;
+  color: var(--active);
+  background-color: var(--dictionary-background);
+  box-shadow: inset 0 0 0 2px var(--focus);
+  font: inherit;
+`;
+var list = css`
+  position: absolute;
+  z-index: 1;
+  top: 100%;
+  left: 0;
+  box-sizing: border-box;
+  min-width: 100%;
+  margin-top: 2px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  color: var(--active);
+  background-color: var(--dictionary-background);
+  border: 1px solid var(--dictionary-grid-line);
+  ${floatingShadow};
+  white-space: nowrap;
+`;
+var option = css`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 8px;
+  height: ${26}px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--dictionary-header-background);
+  }
+
+  &[aria-selected='true'] {
+    background-color: var(--dictionary-header-select);
+  }
+
+  & > .kbd {
+    margin-left: auto;
+    visibility: hidden;
+  }
+
+  &[aria-selected='true'] > .kbd {
+    visibility: visible;
+  }
+`;
+//#endregion
+export { input, list, option, root };

package/dist/components/dictionary/domain-cell-editor/openDomainCellEditor.d.ts

@@ -0,0 +1,9 @@
+import { EditorContext } from '@dineug/grid';
+import { DomainCellEditorProps } from './DomainCellEditor';
+/**
+ * Opens the domain picker of a term's domain cell in the grid's editor slot,
+ * and takes it out again once its edit has closed, by a pick or a cancel,
+ * before onClose runs.
+ */
+export declare function openDomainCellEditor(editor: EditorContext, { label, linkedId, onPick, onClose }: Omit<DomainCellEditorProps, 'editor'>): void;
+//# sourceMappingURL=openDomainCellEditor.d.ts.map

package/dist/components/dictionary/domain-cell-editor/openDomainCellEditor.js

@@ -0,0 +1,16 @@
+import { html, render } from "../../../r-html/dist/render/index.js";
+import DomainCellEditor from "./DomainCellEditor.js";
+//#region src/components/dictionary/domain-cell-editor/openDomainCellEditor.tsx
+function openDomainCellEditor(editor, { label, linkedId, onPick, onClose }) {
+	const host = document.createElement("div");
+	host.style.height = "100%";
+	editor.container.append(host);
+	const remove = () => {
+		render(host, null);
+		host.remove();
+		onClose();
+	};
+	render(host, html`<${DomainCellEditor} .editor=${editor} .label=${label} .linkedId=${linkedId} .onPick=${onPick} .onClose=${remove} />`);
+}
+//#endregion
+export { openDomainCellEditor };

package/dist/components/dictionary/gridTheme.d.ts

@@ -0,0 +1,18 @@
+import { CellStyle, GridTheme } from '@dineug/grid';
+import { DictionaryCheckLevel } from '../../engine/modules/dictionary/checks';
+import { Theme } from '../../themes/tokens';
+/**
+ * The theme the tab hands its grid. The grid redraws on a new object, so the
+ * one handed before comes back while every colour still matches, and only a
+ * theme change, light to dark or a new accent, makes another.
+ */
+export declare function toGridTheme(theme: Theme, previous?: Readonly<GridTheme>): Readonly<GridTheme>;
+/** The style a sheet gives a cell the checks mark, by the loudest level they find. */
+export type CellMarks = Readonly<Record<DictionaryCheckLevel, Readonly<CellStyle>>>;
+/**
+ * Each level's text on its own fill, from the tab's four mark tokens: the
+ * error pair and the warning pair. The marks handed before come back while
+ * both pairs match, so the tab hands the grid a new style getter only then.
+ */
+export declare function toCellMarks(theme: Theme, previous?: CellMarks): CellMarks;
+//# sourceMappingURL=gridTheme.d.ts.map

package/dist/components/dictionary/gridTheme.js

@@ -0,0 +1,51 @@
+//#region src/components/dictionary/gridTheme.ts
+var HEX = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+var SELECTION_ALPHA = "33";
+function selectionFillOf(color) {
+	const match = HEX.exec(color.trim());
+	if (!match) return "transparent";
+	const digits = match[1];
+	return `#${digits.length === 6 ? digits : [...digits].map((digit) => `${digit}${digit}`).join("")}${SELECTION_ALPHA}`;
+}
+function gridThemeOf(theme) {
+	return {
+		background: theme.dictionaryBackground,
+		headerBackground: theme.dictionaryHeaderBackground,
+		headerText: theme.foreground,
+		text: theme.active,
+		gridLine: theme.dictionaryGridLine,
+		frozenBorder: theme.grayColor7,
+		selectionFill: selectionFillOf(theme.accentColor9),
+		selectionBorder: theme.accentColor9,
+		activeCellBorder: theme.focus,
+		selectedHeaderBackground: theme.dictionaryHeaderSelect,
+		selectedHeaderText: theme.active,
+		fullSelectionBackground: theme.accentColor6,
+		readonlyBackground: theme.grayColor3,
+		scrollbarThumb: theme.scrollbarThumb,
+		scrollbarTrack: theme.scrollbarTrack
+	};
+}
+function toGridTheme(theme, previous) {
+	const next = gridThemeOf(theme);
+	if (!previous) return next;
+	return Object.keys(next).every((key) => previous[key] === next[key]) ? previous : next;
+}
+var sameStyle = (a, b) => a.color === b.color && a.background === b.background;
+function toCellMarks(theme, previous) {
+	const error = Object.freeze({
+		color: theme.dictionaryErrorForeground,
+		background: theme.dictionaryErrorBackground
+	});
+	const warning = Object.freeze({
+		color: theme.dictionaryWarningForeground,
+		background: theme.dictionaryWarningBackground
+	});
+	if (previous && sameStyle(previous.error, error) && sameStyle(previous.warning, warning)) return previous;
+	return Object.freeze({
+		error,
+		warning
+	});
+}
+//#endregion
+export { toCellMarks, toGridTheme };

package/dist/components/dictionary/sheets.d.ts

@@ -0,0 +1,65 @@
+import { GridColumn } from '@dineug/grid';
+import { AnyAction } from '@dineug/r-html';
+import { DictionaryFields, DictionaryKind } from '../../engine/modules/dictionary/actions';
+import { DictionaryCheckLevel } from '../../engine/modules/dictionary/checks';
+import { RootState } from '../../engine/state';
+import { I18n, PlainMessageKey } from '../../i18n/translate';
+import { ValuesType } from '../../internal-types';
+/**
+ * The tab's sheets in the order its bar lists them: the domains, the words
+ * and the terms, as a standard is built up, then their checks.
+ */
+export declare const DictionarySheet: {
+    readonly domain: "domain";
+    readonly word: "word";
+    readonly term: "term";
+    readonly check: "check";
+};
+export type DictionarySheet = ValuesType<typeof DictionarySheet>;
+export declare const DictionarySheetList: ReadonlyArray<DictionarySheet>;
+/** Whether the sheet lists a dictionary's own rows, which it edits, rather than the checks over them. */
+export declare const isEntrySheet: (sheet: DictionarySheet) => sheet is DictionaryKind;
+export declare const DictionarySheetLabelKey: Readonly<Record<DictionarySheet, PlainMessageKey>>;
+/** A field of a dictionary's rows, which is the id of its column on the sheet. */
+export type SheetField<K extends DictionaryKind = DictionaryKind> = (typeof DictionaryFields)[K][number];
+export type SheetColumnOptions = {
+    /** A read-only document makes every column read-only. */
+    readonly: boolean;
+    /** The widths a resize left, by column id, in place of each column's own. */
+    widths?: Readonly<Record<string, number>>;
+};
+/**
+ * A dictionary's columns, one per field in the order its rows hold them, each
+ * labelled in the reader's language. A term's domain column shows and takes
+ * the domain's name, which the commit reads back to the domain's id.
+ */
+export declare function sheetColumns(kind: DictionaryKind, { readonly, widths }: SheetColumnOptions, i18n?: Pick<I18n, 't'>): GridColumn[];
+/** The field a column of the sheet writes, or undefined for an id the sheet has no column of. */
+export declare function sheetField<K extends DictionaryKind>(kind: K, columnId: string): SheetField<K> | undefined;
+/**
+ * What a row's cell shows: the field as the row holds it, and for a term's
+ * domain the name of the domain it links while the document lists that one,
+ * else nothing; nothing too for an id with no row or a column the sheet lacks.
+ */
+export declare function sheetCellText(state: RootState, kind: DictionaryKind, id: string, columnId: string): string;
+/**
+ * How loud a row's cell shows what the checks find in it: an error, a warning,
+ * or null for nothing found, a column no check reads or an id with no row. It
+ * reads the dictionaries' indexes, so a draw marks only the cells it paints.
+ */
+export declare function sheetCellMark(state: RootState, kind: DictionaryKind, id: string, columnId: string): DictionaryCheckLevel | null;
+/** A text as a search compares it, composed and in lower case, so a match ignores both. */
+export declare const toSearchText: (text: string) => string;
+/**
+ * The ids of a sheet's rows, its listed rows in key order, those whose
+ * searched fields hold the search's text while it holds any; with no search
+ * the same frozen array comes back until the sheet is written.
+ */
+export declare function sheetRowIds(state: RootState, kind: DictionaryKind, search?: string): ReadonlyArray<string>;
+/**
+ * The sheets a batch raises: all four for a dictionary's write or a load,
+ * since a term shows its domain's name and the checks read every dictionary;
+ * the checks alone for a table's or a column's write or a name view switch.
+ */
+export declare function bumpedSheets(actions: ReadonlyArray<AnyAction>): ReadonlyArray<DictionarySheet>;
+//# sourceMappingURL=sheets.d.ts.map

package/dist/components/dictionary/sheets.js

@@ -0,0 +1,199 @@
+import { arrayHas } from "../../utils/arrayHas.js";
+import { ActionType, DictionaryFields, DictionaryKind } from "../../engine/modules/dictionary/actions.js";
+import { getLiveDomainName } from "../../engine/modules/dictionary/membership.js";
+import { ActionType as ActionType$1 } from "../../engine/modules/table-column/actions.js";
+import { dictionaryCache } from "../../engine/modules/dictionary/dictionaryIndex.js";
+import { selectDictionaryRow } from "../../engine/modules/dictionary/atom.actions.js";
+import { ActionType as ActionType$2 } from "../../engine/modules/editor/actions.js";
+import { ActionType as ActionType$3 } from "../../engine/modules/settings/actions.js";
+import { ActionType as ActionType$4 } from "../../engine/modules/table/actions.js";
+import { checkDictionaryRow, markOf } from "../../engine/modules/dictionary/checks.js";
+import { sourceI18n } from "../../i18n/source.js";
+import { isString } from "es-toolkit";
+//#region src/components/dictionary/sheets.ts
+var DictionarySheet = {
+	domain: DictionaryKind.domain,
+	word: DictionaryKind.word,
+	term: DictionaryKind.term,
+	check: "check"
+};
+var DictionarySheetList = Object.values(DictionarySheet);
+var isEntrySheet = (sheet) => sheet !== DictionarySheet.check;
+var DictionarySheetLabelKey = {
+	[DictionarySheet.word]: "dictionary.sheet.words",
+	[DictionarySheet.term]: "dictionary.sheet.terms",
+	[DictionarySheet.domain]: "dictionary.sheet.domains",
+	[DictionarySheet.check]: "dictionary.sheet.checks"
+};
+var SHEET_COLUMNS = {
+	[DictionaryKind.word]: {
+		name: {
+			labelKey: "dictionary.field.word",
+			width: 160
+		},
+		abbreviation: {
+			labelKey: "dictionary.field.abbreviation",
+			width: 120
+		},
+		englishName: {
+			labelKey: "dictionary.field.englishName",
+			width: 160
+		},
+		description: {
+			labelKey: "dictionary.field.description",
+			width: 280
+		},
+		synonyms: {
+			labelKey: "dictionary.field.synonyms",
+			width: 160
+		},
+		forbiddenWords: {
+			labelKey: "dictionary.field.forbiddenWords",
+			width: 160
+		}
+	},
+	[DictionaryKind.term]: {
+		name: {
+			labelKey: "dictionary.field.term",
+			width: 180
+		},
+		physicalName: {
+			labelKey: "dictionary.field.physicalName",
+			width: 180
+		},
+		domainId: {
+			labelKey: "dictionary.field.domain",
+			width: 140
+		},
+		description: {
+			labelKey: "dictionary.field.description",
+			width: 280
+		},
+		synonyms: {
+			labelKey: "dictionary.field.synonyms",
+			width: 160
+		}
+	},
+	[DictionaryKind.domain]: {
+		name: {
+			labelKey: "dictionary.field.domain",
+			width: 160
+		},
+		category: {
+			labelKey: "dictionary.field.category",
+			width: 120
+		},
+		dataType: {
+			labelKey: "dictionary.field.dataType",
+			width: 160
+		},
+		description: {
+			labelKey: "dictionary.field.description",
+			width: 280
+		}
+	}
+};
+function sheetColumns(kind, { readonly, widths = {} }, i18n = sourceI18n) {
+	const specs = SHEET_COLUMNS[kind];
+	return DictionaryFields[kind].map((field) => ({
+		id: field,
+		label: i18n.t(specs[field].labelKey),
+		width: widths[field] ?? specs[field].width,
+		readonly
+	}));
+}
+function sheetField(kind, columnId) {
+	return DictionaryFields[kind].includes(columnId) ? columnId : void 0;
+}
+function sheetCellText(state, kind, id, columnId) {
+	const field = sheetField(kind, columnId);
+	const row = field ? selectDictionaryRow(state, kind, id) : void 0;
+	if (!field || !row) return "";
+	const value = Reflect.get(row, field);
+	if (!isString(value)) return "";
+	return kind === DictionaryKind.term && field === "domainId" ? getLiveDomainName(state, value) : value;
+}
+var CHECKED_FIELDS = ["name", "domainId"];
+var isCheckedField = (columnId) => CHECKED_FIELDS.includes(columnId);
+function sheetCellMark(state, kind, id, columnId) {
+	if (!isCheckedField(columnId) || !sheetField(kind, columnId)) return null;
+	const row = selectDictionaryRow(state, kind, id);
+	return row ? markOf(checkDictionaryRow(state, kind, row, columnId)) : null;
+}
+var SEARCHED_FIELDS = {
+	[DictionaryKind.word]: [
+		"name",
+		"abbreviation",
+		"englishName",
+		"description"
+	],
+	[DictionaryKind.term]: [
+		"name",
+		"physicalName",
+		"description"
+	],
+	[DictionaryKind.domain]: [
+		"name",
+		"dataType",
+		"description"
+	]
+};
+var toSearchText = (text) => text.normalize("NFC").toLowerCase();
+var toListing = (rows) => ({
+	rows,
+	ids: Object.freeze(rows.map(({ id }) => id)),
+	texts: null
+});
+var LISTINGS = {
+	[DictionaryKind.word]: dictionaryCache(DictionaryKind.word, toListing),
+	[DictionaryKind.term]: dictionaryCache(DictionaryKind.term, toListing),
+	[DictionaryKind.domain]: dictionaryCache(DictionaryKind.domain, toListing)
+};
+function searchTextsOf(kind, listing) {
+	const fields = SEARCHED_FIELDS[kind];
+	listing.texts ??= listing.rows.map((row) => fields.map((field) => {
+		const value = Reflect.get(row, field);
+		return isString(value) ? toSearchText(value) : "";
+	}).join("\n"));
+	return listing.texts;
+}
+function sheetRowIds(state, kind, search = "") {
+	const listing = LISTINGS[kind](state);
+	const query = toSearchText(search.trim());
+	if (!query) return listing.ids;
+	const texts = searchTextsOf(kind, listing);
+	return listing.ids.filter((_, index) => texts[index].includes(query));
+}
+var isReload = arrayHas([
+	ActionType$2.loadJson,
+	ActionType$2.initialLoadJson,
+	ActionType$2.clear,
+	ActionType$2.initialClear
+]);
+var isDictionaryWrite = arrayHas(Object.values(ActionType));
+var isSchemaWrite = arrayHas([
+	ActionType$4.addTable,
+	ActionType$4.removeTable,
+	ActionType$4.sortTable,
+	ActionType$4.changeTableName,
+	ActionType$4.changeTableLogicalName,
+	ActionType$1.addColumn,
+	ActionType$1.removeColumn,
+	ActionType$1.moveColumn,
+	ActionType$1.changeColumnName,
+	ActionType$1.changeColumnLogicalName,
+	ActionType$1.changeColumnDataType,
+	ActionType$1.changeColumnDomain,
+	ActionType$3.changeNameViewMode,
+	ActionType$3.changeLockSettings
+]);
+function bumpedSheets(actions) {
+	let checks = false;
+	for (const { type } of actions) {
+		if (isDictionaryWrite(type) || isReload(type)) return DictionarySheetList;
+		if (isSchemaWrite(type)) checks = true;
+	}
+	return checks ? [DictionarySheet.check] : [];
+}
+//#endregion
+export { DictionarySheet, DictionarySheetLabelKey, DictionarySheetList, bumpedSheets, isEntrySheet, sheetCellMark, sheetCellText, sheetColumns, sheetField, sheetRowIds, toSearchText };

package/dist/components/diffContext.d.ts

@@ -0,0 +1,10 @@
+import { Ctx } from '../internal-types';
+import { DiffMap } from '../utils/diff/diff';
+/**
+ * The changes a diff pane tints its cells by. DiffErdViewer alone provides
+ * one, so every other scene reads null and draws no tint, and no node for one
+ * either.
+ */
+export declare const diffContext: import('@dineug/r-html').Context<DiffMap | null>;
+export declare const useDiffMap: (ctx: Ctx) => import('@dineug/r-html').Ref<DiffMap | null>;
+//# sourceMappingURL=diffContext.d.ts.map

package/dist/components/diffContext.js

@@ -0,0 +1,7 @@
+import { createContext } from "../r-html/dist/context/createContext.js";
+import { useContext } from "../r-html/dist/context/useContext.js";
+//#region src/components/diffContext.ts
+var diffContext = createContext(null);
+var useDiffMap = (ctx) => useContext(ctx, diffContext);
+//#endregion
+export { diffContext, useDiffMap };

package/dist/components/element-host/localeHost.d.ts

@@ -0,0 +1,43 @@
+import { LocaleCode, LocaleOption } from '../../i18n/locales';
+import { I18n, Messages } from '../../i18n/translate';
+export type LocaleState = {
+    /** The option a host or a pick last set; null until either sets one. */
+    option: LocaleOption | null;
+    /** What system means once a host names its own language; null reads the tags handed in. */
+    systemTag: string | null;
+};
+/** The tags system reads where a host names none, as useNavigatorLanguages keeps them. */
+export type SystemLanguages = {
+    readonly state: {
+        readonly languages: ReadonlyArray<string>;
+    };
+};
+export type LocaleHostOptions = {
+    /**
+     * The dictionary of a language, which the one I18n object takes in place, or
+     * the promise of one a source still loads. English comes at once, and stands
+     * while another language loads and in place of one that fails to.
+     */
+    messagesOf: (code: LocaleCode) => Messages | Promise<Messages>;
+    /** An observable source, so a change of its tags applies again under system. */
+    languages: SystemLanguages;
+    /** The option in force while no host or pick has set one. */
+    fallbackOption: () => LocaleOption;
+};
+/**
+ * An element's display language: the option, what system resolves to and the
+ * one I18n object every component reads, with the setters a host calls. A
+ * component calls it at setup, so the language is resolved again before mount.
+ */
+export declare function useLocaleHost({ messagesOf, languages, fallbackOption, }: LocaleHostOptions): {
+    i18n: I18n;
+    localeState: LocaleState;
+    resolveLocaleOption: () => LocaleOption;
+    resolveSystemLocale: () => LocaleCode;
+    applyLocale: () => Promise<void>;
+    setLocale: (locale: LocaleOption) => Promise<void>;
+    setSystemLocale: (locale: string | null) => Promise<void>;
+    /** Stops following the option, the tag and the languages handed in, drops a dictionary still loading and applies no language more. */
+    destroy: () => void;
+};
+//# sourceMappingURL=localeHost.d.ts.map