@intlayer/next-i18next 8.12.5-canary.0

package/dist/esm/packages/@intlayer/editor/dist/esm/components/ContentSelectorWrapper.mjs

@@ -0,0 +1,266 @@
+import { getGlobalEditorManager, onGlobalEditorManagerChange } from "../core/globalManager.mjs";
+import * as NodeTypes from "@intlayer/types/nodeType";
+import { isSameKeyPath } from "@intlayer/core/utils";
+
+//#region ../../packages/@intlayer/editor/dist/esm/components/ContentSelectorWrapper.mjs
+const _HTMLElement = typeof HTMLElement !== "undefined" ? HTMLElement : class {};
+/**
+* <intlayer-content-selector-wrapper>
+*
+* Framework-agnostic web component that wraps content with the Intlayer editor
+* selection UI. It replaces the per-framework ContentSelectorWrapper components
+* (Vue, Svelte, Solid, Preact).
+*
+* It reads from the global EditorStateManager singleton (set by initEditorClient)
+* and conditionally renders <intlayer-content-selector> around its slot content
+* when the editor is active and the app is running inside an iframe.
+*
+* @attr {string} key-path        - JSON-serialized KeyPath[] for this content node
+* @attr {string} dictionary-key  - The dictionary key owning this content node
+*/
+var IntlayerContentSelectorWrapperElement = class extends _HTMLElement {
+	_keyPathJson = "[]";
+	_dictionaryKey = "";
+	_editorEnabled = false;
+	_isInIframe = false;
+	_isSelected = false;
+	_editedValue = void 0;
+	_renderState = null;
+	_selector = null;
+	_unsubManager = null;
+	_unsubEnabled = null;
+	_unsubFocused = null;
+	_unsubEditedContent = null;
+	static get observedAttributes() {
+		return ["key-path", "dictionary-key"];
+	}
+	get keyPathJson() {
+		return this._keyPathJson;
+	}
+	set keyPathJson(v) {
+		this._keyPathJson = v;
+		const manager = getGlobalEditorManager();
+		if (manager) this._updateEditedValue(manager);
+	}
+	get dictionaryKey() {
+		return this._dictionaryKey;
+	}
+	set dictionaryKey(v) {
+		this._dictionaryKey = v;
+		const manager = getGlobalEditorManager();
+		if (manager) this._updateEditedValue(manager);
+	}
+	constructor() {
+		super();
+		const shadow = this.attachShadow({ mode: "open" });
+		const style = document.createElement("style");
+		style.textContent = ":host { display: contents; }";
+		shadow.appendChild(style);
+	}
+	attributeChangedCallback(name, _oldVal, newVal) {
+		if (name === "key-path") {
+			this._keyPathJson = newVal ?? "[]";
+			const manager = getGlobalEditorManager();
+			if (manager) this._updateEditedValue(manager);
+		} else if (name === "dictionary-key") {
+			this._dictionaryKey = newVal ?? "";
+			const manager = getGlobalEditorManager();
+			if (manager) this._updateEditedValue(manager);
+		}
+	}
+	connectedCallback() {
+		if (typeof window !== "undefined") this._isInIframe = window.self !== window.top;
+		this._subscribeToManager();
+		this._render();
+	}
+	disconnectedCallback() {
+		this._teardown();
+	}
+	_teardown() {
+		this._unsubManager?.();
+		this._unsubEnabled?.();
+		this._unsubFocused?.();
+		this._unsubEditedContent?.();
+		this._unsubManager = null;
+		this._unsubEnabled = null;
+		this._unsubFocused = null;
+		this._unsubEditedContent = null;
+	}
+	_getRawKeyPath() {
+		try {
+			return JSON.parse(this._keyPathJson);
+		} catch {
+			return [];
+		}
+	}
+	_getFilteredKeyPath() {
+		return this._getRawKeyPath().filter((keyPath) => keyPath.type !== NodeTypes.TRANSLATION);
+	}
+	_updateEditedValue(manager) {
+		const filteredKeyPath = this._getFilteredKeyPath();
+		if (!this._dictionaryKey || filteredKeyPath.length === 0) {
+			this._editedValue = void 0;
+			this._render();
+			return;
+		}
+		const rawKeyPath = this._getRawKeyPath();
+		const lastStepType = rawKeyPath[rawKeyPath.length - 1]?.type;
+		if (lastStepType === NodeTypes.MARKDOWN || lastStepType === NodeTypes.HTML || lastStepType === NodeTypes.INSERTION || lastStepType === NodeTypes.FILE) {
+			this._editedValue = void 0;
+			this._render();
+			return;
+		}
+		let value = manager.getContentValue(this._dictionaryKey, filteredKeyPath);
+		if (value !== null && value !== void 0 && typeof value === "object" && value.nodeType === NodeTypes.TRANSLATION) {
+			const locale = manager.currentLocale.value;
+			value = locale ? value[NodeTypes.TRANSLATION][locale] : void 0;
+		}
+		this._editedValue = value;
+		this._render();
+	}
+	_updateIsSelected(focusedContent) {
+		if (!focusedContent) {
+			this._isSelected = false;
+			this._updateSelectorAttr();
+			return;
+		}
+		const keyPath = this._getFilteredKeyPath();
+		const wasSelected = this._isSelected;
+		this._isSelected = focusedContent.dictionaryKey === this._dictionaryKey && (focusedContent.keyPath?.length ?? 0) > 0 && isSameKeyPath(focusedContent.keyPath ?? [], keyPath);
+		this._updateSelectorAttr();
+		if (this._isSelected && !wasSelected) this._scrollIntoViewIfNeeded();
+	}
+	_scrollIntoViewIfNeeded() {
+		try {
+			let rect;
+			if (this._selector) {
+				const innerWrapper = this._selector.shadowRoot?.querySelector(".wrapper");
+				if (innerWrapper) {
+					const r = innerWrapper.getBoundingClientRect();
+					if (r.width > 0 || r.height > 0) rect = r;
+				}
+			}
+			if (!rect && this.childNodes.length > 0) {
+				const range = document.createRange();
+				range.selectNodeContents(this);
+				const r = range.getBoundingClientRect();
+				if (r.width > 0 || r.height > 0) rect = r;
+			}
+			if (!rect) rect = this.getBoundingClientRect();
+			const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+			const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+			if (!(rect.width > 0 && rect.height > 0 && rect.bottom > 0 && rect.right > 0 && rect.top < viewportHeight && rect.left < viewportWidth)) {
+				const scrollY = window.scrollY ?? document.documentElement.scrollTop;
+				const targetScrollY = rect.top + scrollY - viewportHeight * .25;
+				window.scrollTo({
+					top: Math.max(0, targetScrollY),
+					behavior: "smooth"
+				});
+			}
+		} catch {}
+	}
+	_updateSelectorAttr() {
+		if (!this._selector) return;
+		if (this._isSelected) this._selector.setAttribute("is-selecting", "");
+		else this._selector.removeAttribute("is-selecting");
+	}
+	_subscribeToManager() {
+		const manager = getGlobalEditorManager();
+		if (manager) this._setupManagerSubscriptions(manager);
+		this._unsubManager = onGlobalEditorManagerChange((m) => {
+			this._unsubEnabled?.();
+			this._unsubFocused?.();
+			this._unsubEditedContent?.();
+			this._unsubEnabled = null;
+			this._unsubFocused = null;
+			this._unsubEditedContent = null;
+			if (m) this._setupManagerSubscriptions(m);
+			else {
+				this._editorEnabled = false;
+				this._isSelected = false;
+				this._editedValue = void 0;
+				this._render();
+			}
+		});
+	}
+	_setupManagerSubscriptions(manager) {
+		this._editorEnabled = manager.editorEnabled.value ?? false;
+		this._updateIsSelected(manager.focusedContent.value);
+		this._updateEditedValue(manager);
+		const handleEnabledChange = (e) => {
+			this._editorEnabled = e.detail;
+			this._render();
+		};
+		const handleFocusedChange = (e) => {
+			this._updateIsSelected(e.detail);
+		};
+		const handleEditedContentChange = () => {
+			this._updateEditedValue(manager);
+		};
+		manager.editorEnabled.addEventListener("change", handleEnabledChange);
+		manager.focusedContent.addEventListener("change", handleFocusedChange);
+		manager.editedContent.addEventListener("change", handleEditedContentChange);
+		this._unsubEnabled = () => manager.editorEnabled.removeEventListener("change", handleEnabledChange);
+		this._unsubFocused = () => manager.focusedContent.removeEventListener("change", handleFocusedChange);
+		this._unsubEditedContent = () => manager.editedContent.removeEventListener("change", handleEditedContentChange);
+	}
+	_handlePress(e) {
+		e.stopPropagation();
+		const manager = getGlobalEditorManager();
+		if (!manager) return;
+		manager.focusedContent.set({
+			dictionaryKey: this._dictionaryKey,
+			keyPath: this._getFilteredKeyPath()
+		});
+	}
+	_handleHover(e) {
+		e.stopPropagation();
+		getGlobalEditorManager()?.messenger.send(`INTLAYER_HOVERED_CONTENT_CHANGED/post`, {
+			dictionaryKey: this._dictionaryKey,
+			keyPath: this._getFilteredKeyPath()
+		});
+	}
+	_handleUnhover(e) {
+		e.stopPropagation();
+		getGlobalEditorManager()?.messenger.send(`INTLAYER_HOVERED_CONTENT_CHANGED/post`, null);
+	}
+	_render() {
+		const useWrapper = this._isInIframe && this._editorEnabled;
+		const editedValue = this._editedValue;
+		const newState = !useWrapper ? "simple" : typeof editedValue === "string" || typeof editedValue === "number" || typeof editedValue === "boolean" ? "wrapped-text" : "wrapped-slot";
+		if (this._renderState !== newState) {
+			this._rebuildContent(newState);
+			return;
+		}
+		if (newState !== "simple" && this._selector) {
+			this._updateSelectorAttr();
+			if (newState === "wrapped-text" && this._selector.firstChild?.nodeType === Node.TEXT_NODE) this._selector.firstChild.data = String(editedValue);
+		}
+	}
+	_rebuildContent(state) {
+		const shadow = this.shadowRoot;
+		while (shadow.childNodes.length > 1) shadow.removeChild(shadow.lastChild);
+		this._selector = null;
+		if (state === "simple") shadow.appendChild(document.createElement("slot"));
+		else {
+			const selector = document.createElement("intlayer-content-selector");
+			this._selector = selector;
+			if (this._isSelected) selector.setAttribute("is-selecting", "");
+			selector.addEventListener("intlayer:press", (e) => this._handlePress(e));
+			selector.addEventListener("intlayer:hover", (e) => this._handleHover(e));
+			selector.addEventListener("intlayer:unhover", (e) => this._handleUnhover(e));
+			if (state === "wrapped-text") selector.appendChild(document.createTextNode(String(this._editedValue)));
+			else selector.appendChild(document.createElement("slot"));
+			shadow.appendChild(selector);
+		}
+		this._renderState = state;
+	}
+};
+const defineIntlayerContentSelectorWrapper = () => {
+	if (typeof customElements === "undefined") return;
+	if (!customElements.get("intlayer-content-selector-wrapper")) customElements.define("intlayer-content-selector-wrapper", IntlayerContentSelectorWrapperElement);
+};
+
+//#endregion
+export { IntlayerContentSelectorWrapperElement, defineIntlayerContentSelectorWrapper };
+//# sourceMappingURL=ContentSelectorWrapper.mjs.map

package/dist/esm/packages/@intlayer/editor/dist/esm/components/ContentSelectorWrapper.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentSelectorWrapper.mjs","names":[],"sources":["../../../../../../../../../../packages/@intlayer/editor/dist/esm/components/ContentSelectorWrapper.mjs"],"sourcesContent":["import { MessageKey } from \"../messageKey.mjs\";\nimport { getGlobalEditorManager, onGlobalEditorManagerChange } from \"../core/globalManager.mjs\";\nimport { isSameKeyPath } from \"@intlayer/core/utils\";\nimport * as NodeTypes from \"@intlayer/types/nodeType\";\n\n//#region src/components/ContentSelectorWrapper.ts\nconst _HTMLElement = typeof HTMLElement !== \"undefined\" ? HTMLElement : class {};\n/**\n* <intlayer-content-selector-wrapper>\n*\n* Framework-agnostic web component that wraps content with the Intlayer editor\n* selection UI. It replaces the per-framework ContentSelectorWrapper components\n* (Vue, Svelte, Solid, Preact).\n*\n* It reads from the global EditorStateManager singleton (set by initEditorClient)\n* and conditionally renders <intlayer-content-selector> around its slot content\n* when the editor is active and the app is running inside an iframe.\n*\n* @attr {string} key-path        - JSON-serialized KeyPath[] for this content node\n* @attr {string} dictionary-key  - The dictionary key owning this content node\n*/\nvar IntlayerContentSelectorWrapperElement = class extends _HTMLElement {\n\t_keyPathJson = \"[]\";\n\t_dictionaryKey = \"\";\n\t_editorEnabled = false;\n\t_isInIframe = false;\n\t_isSelected = false;\n\t_editedValue = void 0;\n\t_renderState = null;\n\t_selector = null;\n\t_unsubManager = null;\n\t_unsubEnabled = null;\n\t_unsubFocused = null;\n\t_unsubEditedContent = null;\n\tstatic get observedAttributes() {\n\t\treturn [\"key-path\", \"dictionary-key\"];\n\t}\n\tget keyPathJson() {\n\t\treturn this._keyPathJson;\n\t}\n\tset keyPathJson(v) {\n\t\tthis._keyPathJson = v;\n\t\tconst manager = getGlobalEditorManager();\n\t\tif (manager) this._updateEditedValue(manager);\n\t}\n\tget dictionaryKey() {\n\t\treturn this._dictionaryKey;\n\t}\n\tset dictionaryKey(v) {\n\t\tthis._dictionaryKey = v;\n\t\tconst manager = getGlobalEditorManager();\n\t\tif (manager) this._updateEditedValue(manager);\n\t}\n\tconstructor() {\n\t\tsuper();\n\t\tconst shadow = this.attachShadow({ mode: \"open\" });\n\t\tconst style = document.createElement(\"style\");\n\t\tstyle.textContent = \":host { display: contents; }\";\n\t\tshadow.appendChild(style);\n\t}\n\tattributeChangedCallback(name, _oldVal, newVal) {\n\t\tif (name === \"key-path\") {\n\t\t\tthis._keyPathJson = newVal ?? \"[]\";\n\t\t\tconst manager = getGlobalEditorManager();\n\t\t\tif (manager) this._updateEditedValue(manager);\n\t\t} else if (name === \"dictionary-key\") {\n\t\t\tthis._dictionaryKey = newVal ?? \"\";\n\t\t\tconst manager = getGlobalEditorManager();\n\t\t\tif (manager) this._updateEditedValue(manager);\n\t\t}\n\t}\n\tconnectedCallback() {\n\t\tif (typeof window !== \"undefined\") this._isInIframe = window.self !== window.top;\n\t\tthis._subscribeToManager();\n\t\tthis._render();\n\t}\n\tdisconnectedCallback() {\n\t\tthis._teardown();\n\t}\n\t_teardown() {\n\t\tthis._unsubManager?.();\n\t\tthis._unsubEnabled?.();\n\t\tthis._unsubFocused?.();\n\t\tthis._unsubEditedContent?.();\n\t\tthis._unsubManager = null;\n\t\tthis._unsubEnabled = null;\n\t\tthis._unsubFocused = null;\n\t\tthis._unsubEditedContent = null;\n\t}\n\t_getRawKeyPath() {\n\t\ttry {\n\t\t\treturn JSON.parse(this._keyPathJson);\n\t\t} catch {\n\t\t\treturn [];\n\t\t}\n\t}\n\t_getFilteredKeyPath() {\n\t\treturn this._getRawKeyPath().filter((keyPath) => keyPath.type !== NodeTypes.TRANSLATION);\n\t}\n\t_updateEditedValue(manager) {\n\t\tconst filteredKeyPath = this._getFilteredKeyPath();\n\t\tif (!this._dictionaryKey || filteredKeyPath.length === 0) {\n\t\t\tthis._editedValue = void 0;\n\t\t\tthis._render();\n\t\t\treturn;\n\t\t}\n\t\tconst rawKeyPath = this._getRawKeyPath();\n\t\tconst lastStepType = rawKeyPath[rawKeyPath.length - 1]?.type;\n\t\tif (lastStepType === NodeTypes.MARKDOWN || lastStepType === NodeTypes.HTML || lastStepType === NodeTypes.INSERTION || lastStepType === NodeTypes.FILE) {\n\t\t\tthis._editedValue = void 0;\n\t\t\tthis._render();\n\t\t\treturn;\n\t\t}\n\t\tlet value = manager.getContentValue(this._dictionaryKey, filteredKeyPath);\n\t\tif (value !== null && value !== void 0 && typeof value === \"object\" && value.nodeType === NodeTypes.TRANSLATION) {\n\t\t\tconst locale = manager.currentLocale.value;\n\t\t\tvalue = locale ? value[NodeTypes.TRANSLATION][locale] : void 0;\n\t\t}\n\t\tthis._editedValue = value;\n\t\tthis._render();\n\t}\n\t_updateIsSelected(focusedContent) {\n\t\tif (!focusedContent) {\n\t\t\tthis._isSelected = false;\n\t\t\tthis._updateSelectorAttr();\n\t\t\treturn;\n\t\t}\n\t\tconst keyPath = this._getFilteredKeyPath();\n\t\tconst wasSelected = this._isSelected;\n\t\tthis._isSelected = focusedContent.dictionaryKey === this._dictionaryKey && (focusedContent.keyPath?.length ?? 0) > 0 && isSameKeyPath(focusedContent.keyPath ?? [], keyPath);\n\t\tthis._updateSelectorAttr();\n\t\tif (this._isSelected && !wasSelected) this._scrollIntoViewIfNeeded();\n\t}\n\t_scrollIntoViewIfNeeded() {\n\t\ttry {\n\t\t\tlet rect;\n\t\t\tif (this._selector) {\n\t\t\t\tconst innerWrapper = this._selector.shadowRoot?.querySelector(\".wrapper\");\n\t\t\t\tif (innerWrapper) {\n\t\t\t\t\tconst r = innerWrapper.getBoundingClientRect();\n\t\t\t\t\tif (r.width > 0 || r.height > 0) rect = r;\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (!rect && this.childNodes.length > 0) {\n\t\t\t\tconst range = document.createRange();\n\t\t\t\trange.selectNodeContents(this);\n\t\t\t\tconst r = range.getBoundingClientRect();\n\t\t\t\tif (r.width > 0 || r.height > 0) rect = r;\n\t\t\t}\n\t\t\tif (!rect) rect = this.getBoundingClientRect();\n\t\t\tconst viewportHeight = window.innerHeight || document.documentElement.clientHeight;\n\t\t\tconst viewportWidth = window.innerWidth || document.documentElement.clientWidth;\n\t\t\tif (!(rect.width > 0 && rect.height > 0 && rect.bottom > 0 && rect.right > 0 && rect.top < viewportHeight && rect.left < viewportWidth)) {\n\t\t\t\tconst scrollY = window.scrollY ?? document.documentElement.scrollTop;\n\t\t\t\tconst targetScrollY = rect.top + scrollY - viewportHeight * .25;\n\t\t\t\twindow.scrollTo({\n\t\t\t\t\ttop: Math.max(0, targetScrollY),\n\t\t\t\t\tbehavior: \"smooth\"\n\t\t\t\t});\n\t\t\t}\n\t\t} catch {}\n\t}\n\t_updateSelectorAttr() {\n\t\tif (!this._selector) return;\n\t\tif (this._isSelected) this._selector.setAttribute(\"is-selecting\", \"\");\n\t\telse this._selector.removeAttribute(\"is-selecting\");\n\t}\n\t_subscribeToManager() {\n\t\tconst manager = getGlobalEditorManager();\n\t\tif (manager) this._setupManagerSubscriptions(manager);\n\t\tthis._unsubManager = onGlobalEditorManagerChange((m) => {\n\t\t\tthis._unsubEnabled?.();\n\t\t\tthis._unsubFocused?.();\n\t\t\tthis._unsubEditedContent?.();\n\t\t\tthis._unsubEnabled = null;\n\t\t\tthis._unsubFocused = null;\n\t\t\tthis._unsubEditedContent = null;\n\t\t\tif (m) this._setupManagerSubscriptions(m);\n\t\t\telse {\n\t\t\t\tthis._editorEnabled = false;\n\t\t\t\tthis._isSelected = false;\n\t\t\t\tthis._editedValue = void 0;\n\t\t\t\tthis._render();\n\t\t\t}\n\t\t});\n\t}\n\t_setupManagerSubscriptions(manager) {\n\t\tthis._editorEnabled = manager.editorEnabled.value ?? false;\n\t\tthis._updateIsSelected(manager.focusedContent.value);\n\t\tthis._updateEditedValue(manager);\n\t\tconst handleEnabledChange = (e) => {\n\t\t\tthis._editorEnabled = e.detail;\n\t\t\tthis._render();\n\t\t};\n\t\tconst handleFocusedChange = (e) => {\n\t\t\tthis._updateIsSelected(e.detail);\n\t\t};\n\t\tconst handleEditedContentChange = () => {\n\t\t\tthis._updateEditedValue(manager);\n\t\t};\n\t\tmanager.editorEnabled.addEventListener(\"change\", handleEnabledChange);\n\t\tmanager.focusedContent.addEventListener(\"change\", handleFocusedChange);\n\t\tmanager.editedContent.addEventListener(\"change\", handleEditedContentChange);\n\t\tthis._unsubEnabled = () => manager.editorEnabled.removeEventListener(\"change\", handleEnabledChange);\n\t\tthis._unsubFocused = () => manager.focusedContent.removeEventListener(\"change\", handleFocusedChange);\n\t\tthis._unsubEditedContent = () => manager.editedContent.removeEventListener(\"change\", handleEditedContentChange);\n\t}\n\t_handlePress(e) {\n\t\te.stopPropagation();\n\t\tconst manager = getGlobalEditorManager();\n\t\tif (!manager) return;\n\t\tmanager.focusedContent.set({\n\t\t\tdictionaryKey: this._dictionaryKey,\n\t\t\tkeyPath: this._getFilteredKeyPath()\n\t\t});\n\t}\n\t_handleHover(e) {\n\t\te.stopPropagation();\n\t\tgetGlobalEditorManager()?.messenger.send(`${\"INTLAYER_HOVERED_CONTENT_CHANGED\"}/post`, {\n\t\t\tdictionaryKey: this._dictionaryKey,\n\t\t\tkeyPath: this._getFilteredKeyPath()\n\t\t});\n\t}\n\t_handleUnhover(e) {\n\t\te.stopPropagation();\n\t\tgetGlobalEditorManager()?.messenger.send(`${\"INTLAYER_HOVERED_CONTENT_CHANGED\"}/post`, null);\n\t}\n\t_render() {\n\t\tconst useWrapper = this._isInIframe && this._editorEnabled;\n\t\tconst editedValue = this._editedValue;\n\t\tconst newState = !useWrapper ? \"simple\" : typeof editedValue === \"string\" || typeof editedValue === \"number\" || typeof editedValue === \"boolean\" ? \"wrapped-text\" : \"wrapped-slot\";\n\t\tif (this._renderState !== newState) {\n\t\t\tthis._rebuildContent(newState);\n\t\t\treturn;\n\t\t}\n\t\tif (newState !== \"simple\" && this._selector) {\n\t\t\tthis._updateSelectorAttr();\n\t\t\tif (newState === \"wrapped-text\" && this._selector.firstChild?.nodeType === Node.TEXT_NODE) this._selector.firstChild.data = String(editedValue);\n\t\t}\n\t}\n\t_rebuildContent(state) {\n\t\tconst shadow = this.shadowRoot;\n\t\twhile (shadow.childNodes.length > 1) shadow.removeChild(shadow.lastChild);\n\t\tthis._selector = null;\n\t\tif (state === \"simple\") shadow.appendChild(document.createElement(\"slot\"));\n\t\telse {\n\t\t\tconst selector = document.createElement(\"intlayer-content-selector\");\n\t\t\tthis._selector = selector;\n\t\t\tif (this._isSelected) selector.setAttribute(\"is-selecting\", \"\");\n\t\t\tselector.addEventListener(\"intlayer:press\", (e) => this._handlePress(e));\n\t\t\tselector.addEventListener(\"intlayer:hover\", (e) => this._handleHover(e));\n\t\t\tselector.addEventListener(\"intlayer:unhover\", (e) => this._handleUnhover(e));\n\t\t\tif (state === \"wrapped-text\") selector.appendChild(document.createTextNode(String(this._editedValue)));\n\t\t\telse selector.appendChild(document.createElement(\"slot\"));\n\t\t\tshadow.appendChild(selector);\n\t\t}\n\t\tthis._renderState = state;\n\t}\n};\nconst defineIntlayerContentSelectorWrapper = () => {\n\tif (typeof customElements === \"undefined\") return;\n\tif (!customElements.get(\"intlayer-content-selector-wrapper\")) customElements.define(\"intlayer-content-selector-wrapper\", IntlayerContentSelectorWrapperElement);\n};\n\n//#endregion\nexport { IntlayerContentSelectorWrapperElement, defineIntlayerContentSelectorWrapper };\n//# sourceMappingURL=ContentSelectorWrapper.mjs.map"],"mappings":"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"}

package/dist/esm/packages/@intlayer/editor/dist/esm/components/EditedContent.mjs

@@ -0,0 +1,159 @@
+import { getGlobalEditorManager, onGlobalEditorManagerChange } from "../core/globalManager.mjs";
+import { getBasePlugins, getContent } from "@intlayer/core/interpreter";
+
+//#region ../../packages/@intlayer/editor/dist/esm/components/EditedContent.mjs
+const _HTMLElement = typeof HTMLElement !== "undefined" ? HTMLElement : class {};
+/**
+* <intlayer-edited-content>
+*
+* Framework-agnostic web component that displays edited content from the Intlayer
+* editor. When the editor has an edited value for the given dictionary key and
+* key path, it renders the edited value; otherwise it renders the original
+* content via a slot.
+*
+* Always wraps content in <intlayer-content-selector-wrapper> for selection UI.
+*
+* @attr {string} dictionary-key  - The dictionary key owning this content node
+* @attr {string} key-path        - JSON-serialized KeyPath[] for this content node
+* @attr {string} locale          - The current locale string
+*/
+var IntlayerEditedContentElement = class extends _HTMLElement {
+	_dictionaryKey = "";
+	_keyPathJson = "[]";
+	_locale = "";
+	_editedText = null;
+	_unsubManager = null;
+	_unsubEditedContent = null;
+	_selectorWrapper;
+	_slot;
+	static get observedAttributes() {
+		return [
+			"dictionary-key",
+			"key-path",
+			"locale"
+		];
+	}
+	get dictionaryKey() {
+		return this._dictionaryKey;
+	}
+	set dictionaryKey(v) {
+		this._dictionaryKey = v;
+		this._selectorWrapper.setAttribute("dictionary-key", v);
+	}
+	get keyPathJson() {
+		return this._keyPathJson;
+	}
+	set keyPathJson(v) {
+		this._keyPathJson = v;
+		this._selectorWrapper.setAttribute("key-path", v);
+	}
+	get locale() {
+		return this._locale;
+	}
+	set locale(v) {
+		this._locale = v;
+	}
+	constructor() {
+		super();
+		const shadow = this.attachShadow({ mode: "open" });
+		const style = document.createElement("style");
+		style.textContent = ":host { display: contents; }";
+		shadow.appendChild(style);
+		this._selectorWrapper = document.createElement("intlayer-content-selector-wrapper");
+		this._slot = document.createElement("slot");
+		this._selectorWrapper.appendChild(this._slot);
+		shadow.appendChild(this._selectorWrapper);
+	}
+	attributeChangedCallback(name, _oldVal, newVal) {
+		const val = newVal ?? "";
+		if (name === "dictionary-key") {
+			this._dictionaryKey = val;
+			this._selectorWrapper.setAttribute("dictionary-key", val);
+		} else if (name === "key-path") {
+			this._keyPathJson = val || "[]";
+			this._selectorWrapper.setAttribute("key-path", this._keyPathJson);
+		} else if (name === "locale") this._locale = val;
+	}
+	connectedCallback() {
+		this._subscribeToManager();
+	}
+	disconnectedCallback() {
+		this._teardown();
+	}
+	_teardown() {
+		this._unsubManager?.();
+		this._unsubEditedContent?.();
+		this._unsubManager = null;
+		this._unsubEditedContent = null;
+	}
+	_getKeyPath() {
+		try {
+			return JSON.parse(this._keyPathJson);
+		} catch {
+			return [];
+		}
+	}
+	_render() {
+		while (this._selectorWrapper.firstChild) this._selectorWrapper.removeChild(this._selectorWrapper.firstChild);
+		if (this._editedText !== null) this._selectorWrapper.appendChild(document.createTextNode(this._editedText));
+		else this._selectorWrapper.appendChild(this._slot);
+	}
+	_resolveEditedText(manager) {
+		const keyPath = this._getKeyPath();
+		const editedValue = manager.getContentValue(this._dictionaryKey, keyPath);
+		if (editedValue === void 0 || editedValue === null) {
+			this._editedText = null;
+			this._render();
+			return;
+		}
+		if (typeof editedValue === "string" || typeof editedValue === "number") {
+			this._editedText = String(editedValue);
+			this._render();
+			return;
+		}
+		if (typeof editedValue === "object") {
+			const locale = this._locale || void 0;
+			const transformed = getContent(editedValue, {
+				locale,
+				dictionaryKey: this._dictionaryKey,
+				keyPath
+			}, getBasePlugins(locale));
+			if (typeof transformed === "string" || typeof transformed === "number") this._editedText = String(transformed);
+			else {
+				console.error(`[intlayer-edited-content] Incorrect edited content format. Expected string. Value: ${JSON.stringify(transformed)}`);
+				this._editedText = null;
+			}
+			this._render();
+			return;
+		}
+		this._editedText = null;
+		this._render();
+	}
+	_setupManagerSubscriptions(manager) {
+		this._resolveEditedText(manager);
+		const handleChange = () => this._resolveEditedText(manager);
+		manager.editedContent.addEventListener("change", handleChange);
+		this._unsubEditedContent = () => manager.editedContent.removeEventListener("change", handleChange);
+	}
+	_subscribeToManager() {
+		const manager = getGlobalEditorManager();
+		if (manager) this._setupManagerSubscriptions(manager);
+		this._unsubManager = onGlobalEditorManagerChange((m) => {
+			this._unsubEditedContent?.();
+			this._unsubEditedContent = null;
+			if (m) this._setupManagerSubscriptions(m);
+			else {
+				this._editedText = null;
+				this._render();
+			}
+		});
+	}
+};
+const defineIntlayerEditedContent = () => {
+	if (typeof customElements === "undefined") return;
+	if (!customElements.get("intlayer-edited-content")) customElements.define("intlayer-edited-content", IntlayerEditedContentElement);
+};
+
+//#endregion
+export { IntlayerEditedContentElement, defineIntlayerEditedContent };
+//# sourceMappingURL=EditedContent.mjs.map

package/dist/esm/packages/@intlayer/editor/dist/esm/components/EditedContent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditedContent.mjs","names":[],"sources":["../../../../../../../../../../packages/@intlayer/editor/dist/esm/components/EditedContent.mjs"],"sourcesContent":["import { getGlobalEditorManager, onGlobalEditorManagerChange } from \"../core/globalManager.mjs\";\nimport { getBasePlugins, getContent } from \"@intlayer/core/interpreter\";\n\n//#region src/components/EditedContent.ts\nconst _HTMLElement = typeof HTMLElement !== \"undefined\" ? HTMLElement : class {};\n/**\n* <intlayer-edited-content>\n*\n* Framework-agnostic web component that displays edited content from the Intlayer\n* editor. When the editor has an edited value for the given dictionary key and\n* key path, it renders the edited value; otherwise it renders the original\n* content via a slot.\n*\n* Always wraps content in <intlayer-content-selector-wrapper> for selection UI.\n*\n* @attr {string} dictionary-key  - The dictionary key owning this content node\n* @attr {string} key-path        - JSON-serialized KeyPath[] for this content node\n* @attr {string} locale          - The current locale string\n*/\nvar IntlayerEditedContentElement = class extends _HTMLElement {\n\t_dictionaryKey = \"\";\n\t_keyPathJson = \"[]\";\n\t_locale = \"\";\n\t_editedText = null;\n\t_unsubManager = null;\n\t_unsubEditedContent = null;\n\t_selectorWrapper;\n\t_slot;\n\tstatic get observedAttributes() {\n\t\treturn [\n\t\t\t\"dictionary-key\",\n\t\t\t\"key-path\",\n\t\t\t\"locale\"\n\t\t];\n\t}\n\tget dictionaryKey() {\n\t\treturn this._dictionaryKey;\n\t}\n\tset dictionaryKey(v) {\n\t\tthis._dictionaryKey = v;\n\t\tthis._selectorWrapper.setAttribute(\"dictionary-key\", v);\n\t}\n\tget keyPathJson() {\n\t\treturn this._keyPathJson;\n\t}\n\tset keyPathJson(v) {\n\t\tthis._keyPathJson = v;\n\t\tthis._selectorWrapper.setAttribute(\"key-path\", v);\n\t}\n\tget locale() {\n\t\treturn this._locale;\n\t}\n\tset locale(v) {\n\t\tthis._locale = v;\n\t}\n\tconstructor() {\n\t\tsuper();\n\t\tconst shadow = this.attachShadow({ mode: \"open\" });\n\t\tconst style = document.createElement(\"style\");\n\t\tstyle.textContent = \":host { display: contents; }\";\n\t\tshadow.appendChild(style);\n\t\tthis._selectorWrapper = document.createElement(\"intlayer-content-selector-wrapper\");\n\t\tthis._slot = document.createElement(\"slot\");\n\t\tthis._selectorWrapper.appendChild(this._slot);\n\t\tshadow.appendChild(this._selectorWrapper);\n\t}\n\tattributeChangedCallback(name, _oldVal, newVal) {\n\t\tconst val = newVal ?? \"\";\n\t\tif (name === \"dictionary-key\") {\n\t\t\tthis._dictionaryKey = val;\n\t\t\tthis._selectorWrapper.setAttribute(\"dictionary-key\", val);\n\t\t} else if (name === \"key-path\") {\n\t\t\tthis._keyPathJson = val || \"[]\";\n\t\t\tthis._selectorWrapper.setAttribute(\"key-path\", this._keyPathJson);\n\t\t} else if (name === \"locale\") this._locale = val;\n\t}\n\tconnectedCallback() {\n\t\tthis._subscribeToManager();\n\t}\n\tdisconnectedCallback() {\n\t\tthis._teardown();\n\t}\n\t_teardown() {\n\t\tthis._unsubManager?.();\n\t\tthis._unsubEditedContent?.();\n\t\tthis._unsubManager = null;\n\t\tthis._unsubEditedContent = null;\n\t}\n\t_getKeyPath() {\n\t\ttry {\n\t\t\treturn JSON.parse(this._keyPathJson);\n\t\t} catch {\n\t\t\treturn [];\n\t\t}\n\t}\n\t_render() {\n\t\twhile (this._selectorWrapper.firstChild) this._selectorWrapper.removeChild(this._selectorWrapper.firstChild);\n\t\tif (this._editedText !== null) this._selectorWrapper.appendChild(document.createTextNode(this._editedText));\n\t\telse this._selectorWrapper.appendChild(this._slot);\n\t}\n\t_resolveEditedText(manager) {\n\t\tconst keyPath = this._getKeyPath();\n\t\tconst editedValue = manager.getContentValue(this._dictionaryKey, keyPath);\n\t\tif (editedValue === void 0 || editedValue === null) {\n\t\t\tthis._editedText = null;\n\t\t\tthis._render();\n\t\t\treturn;\n\t\t}\n\t\tif (typeof editedValue === \"string\" || typeof editedValue === \"number\") {\n\t\t\tthis._editedText = String(editedValue);\n\t\t\tthis._render();\n\t\t\treturn;\n\t\t}\n\t\tif (typeof editedValue === \"object\") {\n\t\t\tconst locale = this._locale || void 0;\n\t\t\tconst transformed = getContent(editedValue, {\n\t\t\t\tlocale,\n\t\t\t\tdictionaryKey: this._dictionaryKey,\n\t\t\t\tkeyPath\n\t\t\t}, getBasePlugins(locale));\n\t\t\tif (typeof transformed === \"string\" || typeof transformed === \"number\") this._editedText = String(transformed);\n\t\t\telse {\n\t\t\t\tconsole.error(`[intlayer-edited-content] Incorrect edited content format. Expected string. Value: ${JSON.stringify(transformed)}`);\n\t\t\t\tthis._editedText = null;\n\t\t\t}\n\t\t\tthis._render();\n\t\t\treturn;\n\t\t}\n\t\tthis._editedText = null;\n\t\tthis._render();\n\t}\n\t_setupManagerSubscriptions(manager) {\n\t\tthis._resolveEditedText(manager);\n\t\tconst handleChange = () => this._resolveEditedText(manager);\n\t\tmanager.editedContent.addEventListener(\"change\", handleChange);\n\t\tthis._unsubEditedContent = () => manager.editedContent.removeEventListener(\"change\", handleChange);\n\t}\n\t_subscribeToManager() {\n\t\tconst manager = getGlobalEditorManager();\n\t\tif (manager) this._setupManagerSubscriptions(manager);\n\t\tthis._unsubManager = onGlobalEditorManagerChange((m) => {\n\t\t\tthis._unsubEditedContent?.();\n\t\t\tthis._unsubEditedContent = null;\n\t\t\tif (m) this._setupManagerSubscriptions(m);\n\t\t\telse {\n\t\t\t\tthis._editedText = null;\n\t\t\t\tthis._render();\n\t\t\t}\n\t\t});\n\t}\n};\nconst defineIntlayerEditedContent = () => {\n\tif (typeof customElements === \"undefined\") return;\n\tif (!customElements.get(\"intlayer-edited-content\")) customElements.define(\"intlayer-edited-content\", IntlayerEditedContentElement);\n};\n\n//#endregion\nexport { IntlayerEditedContentElement, defineIntlayerEditedContent };\n//# sourceMappingURL=EditedContent.mjs.map"],"mappings":"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"}

package/dist/esm/packages/@intlayer/editor/dist/esm/components/IntlayerEditorElement.mjs

@@ -0,0 +1,88 @@
+import { getGlobalEditorManager, onGlobalEditorManagerChange } from "../core/globalManager.mjs";
+import { initEditorClient, stopEditorClient } from "../core/initEditorClient.mjs";
+
+//#region ../../packages/@intlayer/editor/dist/esm/components/IntlayerEditorElement.mjs
+const _HTMLElement = typeof HTMLElement !== "undefined" ? HTMLElement : class {};
+/**
+* <intlayer-editor>
+*
+* A framework-agnostic web component that manages the Intlayer editor singleton
+* lifecycle and keeps the current locale in sync with the EditorStateManager.
+*
+* Drop this element once at the root of your application to activate the editor.
+* It renders no UI.
+*
+* @prop {IntlayerConfig} configuration  - The Intlayer config (required; set as JS property, not attribute)
+* @prop {string}         locale         - The active application locale (attribute/property)
+*
+* @example
+* // Svelte
+* <intlayer-editor .configuration={config} locale={$locale} />
+*
+* // Vue
+* <intlayer-editor :configuration="config" :locale="currentLocale" />
+*/
+var IntlayerEditorElement = class extends _HTMLElement {
+	_configuration = void 0;
+	_locale = void 0;
+	_initialized = false;
+	_unsubManager = null;
+	static get observedAttributes() {
+		return ["locale"];
+	}
+	get configuration() {
+		return this._configuration;
+	}
+	set configuration(v) {
+		this._configuration = v;
+		if (!this._initialized) this._init();
+	}
+	get locale() {
+		return this._locale;
+	}
+	set locale(v) {
+		this._locale = v;
+		if (v && this._initialized) this._syncLocale(v);
+	}
+	attributeChangedCallback(name, _oldVal, newVal) {
+		if (name === "locale" && newVal !== null) {
+			this._locale = newVal;
+			if (this._initialized) this._syncLocale(newVal);
+		}
+	}
+	connectedCallback() {
+		this._init();
+	}
+	disconnectedCallback() {
+		this._unsubManager?.();
+		this._unsubManager = null;
+		if (this._initialized) {
+			stopEditorClient();
+			this._initialized = false;
+		}
+	}
+	_init() {
+		if (this._initialized) return;
+		initEditorClient();
+		this._initialized = true;
+		if (this._locale) this._syncLocale(this._locale);
+	}
+	_syncLocale(locale) {
+		const manager = getGlobalEditorManager();
+		if (manager) manager.currentLocale.set(locale);
+		else {
+			this._unsubManager?.();
+			this._unsubManager = onGlobalEditorManagerChange((m) => {
+				if (m) {
+					this._unsubManager?.();
+					this._unsubManager = null;
+					m.currentLocale.set(locale);
+				}
+			});
+		}
+	}
+};
+
+//#endregion
+export { IntlayerEditorElement };
+//# sourceMappingURL=IntlayerEditorElement.mjs.map

package/dist/esm/packages/@intlayer/editor/dist/esm/components/IntlayerEditorElement.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntlayerEditorElement.mjs","names":[],"sources":["../../../../../../../../../../packages/@intlayer/editor/dist/esm/components/IntlayerEditorElement.mjs"],"sourcesContent":["import { getGlobalEditorManager, onGlobalEditorManagerChange } from \"../core/globalManager.mjs\";\nimport { initEditorClient, stopEditorClient } from \"../core/initEditorClient.mjs\";\n\n//#region src/components/IntlayerEditorElement.ts\nconst _HTMLElement = typeof HTMLElement !== \"undefined\" ? HTMLElement : class {};\n/**\n* <intlayer-editor>\n*\n* A framework-agnostic web component that manages the Intlayer editor singleton\n* lifecycle and keeps the current locale in sync with the EditorStateManager.\n*\n* Drop this element once at the root of your application to activate the editor.\n* It renders no UI.\n*\n* @prop {IntlayerConfig} configuration  - The Intlayer config (required; set as JS property, not attribute)\n* @prop {string}         locale         - The active application locale (attribute/property)\n*\n* @example\n* // Svelte\n* <intlayer-editor .configuration={config} locale={$locale} />\n*\n* // Vue\n* <intlayer-editor :configuration=\"config\" :locale=\"currentLocale\" />\n*/\nvar IntlayerEditorElement = class extends _HTMLElement {\n\t_configuration = void 0;\n\t_locale = void 0;\n\t_initialized = false;\n\t_unsubManager = null;\n\tstatic get observedAttributes() {\n\t\treturn [\"locale\"];\n\t}\n\tget configuration() {\n\t\treturn this._configuration;\n\t}\n\tset configuration(v) {\n\t\tthis._configuration = v;\n\t\tif (!this._initialized) this._init();\n\t}\n\tget locale() {\n\t\treturn this._locale;\n\t}\n\tset locale(v) {\n\t\tthis._locale = v;\n\t\tif (v && this._initialized) this._syncLocale(v);\n\t}\n\tattributeChangedCallback(name, _oldVal, newVal) {\n\t\tif (name === \"locale\" && newVal !== null) {\n\t\t\tthis._locale = newVal;\n\t\t\tif (this._initialized) this._syncLocale(newVal);\n\t\t}\n\t}\n\tconnectedCallback() {\n\t\tthis._init();\n\t}\n\tdisconnectedCallback() {\n\t\tthis._unsubManager?.();\n\t\tthis._unsubManager = null;\n\t\tif (this._initialized) {\n\t\t\tstopEditorClient();\n\t\t\tthis._initialized = false;\n\t\t}\n\t}\n\t_init() {\n\t\tif (this._initialized) return;\n\t\tinitEditorClient();\n\t\tthis._initialized = true;\n\t\tif (this._locale) this._syncLocale(this._locale);\n\t}\n\t_syncLocale(locale) {\n\t\tconst manager = getGlobalEditorManager();\n\t\tif (manager) manager.currentLocale.set(locale);\n\t\telse {\n\t\t\tthis._unsubManager?.();\n\t\t\tthis._unsubManager = onGlobalEditorManagerChange((m) => {\n\t\t\t\tif (m) {\n\t\t\t\t\tthis._unsubManager?.();\n\t\t\t\t\tthis._unsubManager = null;\n\t\t\t\t\tm.currentLocale.set(locale);\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n};\n\n//#endregion\nexport { IntlayerEditorElement };\n//# sourceMappingURL=IntlayerEditorElement.mjs.map"],"mappings":";;;;AAIA,MAAM,eAAe,OAAO,gBAAgB,cAAc,cAAc,MAAM;;;;;;;;;;;;;;;;;;;;AAoB9E,IAAI,wBAAwB,cAAc,aAAa;CACtD,iBAAiB,KAAK;CACtB,UAAU,KAAK;CACf,eAAe;CACf,gBAAgB;CAChB,WAAW,qBAAqB;AAC/B,SAAO,CAAC,SAAS;;CAElB,IAAI,gBAAgB;AACnB,SAAO,KAAK;;CAEb,IAAI,cAAc,GAAG;AACpB,OAAK,iBAAiB;AACtB,MAAI,CAAC,KAAK,aAAc,MAAK,OAAO;;CAErC,IAAI,SAAS;AACZ,SAAO,KAAK;;CAEb,IAAI,OAAO,GAAG;AACb,OAAK,UAAU;AACf,MAAI,KAAK,KAAK,aAAc,MAAK,YAAY,EAAE;;CAEhD,yBAAyB,MAAM,SAAS,QAAQ;AAC/C,MAAI,SAAS,YAAY,WAAW,MAAM;AACzC,QAAK,UAAU;AACf,OAAI,KAAK,aAAc,MAAK,YAAY,OAAO;;;CAGjD,oBAAoB;AACnB,OAAK,OAAO;;CAEb,uBAAuB;AACtB,OAAK,iBAAiB;AACtB,OAAK,gBAAgB;AACrB,MAAI,KAAK,cAAc;AACtB,qBAAkB;AAClB,QAAK,eAAe;;;CAGtB,QAAQ;AACP,MAAI,KAAK,aAAc;AACvB,oBAAkB;AAClB,OAAK,eAAe;AACpB,MAAI,KAAK,QAAS,MAAK,YAAY,KAAK,QAAQ;;CAEjD,YAAY,QAAQ;EACnB,MAAM,UAAU,wBAAwB;AACxC,MAAI,QAAS,SAAQ,cAAc,IAAI,OAAO;OACzC;AACJ,QAAK,iBAAiB;AACtB,QAAK,gBAAgB,6BAA6B,MAAM;AACvD,QAAI,GAAG;AACN,UAAK,iBAAiB;AACtB,UAAK,gBAAgB;AACrB,OAAE,cAAc,IAAI,OAAO;;KAE3B"}

package/dist/esm/packages/@intlayer/editor/dist/esm/components/defineIntlayerElements.mjs

@@ -0,0 +1,26 @@
+import { IntlayerContentSelectorElement } from "./ContentSelector.mjs";
+import { defineIntlayerContentSelectorWrapper } from "./ContentSelectorWrapper.mjs";
+import { defineIntlayerEditedContent } from "./EditedContent.mjs";
+import { IntlayerEditorElement } from "./IntlayerEditorElement.mjs";
+
+//#region ../../packages/@intlayer/editor/dist/esm/components/defineIntlayerElements.mjs
+const defineIntlayerEditorElement = () => {
+	if (typeof customElements === "undefined") return;
+	if (!customElements.get("intlayer-editor")) customElements.define("intlayer-editor", IntlayerEditorElement);
+};
+/**
+* Register all Intlayer custom elements.
+* Call this once at application startup (inside IntlayerEditorProvider or similar).
+* Safe to call multiple times — only registers elements that are not yet defined.
+*/
+const defineIntlayerElements = () => {
+	if (typeof customElements === "undefined") return;
+	if (!customElements.get("intlayer-content-selector")) customElements.define("intlayer-content-selector", IntlayerContentSelectorElement);
+	defineIntlayerContentSelectorWrapper();
+	defineIntlayerEditedContent();
+	defineIntlayerEditorElement();
+};
+
+//#endregion
+export { defineIntlayerEditorElement, defineIntlayerElements };
+//# sourceMappingURL=defineIntlayerElements.mjs.map

package/dist/esm/packages/@intlayer/editor/dist/esm/components/defineIntlayerElements.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"defineIntlayerElements.mjs","names":[],"sources":["../../../../../../../../../../packages/@intlayer/editor/dist/esm/components/defineIntlayerElements.mjs"],"sourcesContent":["import { IntlayerContentSelectorElement } from \"./ContentSelector.mjs\";\nimport { defineIntlayerContentSelectorWrapper } from \"./ContentSelectorWrapper.mjs\";\nimport { defineIntlayerEditedContent } from \"./EditedContent.mjs\";\nimport { IntlayerEditorElement } from \"./IntlayerEditorElement.mjs\";\n\n//#region src/components/defineIntlayerElements.ts\nconst defineIntlayerEditorElement = () => {\n\tif (typeof customElements === \"undefined\") return;\n\tif (!customElements.get(\"intlayer-editor\")) customElements.define(\"intlayer-editor\", IntlayerEditorElement);\n};\n/**\n* Register all Intlayer custom elements.\n* Call this once at application startup (inside IntlayerEditorProvider or similar).\n* Safe to call multiple times — only registers elements that are not yet defined.\n*/\nconst defineIntlayerElements = () => {\n\tif (typeof customElements === \"undefined\") return;\n\tif (!customElements.get(\"intlayer-content-selector\")) customElements.define(\"intlayer-content-selector\", IntlayerContentSelectorElement);\n\tdefineIntlayerContentSelectorWrapper();\n\tdefineIntlayerEditedContent();\n\tdefineIntlayerEditorElement();\n};\n\n//#endregion\nexport { defineIntlayerEditorElement, defineIntlayerElements };\n//# sourceMappingURL=defineIntlayerElements.mjs.map"],"mappings":";;;;;;AAMA,MAAM,oCAAoC;AACzC,KAAI,OAAO,mBAAmB,YAAa;AAC3C,KAAI,CAAC,eAAe,IAAI,kBAAkB,CAAE,gBAAe,OAAO,mBAAmB,sBAAsB;;;;;;;AAO5G,MAAM,+BAA+B;AACpC,KAAI,OAAO,mBAAmB,YAAa;AAC3C,KAAI,CAAC,eAAe,IAAI,4BAA4B,CAAE,gBAAe,OAAO,6BAA6B,+BAA+B;AACxI,uCAAsC;AACtC,8BAA6B;AAC7B,8BAA6B"}