@intlayer/editor 8.4.4 → 8.4.6

package/dist/esm/components/ContentSelectorWrapper.mjs

@@ -1,15 +1,200 @@
-import{MessageKey as e}from"../messageKey.mjs";import{getGlobalEditorManager as t,onGlobalEditorManagerChange as n}from"../core/globalManager.mjs";import{t as r}from"../decorate-BWURH4oJ.mjs";import{LitElement as i,css as a,html as o}from"lit";import{property as s,state as c}from"lit/decorators.js";import{isSameKeyPath as l}from"@intlayer/core/utils";import{NodeType as u}from"@intlayer/types/nodeType";var d=class extends i{constructor(...e){super(...e),this.keyPathJson=`[]`,this.dictionaryKey=``,this._editorEnabled=!1,this._isInIframe=!1,this._isSelected=!1,this._editedValue=void 0,this._unsubManager=null,this._unsubEnabled=null,this._unsubFocused=null,this._unsubEditedContent=null}static{this.styles=a`
+import { MessageKey } from "../messageKey.mjs";
+import { getGlobalEditorManager, onGlobalEditorManagerChange } from "../core/globalManager.mjs";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.mjs";
+import { LitElement, css, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { isSameKeyPath } from "@intlayer/core/utils";
+import * as NodeTypes from "@intlayer/types/nodeType";
+
+//#region src/components/ContentSelectorWrapper.ts
+/**
+* <intlayer-content-selector-wrapper>
+*
+* Framework-agnostic Lit element 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 LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.keyPathJson = "[]";
+		this.dictionaryKey = "";
+		this._editorEnabled = false;
+		this._isInIframe = false;
+		this._isSelected = false;
+		this._editedValue = void 0;
+		this._unsubManager = null;
+		this._unsubEnabled = null;
+		this._unsubFocused = null;
+		this._unsubEditedContent = null;
+	}
+	static {
+		this.styles = css`
     :host {
       display: contents;
     }
-  `}connectedCallback(){super.connectedCallback(),typeof window<`u`&&(this._isInIframe=window.self!==window.top),this._subscribeToManager()}disconnectedCallback(){super.disconnectedCallback(),this._teardown()}updated(e){if(e.has(`keyPathJson`)||e.has(`dictionaryKey`)){let e=t();e&&this._updateEditedValue(e)}}_teardown(){this._unsubManager?.(),this._unsubEnabled?.(),this._unsubFocused?.(),this._unsubEditedContent?.(),this._unsubManager=null,this._unsubEnabled=null,this._unsubFocused=null,this._unsubEditedContent=null}_subscribeToManager(){let e=t();e&&this._setupManagerSubscriptions(e),this._unsubManager=n(e=>{this._unsubEnabled?.(),this._unsubFocused?.(),this._unsubEditedContent?.(),this._unsubEnabled=null,this._unsubFocused=null,this._unsubEditedContent=null,e?this._setupManagerSubscriptions(e):(this._editorEnabled=!1,this._isSelected=!1,this._editedValue=void 0)})}_setupManagerSubscriptions(e){this._editorEnabled=e.editorEnabled.value??!1,this._updateIsSelected(e.focusedContent.value),this._updateEditedValue(e);let t=e=>{this._editorEnabled=e.detail},n=e=>{this._updateIsSelected(e.detail)},r=()=>{this._updateEditedValue(e)};e.editorEnabled.addEventListener(`change`,t),e.focusedContent.addEventListener(`change`,n),e.editedContent.addEventListener(`change`,r),this._unsubEnabled=()=>e.editorEnabled.removeEventListener(`change`,t),this._unsubFocused=()=>e.focusedContent.removeEventListener(`change`,n),this._unsubEditedContent=()=>e.editedContent.removeEventListener(`change`,r)}_getRawKeyPath(){try{return JSON.parse(this.keyPathJson)}catch{return[]}}_getFilteredKeyPath(){return this._getRawKeyPath().filter(e=>e.type!==u.Translation)}_updateEditedValue(e){let t=this._getFilteredKeyPath();if(!this.dictionaryKey||t.length===0){this._editedValue=void 0;return}let n=this._getRawKeyPath(),r=n[n.length-1]?.type;if(r===u.Markdown||r===u.HTML||r===u.Insertion||r===u.File){this._editedValue=void 0;return}let i=e.getContentValue(this.dictionaryKey,t);if(typeof i==`object`&&i&&i.nodeType===u.Translation){let t=e.currentLocale.value;i=t?i[u.Translation][t]:void 0}this._editedValue=i}_updateIsSelected(e){if(!e){this._isSelected=!1;return}let t=this._getFilteredKeyPath();this._isSelected=e.dictionaryKey===this.dictionaryKey&&(e.keyPath?.length??0)>0&&l(e.keyPath??[],t)}_handlePress(e){e.stopPropagation();let n=t();n&&n.focusedContent.set({dictionaryKey:this.dictionaryKey,keyPath:this._getFilteredKeyPath()})}_handleHover(n){n.stopPropagation(),t()?.messenger.send(`${e.INTLAYER_HOVERED_CONTENT_CHANGED}/post`,{dictionaryKey:this.dictionaryKey,keyPath:this._getFilteredKeyPath()})}_handleUnhover(n){n.stopPropagation(),t()?.messenger.send(`${e.INTLAYER_HOVERED_CONTENT_CHANGED}/post`,null)}render(){if(!this._isInIframe||!this._editorEnabled)return o`<slot></slot>`;let e=this._editedValue,t=typeof e==`string`||typeof e==`number`||typeof e==`boolean`?e:o`<slot></slot>`;return o`
+  `;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (typeof window !== "undefined") this._isInIframe = window.self !== window.top;
+		this._subscribeToManager();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._teardown();
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("keyPathJson") || changedProperties.has("dictionaryKey")) {
+			const manager = getGlobalEditorManager();
+			if (manager) this._updateEditedValue(manager);
+		}
+	}
+	_teardown() {
+		this._unsubManager?.();
+		this._unsubEnabled?.();
+		this._unsubFocused?.();
+		this._unsubEditedContent?.();
+		this._unsubManager = null;
+		this._unsubEnabled = null;
+		this._unsubFocused = null;
+		this._unsubEditedContent = null;
+	}
+	_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;
+			}
+		});
+	}
+	_setupManagerSubscriptions(manager) {
+		this._editorEnabled = manager.editorEnabled.value ?? false;
+		this._updateIsSelected(manager.focusedContent.value);
+		this._updateEditedValue(manager);
+		const handleEnabledChange = (e) => {
+			this._editorEnabled = e.detail;
+		};
+		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);
+	}
+	_getRawKeyPath() {
+		try {
+			return JSON.parse(this.keyPathJson);
+		} catch {
+			return [];
+		}
+	}
+	_getFilteredKeyPath() {
+		return this._getRawKeyPath().filter((k) => k.type !== NodeTypes.TRANSLATION);
+	}
+	_updateEditedValue(manager) {
+		const filteredKeyPath = this._getFilteredKeyPath();
+		if (!this.dictionaryKey || filteredKeyPath.length === 0) {
+			this._editedValue = void 0;
+			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;
+			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;
+	}
+	_updateIsSelected(focusedContent) {
+		if (!focusedContent) {
+			this._isSelected = false;
+			return;
+		}
+		const keyPath = this._getFilteredKeyPath();
+		this._isSelected = focusedContent.dictionaryKey === this.dictionaryKey && (focusedContent.keyPath?.length ?? 0) > 0 && isSameKeyPath(focusedContent.keyPath ?? [], keyPath);
+	}
+	_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(`${MessageKey.INTLAYER_HOVERED_CONTENT_CHANGED}/post`, {
+			dictionaryKey: this.dictionaryKey,
+			keyPath: this._getFilteredKeyPath()
+		});
+	}
+	_handleUnhover(e) {
+		e.stopPropagation();
+		getGlobalEditorManager()?.messenger.send(`${MessageKey.INTLAYER_HOVERED_CONTENT_CHANGED}/post`, null);
+	}
+	render() {
+		if (!this._isInIframe || !this._editorEnabled) return html`<slot></slot>`;
+		const editedValue = this._editedValue;
+		const displayedContent = typeof editedValue === "string" || typeof editedValue === "number" || typeof editedValue === "boolean" ? editedValue : html`<slot></slot>`;
+		return html`
       <intlayer-content-selector
         ?is-selecting=${this._isSelected}
         @intlayer:press=${this._handlePress}
         @intlayer:hover=${this._handleHover}
         @intlayer:unhover=${this._handleUnhover}
       >
-        ${t}
+        ${displayedContent}
       </intlayer-content-selector>
-    `}};r([s({type:String,attribute:`key-path`})],d.prototype,`keyPathJson`,void 0),r([s({type:String,attribute:`dictionary-key`})],d.prototype,`dictionaryKey`,void 0),r([c()],d.prototype,`_editorEnabled`,void 0),r([c()],d.prototype,`_isInIframe`,void 0),r([c()],d.prototype,`_isSelected`,void 0),r([c()],d.prototype,`_editedValue`,void 0);const f=()=>{typeof customElements>`u`||customElements.get(`intlayer-content-selector-wrapper`)||customElements.define(`intlayer-content-selector-wrapper`,d)};export{d as IntlayerContentSelectorWrapperElement,f as defineIntlayerContentSelectorWrapper};
+    `;
+	}
+};
+__decorate([property({
+	type: String,
+	attribute: "key-path"
+})], IntlayerContentSelectorWrapperElement.prototype, "keyPathJson", void 0);
+__decorate([property({
+	type: String,
+	attribute: "dictionary-key"
+})], IntlayerContentSelectorWrapperElement.prototype, "dictionaryKey", void 0);
+__decorate([state()], IntlayerContentSelectorWrapperElement.prototype, "_editorEnabled", void 0);
+__decorate([state()], IntlayerContentSelectorWrapperElement.prototype, "_isInIframe", void 0);
+__decorate([state()], IntlayerContentSelectorWrapperElement.prototype, "_isSelected", void 0);
+__decorate([state()], IntlayerContentSelectorWrapperElement.prototype, "_editedValue", void 0);
+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/components/ContentSelectorWrapper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentSelectorWrapper.mjs","names":[],"sources":["../../../src/components/ContentSelectorWrapper.ts"],"sourcesContent":["import { isSameKeyPath } from '@intlayer/core/utils';\nimport type { ContentNode } from '@intlayer/types/dictionary';\nimport type { KeyPath } from '@intlayer/types/keyPath';\nimport { NodeType, type TypedNodeModel } from '@intlayer/types/nodeType';\nimport { css, html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport type {\n  EditorStateManager,\n  FileContent,\n} from '../core/EditorStateManager';\nimport {\n  getGlobalEditorManager,\n  onGlobalEditorManagerChange,\n} from '../core/globalManager';\nimport { MessageKey } from '../messageKey';\n\n/**\n * <intlayer-content-selector-wrapper>\n *\n * Framework-agnostic Lit element 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 */\nexport class IntlayerContentSelectorWrapperElement extends LitElement {\n  static styles = css`\n    :host {\n      display: contents;\n    }\n  `;\n\n  @property({ type: String, attribute: 'key-path' }) keyPathJson = '[]';\n  @property({ type: String, attribute: 'dictionary-key' }) dictionaryKey = '';\n\n  @state() private _editorEnabled = false;\n  @state() private _isInIframe = false;\n  @state() private _isSelected = false;\n  @state() private _editedValue: ContentNode | undefined = undefined;\n\n  private _unsubManager: (() => void) | null = null;\n  private _unsubEnabled: (() => void) | null = null;\n  private _unsubFocused: (() => void) | null = null;\n  private _unsubEditedContent: (() => void) | null = null;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    if (typeof window !== 'undefined') {\n      this._isInIframe = window.self !== window.top;\n    }\n    this._subscribeToManager();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._teardown();\n  }\n\n  updated(changedProperties: Map<string, unknown>): void {\n    if (\n      changedProperties.has('keyPathJson') ||\n      changedProperties.has('dictionaryKey')\n    ) {\n      const manager = getGlobalEditorManager();\n      if (manager) this._updateEditedValue(manager);\n    }\n  }\n\n  private _teardown(): void {\n    this._unsubManager?.();\n    this._unsubEnabled?.();\n    this._unsubFocused?.();\n    this._unsubEditedContent?.();\n    this._unsubManager = null;\n    this._unsubEnabled = null;\n    this._unsubFocused = null;\n    this._unsubEditedContent = null;\n  }\n\n  private _subscribeToManager(): void {\n    const manager = getGlobalEditorManager();\n    if (manager) {\n      this._setupManagerSubscriptions(manager);\n    }\n    // Keep listening for manager changes (handles stop + re-init cycles)\n    this._unsubManager = onGlobalEditorManagerChange((m) => {\n      this._unsubEnabled?.();\n      this._unsubFocused?.();\n      this._unsubEditedContent?.();\n      this._unsubEnabled = null;\n      this._unsubFocused = null;\n      this._unsubEditedContent = null;\n      if (m) {\n        this._setupManagerSubscriptions(m);\n      } else {\n        this._editorEnabled = false;\n        this._isSelected = false;\n        this._editedValue = undefined;\n      }\n    });\n  }\n\n  private _setupManagerSubscriptions(manager: EditorStateManager): void {\n    this._editorEnabled = manager.editorEnabled.value ?? false;\n    this._updateIsSelected(manager.focusedContent.value);\n    this._updateEditedValue(manager);\n\n    const handleEnabledChange = (e: Event) => {\n      this._editorEnabled = (e as CustomEvent<boolean>).detail;\n    };\n    const handleFocusedChange = (e: Event) => {\n      this._updateIsSelected((e as CustomEvent<FileContent | null>).detail);\n    };\n    const handleEditedContentChange = () => {\n      this._updateEditedValue(manager);\n    };\n\n    manager.editorEnabled.addEventListener('change', handleEnabledChange);\n    manager.focusedContent.addEventListener('change', handleFocusedChange);\n    manager.editedContent.addEventListener('change', handleEditedContentChange);\n\n    this._unsubEnabled = () =>\n      manager.editorEnabled.removeEventListener('change', handleEnabledChange);\n    this._unsubFocused = () =>\n      manager.focusedContent.removeEventListener('change', handleFocusedChange);\n    this._unsubEditedContent = () =>\n      manager.editedContent.removeEventListener(\n        'change',\n        handleEditedContentChange\n      );\n  }\n\n  private _getRawKeyPath(): KeyPath[] {\n    try {\n      return JSON.parse(this.keyPathJson) as KeyPath[];\n    } catch {\n      return [];\n    }\n  }\n\n  private _getFilteredKeyPath(): KeyPath[] {\n    return this._getRawKeyPath().filter((k) => k.type !== NodeType.Translation);\n  }\n\n  private _updateEditedValue(manager: EditorStateManager): void {\n    const filteredKeyPath = this._getFilteredKeyPath();\n    if (!this.dictionaryKey || filteredKeyPath.length === 0) {\n      this._editedValue = undefined;\n      return;\n    }\n\n    // Node types whose display requires framework-level rendering (markdown,\n    // HTML, insertion, file): do not override the slot — the framework handles\n    // those. Only plain / translated strings can be substituted here.\n    const rawKeyPath = this._getRawKeyPath();\n    const lastStepType = rawKeyPath[rawKeyPath.length - 1]?.type;\n    if (\n      lastStepType === NodeType.Markdown ||\n      lastStepType === NodeType.HTML ||\n      lastStepType === NodeType.Insertion ||\n      lastStepType === NodeType.File\n    ) {\n      this._editedValue = undefined;\n      return;\n    }\n\n    let value = manager.getContentValue(this.dictionaryKey, filteredKeyPath);\n\n    // getContentNodeByKeyPath resolves translation nodes only at intermediate\n    // steps, not the final leaf. Resolve manually when the returned value is\n    // still a translation object (happens when Translation steps are filtered\n    // out and the leaf IS the translation object).\n    if (\n      value !== null &&\n      value !== undefined &&\n      typeof value === 'object' &&\n      value.nodeType === NodeType.Translation\n    ) {\n      const locale = manager.currentLocale.value as string | undefined;\n      // TypedNodeModel<Translation, …> structurally satisfies TypedNode<BaseNode>\n      // (both have nodeType), so this narrowing cast is sound.\n      const node = value as TypedNodeModel<\n        typeof NodeType.Translation,\n        Record<string, ContentNode>\n      >;\n      value = locale ? node[NodeType.Translation][locale] : undefined;\n    }\n\n    this._editedValue = value;\n  }\n\n  private _updateIsSelected(\n    focusedContent: FileContent | null | undefined\n  ): void {\n    if (!focusedContent) {\n      this._isSelected = false;\n      return;\n    }\n    const keyPath = this._getFilteredKeyPath();\n    this._isSelected =\n      focusedContent.dictionaryKey === this.dictionaryKey &&\n      (focusedContent.keyPath?.length ?? 0) > 0 &&\n      isSameKeyPath(focusedContent.keyPath ?? [], keyPath);\n  }\n\n  private _handlePress(e: Event): void {\n    // Stop propagation so nested wrappers don't also fire (composed + bubbles)\n    e.stopPropagation();\n    const manager = getGlobalEditorManager();\n    if (!manager) return;\n    manager.focusedContent.set({\n      dictionaryKey: this.dictionaryKey,\n      keyPath: this._getFilteredKeyPath(),\n    });\n  }\n\n  private _handleHover(e: Event): void {\n    e.stopPropagation();\n    getGlobalEditorManager()?.messenger.send(\n      `${MessageKey.INTLAYER_HOVERED_CONTENT_CHANGED}/post`,\n      { dictionaryKey: this.dictionaryKey, keyPath: this._getFilteredKeyPath() }\n    );\n  }\n\n  private _handleUnhover(e: Event): void {\n    e.stopPropagation();\n    getGlobalEditorManager()?.messenger.send(\n      `${MessageKey.INTLAYER_HOVERED_CONTENT_CHANGED}/post`,\n      null\n    );\n  }\n\n  render() {\n    if (!this._isInIframe || !this._editorEnabled) {\n      return html`<slot></slot>`;\n    }\n\n    const editedValue = this._editedValue;\n    const displayedContent =\n      typeof editedValue === 'string' ||\n      typeof editedValue === 'number' ||\n      typeof editedValue === 'boolean'\n        ? editedValue\n        : html`<slot></slot>`;\n\n    return html`\n      <intlayer-content-selector\n        ?is-selecting=${this._isSelected}\n        @intlayer:press=${this._handlePress}\n        @intlayer:hover=${this._handleHover}\n        @intlayer:unhover=${this._handleUnhover}\n      >\n        ${displayedContent}\n      </intlayer-content-selector>\n    `;\n  }\n}\n\nexport const defineIntlayerContentSelectorWrapper = (): void => {\n  if (typeof customElements === 'undefined') return;\n\n  if (!customElements.get('intlayer-content-selector-wrapper')) {\n    customElements.define(\n      'intlayer-content-selector-wrapper',\n      IntlayerContentSelectorWrapperElement\n    );\n  }\n};\n"],"mappings":"qZA8BA,IAAa,EAAb,cAA2D,CAAW,gDAOH,wBACQ,uBAEvC,oBACH,oBACA,qBAC0B,IAAA,sBAEZ,wBACA,wBACA,8BACM,wBAjBnC,CAAG;;;;IAmBnB,mBAA0B,CACxB,MAAM,mBAAmB,CACrB,OAAO,OAAW,MACpB,KAAK,YAAc,OAAO,OAAS,OAAO,KAE5C,KAAK,qBAAqB,CAG5B,sBAA6B,CAC3B,MAAM,sBAAsB,CAC5B,KAAK,WAAW,CAGlB,QAAQ,EAA+C,CACrD,GACE,EAAkB,IAAI,cAAc,EACpC,EAAkB,IAAI,gBAAgB,CACtC,CACA,IAAM,EAAU,GAAwB,CACpC,GAAS,KAAK,mBAAmB,EAAQ,EAIjD,WAA0B,CACxB,KAAK,iBAAiB,CACtB,KAAK,iBAAiB,CACtB,KAAK,iBAAiB,CACtB,KAAK,uBAAuB,CAC5B,KAAK,cAAgB,KACrB,KAAK,cAAgB,KACrB,KAAK,cAAgB,KACrB,KAAK,oBAAsB,KAG7B,qBAAoC,CAClC,IAAM,EAAU,GAAwB,CACpC,GACF,KAAK,2BAA2B,EAAQ,CAG1C,KAAK,cAAgB,EAA6B,GAAM,CACtD,KAAK,iBAAiB,CACtB,KAAK,iBAAiB,CACtB,KAAK,uBAAuB,CAC5B,KAAK,cAAgB,KACrB,KAAK,cAAgB,KACrB,KAAK,oBAAsB,KACvB,EACF,KAAK,2BAA2B,EAAE,EAElC,KAAK,eAAiB,GACtB,KAAK,YAAc,GACnB,KAAK,aAAe,IAAA,KAEtB,CAGJ,2BAAmC,EAAmC,CACpE,KAAK,eAAiB,EAAQ,cAAc,OAAS,GACrD,KAAK,kBAAkB,EAAQ,eAAe,MAAM,CACpD,KAAK,mBAAmB,EAAQ,CAEhC,IAAM,EAAuB,GAAa,CACxC,KAAK,eAAkB,EAA2B,QAE9C,EAAuB,GAAa,CACxC,KAAK,kBAAmB,EAAsC,OAAO,EAEjE,MAAkC,CACtC,KAAK,mBAAmB,EAAQ,EAGlC,EAAQ,cAAc,iBAAiB,SAAU,EAAoB,CACrE,EAAQ,eAAe,iBAAiB,SAAU,EAAoB,CACtE,EAAQ,cAAc,iBAAiB,SAAU,EAA0B,CAE3E,KAAK,kBACH,EAAQ,cAAc,oBAAoB,SAAU,EAAoB,CAC1E,KAAK,kBACH,EAAQ,eAAe,oBAAoB,SAAU,EAAoB,CAC3E,KAAK,wBACH,EAAQ,cAAc,oBACpB,SACA,EACD,CAGL,gBAAoC,CAClC,GAAI,CACF,OAAO,KAAK,MAAM,KAAK,YAAY,MAC7B,CACN,MAAO,EAAE,EAIb,qBAAyC,CACvC,OAAO,KAAK,gBAAgB,CAAC,OAAQ,GAAM,EAAE,OAAS,EAAS,YAAY,CAG7E,mBAA2B,EAAmC,CAC5D,IAAM,EAAkB,KAAK,qBAAqB,CAClD,GAAI,CAAC,KAAK,eAAiB,EAAgB,SAAW,EAAG,CACvD,KAAK,aAAe,IAAA,GACpB,OAMF,IAAM,EAAa,KAAK,gBAAgB,CAClC,EAAe,EAAW,EAAW,OAAS,IAAI,KACxD,GACE,IAAiB,EAAS,UAC1B,IAAiB,EAAS,MAC1B,IAAiB,EAAS,WAC1B,IAAiB,EAAS,KAC1B,CACA,KAAK,aAAe,IAAA,GACpB,OAGF,IAAI,EAAQ,EAAQ,gBAAgB,KAAK,cAAe,EAAgB,CAMxE,GAGE,OAAO,GAAU,UAFjB,GAGA,EAAM,WAAa,EAAS,YAC5B,CACA,IAAM,EAAS,EAAQ,cAAc,MAOrC,EAAQ,EAJK,EAIS,EAAS,aAAa,GAAU,IAAA,GAGxD,KAAK,aAAe,EAGtB,kBACE,EACM,CACN,GAAI,CAAC,EAAgB,CACnB,KAAK,YAAc,GACnB,OAEF,IAAM,EAAU,KAAK,qBAAqB,CAC1C,KAAK,YACH,EAAe,gBAAkB,KAAK,gBACrC,EAAe,SAAS,QAAU,GAAK,GACxC,EAAc,EAAe,SAAW,EAAE,CAAE,EAAQ,CAGxD,aAAqB,EAAgB,CAEnC,EAAE,iBAAiB,CACnB,IAAM,EAAU,GAAwB,CACnC,GACL,EAAQ,eAAe,IAAI,CACzB,cAAe,KAAK,cACpB,QAAS,KAAK,qBAAqB,CACpC,CAAC,CAGJ,aAAqB,EAAgB,CACnC,EAAE,iBAAiB,CACnB,GAAwB,EAAE,UAAU,KAClC,GAAG,EAAW,iCAAiC,OAC/C,CAAE,cAAe,KAAK,cAAe,QAAS,KAAK,qBAAqB,CAAE,CAC3E,CAGH,eAAuB,EAAgB,CACrC,EAAE,iBAAiB,CACnB,GAAwB,EAAE,UAAU,KAClC,GAAG,EAAW,iCAAiC,OAC/C,KACD,CAGH,QAAS,CACP,GAAI,CAAC,KAAK,aAAe,CAAC,KAAK,eAC7B,MAAO,EAAI,gBAGb,IAAM,EAAc,KAAK,aACnB,EACJ,OAAO,GAAgB,UACvB,OAAO,GAAgB,UACvB,OAAO,GAAgB,UACnB,EACA,CAAI,gBAEV,MAAO,EAAI;;wBAES,KAAK,YAAY;0BACf,KAAK,aAAa;0BAClB,KAAK,aAAa;4BAChB,KAAK,eAAe;;UAEtC,EAAiB;;WA5NxB,EAAS,CAAE,KAAM,OAAQ,UAAW,WAAY,CAAC,CAAA,CAAA,EAAA,UAAA,cAAA,IAAA,GAAA,IACjD,EAAS,CAAE,KAAM,OAAQ,UAAW,iBAAkB,CAAC,CAAA,CAAA,EAAA,UAAA,gBAAA,IAAA,GAAA,IAEvD,GAAO,CAAA,CAAA,EAAA,UAAA,iBAAA,IAAA,GAAA,IACP,GAAO,CAAA,CAAA,EAAA,UAAA,cAAA,IAAA,GAAA,IACP,GAAO,CAAA,CAAA,EAAA,UAAA,cAAA,IAAA,GAAA,IACP,GAAO,CAAA,CAAA,EAAA,UAAA,eAAA,IAAA,GAAA,CA4NV,MAAa,MAAmD,CAC1D,OAAO,eAAmB,KAEzB,eAAe,IAAI,oCAAoC,EAC1D,eAAe,OACb,oCACA,EACD"}
+{"version":3,"file":"ContentSelectorWrapper.mjs","names":[],"sources":["../../../src/components/ContentSelectorWrapper.ts"],"sourcesContent":["import { isSameKeyPath } from '@intlayer/core/utils';\nimport type { ContentNode } from '@intlayer/types/dictionary';\nimport type { KeyPath } from '@intlayer/types/keyPath';\nimport type { TypedNodeModel } from '@intlayer/types/nodeType';\nimport * as NodeTypes from '@intlayer/types/nodeType';\nimport { css, html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport type {\n  EditorStateManager,\n  FileContent,\n} from '../core/EditorStateManager';\nimport {\n  getGlobalEditorManager,\n  onGlobalEditorManagerChange,\n} from '../core/globalManager';\nimport { MessageKey } from '../messageKey';\n\n/**\n * <intlayer-content-selector-wrapper>\n *\n * Framework-agnostic Lit element 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 */\nexport class IntlayerContentSelectorWrapperElement extends LitElement {\n  static styles = css`\n    :host {\n      display: contents;\n    }\n  `;\n\n  @property({ type: String, attribute: 'key-path' }) keyPathJson = '[]';\n  @property({ type: String, attribute: 'dictionary-key' }) dictionaryKey = '';\n\n  @state() private _editorEnabled = false;\n  @state() private _isInIframe = false;\n  @state() private _isSelected = false;\n  @state() private _editedValue: ContentNode | undefined = undefined;\n\n  private _unsubManager: (() => void) | null = null;\n  private _unsubEnabled: (() => void) | null = null;\n  private _unsubFocused: (() => void) | null = null;\n  private _unsubEditedContent: (() => void) | null = null;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    if (typeof window !== 'undefined') {\n      this._isInIframe = window.self !== window.top;\n    }\n    this._subscribeToManager();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._teardown();\n  }\n\n  updated(changedProperties: Map<string, unknown>): void {\n    if (\n      changedProperties.has('keyPathJson') ||\n      changedProperties.has('dictionaryKey')\n    ) {\n      const manager = getGlobalEditorManager();\n      if (manager) this._updateEditedValue(manager);\n    }\n  }\n\n  private _teardown(): void {\n    this._unsubManager?.();\n    this._unsubEnabled?.();\n    this._unsubFocused?.();\n    this._unsubEditedContent?.();\n    this._unsubManager = null;\n    this._unsubEnabled = null;\n    this._unsubFocused = null;\n    this._unsubEditedContent = null;\n  }\n\n  private _subscribeToManager(): void {\n    const manager = getGlobalEditorManager();\n    if (manager) {\n      this._setupManagerSubscriptions(manager);\n    }\n    // Keep listening for manager changes (handles stop + re-init cycles)\n    this._unsubManager = onGlobalEditorManagerChange((m) => {\n      this._unsubEnabled?.();\n      this._unsubFocused?.();\n      this._unsubEditedContent?.();\n      this._unsubEnabled = null;\n      this._unsubFocused = null;\n      this._unsubEditedContent = null;\n      if (m) {\n        this._setupManagerSubscriptions(m);\n      } else {\n        this._editorEnabled = false;\n        this._isSelected = false;\n        this._editedValue = undefined;\n      }\n    });\n  }\n\n  private _setupManagerSubscriptions(manager: EditorStateManager): void {\n    this._editorEnabled = manager.editorEnabled.value ?? false;\n    this._updateIsSelected(manager.focusedContent.value);\n    this._updateEditedValue(manager);\n\n    const handleEnabledChange = (e: Event) => {\n      this._editorEnabled = (e as CustomEvent<boolean>).detail;\n    };\n    const handleFocusedChange = (e: Event) => {\n      this._updateIsSelected((e as CustomEvent<FileContent | null>).detail);\n    };\n    const handleEditedContentChange = () => {\n      this._updateEditedValue(manager);\n    };\n\n    manager.editorEnabled.addEventListener('change', handleEnabledChange);\n    manager.focusedContent.addEventListener('change', handleFocusedChange);\n    manager.editedContent.addEventListener('change', handleEditedContentChange);\n\n    this._unsubEnabled = () =>\n      manager.editorEnabled.removeEventListener('change', handleEnabledChange);\n    this._unsubFocused = () =>\n      manager.focusedContent.removeEventListener('change', handleFocusedChange);\n    this._unsubEditedContent = () =>\n      manager.editedContent.removeEventListener(\n        'change',\n        handleEditedContentChange\n      );\n  }\n\n  private _getRawKeyPath(): KeyPath[] {\n    try {\n      return JSON.parse(this.keyPathJson) as KeyPath[];\n    } catch {\n      return [];\n    }\n  }\n\n  private _getFilteredKeyPath(): KeyPath[] {\n    return this._getRawKeyPath().filter(\n      (k) => k.type !== NodeTypes.TRANSLATION\n    );\n  }\n\n  private _updateEditedValue(manager: EditorStateManager): void {\n    const filteredKeyPath = this._getFilteredKeyPath();\n    if (!this.dictionaryKey || filteredKeyPath.length === 0) {\n      this._editedValue = undefined;\n      return;\n    }\n\n    // Node types whose display requires framework-level rendering (markdown,\n    // HTML, insertion, file): do not override the slot — the framework handles\n    // those. Only plain / translated strings can be substituted here.\n    const rawKeyPath = this._getRawKeyPath();\n    const lastStepType = rawKeyPath[rawKeyPath.length - 1]?.type;\n    if (\n      lastStepType === NodeTypes.MARKDOWN ||\n      lastStepType === NodeTypes.HTML ||\n      lastStepType === NodeTypes.INSERTION ||\n      lastStepType === NodeTypes.FILE\n    ) {\n      this._editedValue = undefined;\n      return;\n    }\n\n    let value = manager.getContentValue(this.dictionaryKey, filteredKeyPath);\n\n    // getContentNodeByKeyPath resolves translation nodes only at intermediate\n    // steps, not the final leaf. Resolve manually when the returned value is\n    // still a translation object (happens when Translation steps are filtered\n    // out and the leaf IS the translation object).\n    if (\n      value !== null &&\n      value !== undefined &&\n      typeof value === 'object' &&\n      value.nodeType === NodeTypes.TRANSLATION\n    ) {\n      const locale = manager.currentLocale.value as string | undefined;\n      // TypedNodeModel<Translation, …> structurally satisfies TypedNode<BaseNode>\n      // (both have nodeType), so this narrowing cast is sound.\n      const node = value as TypedNodeModel<\n        typeof NodeTypes.TRANSLATION,\n        Record<string, ContentNode>\n      >;\n      value = locale ? node[NodeTypes.TRANSLATION][locale] : undefined;\n    }\n\n    this._editedValue = value;\n  }\n\n  private _updateIsSelected(\n    focusedContent: FileContent | null | undefined\n  ): void {\n    if (!focusedContent) {\n      this._isSelected = false;\n      return;\n    }\n    const keyPath = this._getFilteredKeyPath();\n    this._isSelected =\n      focusedContent.dictionaryKey === this.dictionaryKey &&\n      (focusedContent.keyPath?.length ?? 0) > 0 &&\n      isSameKeyPath(focusedContent.keyPath ?? [], keyPath);\n  }\n\n  private _handlePress(e: Event): void {\n    // Stop propagation so nested wrappers don't also fire (composed + bubbles)\n    e.stopPropagation();\n    const manager = getGlobalEditorManager();\n    if (!manager) return;\n    manager.focusedContent.set({\n      dictionaryKey: this.dictionaryKey,\n      keyPath: this._getFilteredKeyPath(),\n    });\n  }\n\n  private _handleHover(e: Event): void {\n    e.stopPropagation();\n    getGlobalEditorManager()?.messenger.send(\n      `${MessageKey.INTLAYER_HOVERED_CONTENT_CHANGED}/post`,\n      { dictionaryKey: this.dictionaryKey, keyPath: this._getFilteredKeyPath() }\n    );\n  }\n\n  private _handleUnhover(e: Event): void {\n    e.stopPropagation();\n    getGlobalEditorManager()?.messenger.send(\n      `${MessageKey.INTLAYER_HOVERED_CONTENT_CHANGED}/post`,\n      null\n    );\n  }\n\n  render() {\n    if (!this._isInIframe || !this._editorEnabled) {\n      return html`<slot></slot>`;\n    }\n\n    const editedValue = this._editedValue;\n    const displayedContent =\n      typeof editedValue === 'string' ||\n      typeof editedValue === 'number' ||\n      typeof editedValue === 'boolean'\n        ? editedValue\n        : html`<slot></slot>`;\n\n    return html`\n      <intlayer-content-selector\n        ?is-selecting=${this._isSelected}\n        @intlayer:press=${this._handlePress}\n        @intlayer:hover=${this._handleHover}\n        @intlayer:unhover=${this._handleUnhover}\n      >\n        ${displayedContent}\n      </intlayer-content-selector>\n    `;\n  }\n}\n\nexport const defineIntlayerContentSelectorWrapper = (): void => {\n  if (typeof customElements === 'undefined') return;\n\n  if (!customElements.get('intlayer-content-selector-wrapper')) {\n    customElements.define(\n      'intlayer-content-selector-wrapper',\n      IntlayerContentSelectorWrapperElement\n    );\n  }\n};\n"],"mappings":"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"}

package/dist/esm/components/EditedContent.mjs

@@ -1,13 +1,134 @@
-import{getGlobalEditorManager as e,onGlobalEditorManagerChange as t}from"../core/globalManager.mjs";import{t as n}from"../decorate-BWURH4oJ.mjs";import{LitElement as r,css as i,html as a}from"lit";import{property as o,state as s}from"lit/decorators.js";import{getBasePlugins as c,getContent as l}from"@intlayer/core/interpreter";var u=class extends r{constructor(...e){super(...e),this.dictionaryKey=``,this.keyPathJson=`[]`,this.locale=``,this._editedText=null,this._unsubManager=null,this._unsubEditedContent=null}static{this.styles=i`
+import { getGlobalEditorManager, onGlobalEditorManagerChange } from "../core/globalManager.mjs";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.mjs";
+import { LitElement, css, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { getBasePlugins, getContent } from "@intlayer/core/interpreter";
+
+//#region src/components/EditedContent.ts
+/**
+* <intlayer-edited-content>
+*
+* Framework-agnostic Lit element 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 LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.dictionaryKey = "";
+		this.keyPathJson = "[]";
+		this.locale = "";
+		this._editedText = null;
+		this._unsubManager = null;
+		this._unsubEditedContent = null;
+	}
+	static {
+		this.styles = css`
     :host {
       display: contents;
     }
-  `}connectedCallback(){super.connectedCallback(),this._subscribeToManager()}disconnectedCallback(){super.disconnectedCallback(),this._teardown()}_teardown(){this._unsubManager?.(),this._unsubEditedContent?.(),this._unsubManager=null,this._unsubEditedContent=null}_getKeyPath(){try{return JSON.parse(this.keyPathJson)}catch{return[]}}_resolveEditedText(e){let t=this._getKeyPath(),n=e.getContentValue(this.dictionaryKey,t);if(n==null){this._editedText=null;return}if(typeof n==`string`||typeof n==`number`){this._editedText=String(n);return}if(typeof n==`object`){let e=this.locale||void 0,r=l(n,{locale:e,dictionaryKey:this.dictionaryKey,keyPath:t},c(e));typeof r==`string`||typeof r==`number`?this._editedText=String(r):(console.error(`[intlayer-edited-content] Incorrect edited content format. Expected string. Value: ${JSON.stringify(r)}`),this._editedText=null);return}this._editedText=null}_setupManagerSubscriptions(e){this._resolveEditedText(e);let t=()=>this._resolveEditedText(e);e.editedContent.addEventListener(`change`,t),this._unsubEditedContent=()=>e.editedContent.removeEventListener(`change`,t)}_subscribeToManager(){let n=e();n&&this._setupManagerSubscriptions(n),this._unsubManager=t(e=>{this._unsubEditedContent?.(),this._unsubEditedContent=null,e?this._setupManagerSubscriptions(e):this._editedText=null})}render(){return a`
+  `;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._subscribeToManager();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._teardown();
+	}
+	_teardown() {
+		this._unsubManager?.();
+		this._unsubEditedContent?.();
+		this._unsubManager = null;
+		this._unsubEditedContent = null;
+	}
+	_getKeyPath() {
+		try {
+			return JSON.parse(this.keyPathJson);
+		} catch {
+			return [];
+		}
+	}
+	_resolveEditedText(manager) {
+		const keyPath = this._getKeyPath();
+		const editedValue = manager.getContentValue(this.dictionaryKey, keyPath);
+		if (editedValue === void 0 || editedValue === null) {
+			this._editedText = null;
+			return;
+		}
+		if (typeof editedValue === "string" || typeof editedValue === "number") {
+			this._editedText = String(editedValue);
+			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;
+			}
+			return;
+		}
+		this._editedText = null;
+	}
+	_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;
+		});
+	}
+	render() {
+		return html`
       <intlayer-content-selector-wrapper
         key-path=${this.keyPathJson}
         dictionary-key=${this.dictionaryKey}
       >
-        ${this._editedText===null?a`<slot></slot>`:this._editedText}
+        ${this._editedText !== null ? this._editedText : html`<slot></slot>`}
       </intlayer-content-selector-wrapper>
-    `}};n([o({type:String,attribute:`dictionary-key`})],u.prototype,`dictionaryKey`,void 0),n([o({type:String,attribute:`key-path`})],u.prototype,`keyPathJson`,void 0),n([o({type:String,attribute:`locale`})],u.prototype,`locale`,void 0),n([s()],u.prototype,`_editedText`,void 0);const d=()=>{typeof customElements>`u`||customElements.get(`intlayer-edited-content`)||customElements.define(`intlayer-edited-content`,u)};export{u as IntlayerEditedContentElement,d as defineIntlayerEditedContent};
+    `;
+	}
+};
+__decorate([property({
+	type: String,
+	attribute: "dictionary-key"
+})], IntlayerEditedContentElement.prototype, "dictionaryKey", void 0);
+__decorate([property({
+	type: String,
+	attribute: "key-path"
+})], IntlayerEditedContentElement.prototype, "keyPathJson", void 0);
+__decorate([property({
+	type: String,
+	attribute: "locale"
+})], IntlayerEditedContentElement.prototype, "locale", void 0);
+__decorate([state()], IntlayerEditedContentElement.prototype, "_editedText", void 0);
+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/components/EditedContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditedContent.mjs","names":[],"sources":["../../../src/components/EditedContent.ts"],"sourcesContent":["import { getBasePlugins, getContent } from '@intlayer/core/interpreter';\nimport type { KeyPath } from '@intlayer/types/keyPath';\nimport { css, html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport type { EditorStateManager } from '../core/EditorStateManager';\nimport {\n  getGlobalEditorManager,\n  onGlobalEditorManagerChange,\n} from '../core/globalManager';\n\n/**\n * <intlayer-edited-content>\n *\n * Framework-agnostic Lit element 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 */\nexport class IntlayerEditedContentElement extends LitElement {\n  static styles = css`\n    :host {\n      display: contents;\n    }\n  `;\n\n  @property({ type: String, attribute: 'dictionary-key' }) dictionaryKey = '';\n  @property({ type: String, attribute: 'key-path' }) keyPathJson = '[]';\n  @property({ type: String, attribute: 'locale' }) locale = '';\n\n  @state() private _editedText: string | null = null;\n\n  private _unsubManager: (() => void) | null = null;\n  private _unsubEditedContent: (() => void) | null = null;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this._subscribeToManager();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._teardown();\n  }\n\n  private _teardown(): void {\n    this._unsubManager?.();\n    this._unsubEditedContent?.();\n    this._unsubManager = null;\n    this._unsubEditedContent = null;\n  }\n\n  private _getKeyPath(): KeyPath[] {\n    try {\n      return JSON.parse(this.keyPathJson);\n    } catch {\n      return [];\n    }\n  }\n\n  private _resolveEditedText(manager: EditorStateManager): void {\n    const keyPath = this._getKeyPath();\n    const editedValue = manager.getContentValue(this.dictionaryKey, keyPath);\n\n    if (editedValue === undefined || editedValue === null) {\n      this._editedText = null;\n      return;\n    }\n\n    if (typeof editedValue === 'string' || typeof editedValue === 'number') {\n      this._editedText = String(editedValue);\n      return;\n    }\n\n    if (typeof editedValue === 'object') {\n      const locale = this.locale || undefined;\n      const transformed = getContent(\n        editedValue,\n        {\n          locale: locale as any,\n          dictionaryKey: this.dictionaryKey,\n          keyPath,\n        },\n        getBasePlugins(locale as any)\n      );\n      if (typeof transformed === 'string' || typeof transformed === 'number') {\n        this._editedText = String(transformed);\n      } else {\n        console.error(\n          `[intlayer-edited-content] Incorrect edited content format. Expected string. Value: ${JSON.stringify(transformed)}`\n        );\n        this._editedText = null;\n      }\n      return;\n    }\n\n    this._editedText = null;\n  }\n\n  private _setupManagerSubscriptions(manager: EditorStateManager): void {\n    this._resolveEditedText(manager);\n\n    const handleChange = () => this._resolveEditedText(manager);\n    manager.editedContent.addEventListener('change', handleChange);\n\n    this._unsubEditedContent = () =>\n      manager.editedContent.removeEventListener('change', handleChange);\n  }\n\n  private _subscribeToManager(): void {\n    const manager = getGlobalEditorManager();\n    if (manager) {\n      this._setupManagerSubscriptions(manager);\n    }\n\n    this._unsubManager = onGlobalEditorManagerChange((m) => {\n      this._unsubEditedContent?.();\n      this._unsubEditedContent = null;\n      if (m) {\n        this._setupManagerSubscriptions(m);\n      } else {\n        this._editedText = null;\n      }\n    });\n  }\n\n  render() {\n    return html`\n      <intlayer-content-selector-wrapper\n        key-path=${this.keyPathJson}\n        dictionary-key=${this.dictionaryKey}\n      >\n        ${this._editedText !== null ? this._editedText : html`<slot></slot>`}\n      </intlayer-content-selector-wrapper>\n    `;\n  }\n}\n\nexport const defineIntlayerEditedContent = (): void => {\n  if (typeof customElements === 'undefined') return;\n\n  if (!customElements.get('intlayer-edited-content')) {\n    customElements.define(\n      'intlayer-edited-content',\n      IntlayerEditedContentElement\n    );\n  }\n};\n"],"mappings":"yUAwBA,IAAa,EAAb,cAAkD,CAAW,kDAOc,oBACR,iBACP,oBAEZ,wBAED,8BACM,wBAbnC,CAAG;;;;IAenB,mBAA0B,CACxB,MAAM,mBAAmB,CACzB,KAAK,qBAAqB,CAG5B,sBAA6B,CAC3B,MAAM,sBAAsB,CAC5B,KAAK,WAAW,CAGlB,WAA0B,CACxB,KAAK,iBAAiB,CACtB,KAAK,uBAAuB,CAC5B,KAAK,cAAgB,KACrB,KAAK,oBAAsB,KAG7B,aAAiC,CAC/B,GAAI,CACF,OAAO,KAAK,MAAM,KAAK,YAAY,MAC7B,CACN,MAAO,EAAE,EAIb,mBAA2B,EAAmC,CAC5D,IAAM,EAAU,KAAK,aAAa,CAC5B,EAAc,EAAQ,gBAAgB,KAAK,cAAe,EAAQ,CAExE,GAAI,GAA6C,KAAM,CACrD,KAAK,YAAc,KACnB,OAGF,GAAI,OAAO,GAAgB,UAAY,OAAO,GAAgB,SAAU,CACtE,KAAK,YAAc,OAAO,EAAY,CACtC,OAGF,GAAI,OAAO,GAAgB,SAAU,CACnC,IAAM,EAAS,KAAK,QAAU,IAAA,GACxB,EAAc,EAClB,EACA,CACU,SACR,cAAe,KAAK,cACpB,UACD,CACD,EAAe,EAAc,CAC9B,CACG,OAAO,GAAgB,UAAY,OAAO,GAAgB,SAC5D,KAAK,YAAc,OAAO,EAAY,EAEtC,QAAQ,MACN,sFAAsF,KAAK,UAAU,EAAY,GAClH,CACD,KAAK,YAAc,MAErB,OAGF,KAAK,YAAc,KAGrB,2BAAmC,EAAmC,CACpE,KAAK,mBAAmB,EAAQ,CAEhC,IAAM,MAAqB,KAAK,mBAAmB,EAAQ,CAC3D,EAAQ,cAAc,iBAAiB,SAAU,EAAa,CAE9D,KAAK,wBACH,EAAQ,cAAc,oBAAoB,SAAU,EAAa,CAGrE,qBAAoC,CAClC,IAAM,EAAU,GAAwB,CACpC,GACF,KAAK,2BAA2B,EAAQ,CAG1C,KAAK,cAAgB,EAA6B,GAAM,CACtD,KAAK,uBAAuB,CAC5B,KAAK,oBAAsB,KACvB,EACF,KAAK,2BAA2B,EAAE,CAElC,KAAK,YAAc,MAErB,CAGJ,QAAS,CACP,MAAO,EAAI;;mBAEI,KAAK,YAAY;yBACX,KAAK,cAAc;;UAElC,KAAK,cAAgB,KAA0B,CAAI,gBAAvB,KAAK,YAAkC;;WA1G1E,EAAS,CAAE,KAAM,OAAQ,UAAW,iBAAkB,CAAC,CAAA,CAAA,EAAA,UAAA,gBAAA,IAAA,GAAA,IACvD,EAAS,CAAE,KAAM,OAAQ,UAAW,WAAY,CAAC,CAAA,CAAA,EAAA,UAAA,cAAA,IAAA,GAAA,IACjD,EAAS,CAAE,KAAM,OAAQ,UAAW,SAAU,CAAC,CAAA,CAAA,EAAA,UAAA,SAAA,IAAA,GAAA,IAE/C,GAAO,CAAA,CAAA,EAAA,UAAA,cAAA,IAAA,GAAA,CA4GV,MAAa,MAA0C,CACjD,OAAO,eAAmB,KAEzB,eAAe,IAAI,0BAA0B,EAChD,eAAe,OACb,0BACA,EACD"}
+{"version":3,"file":"EditedContent.mjs","names":[],"sources":["../../../src/components/EditedContent.ts"],"sourcesContent":["import { getBasePlugins, getContent } from '@intlayer/core/interpreter';\nimport type { KeyPath } from '@intlayer/types/keyPath';\nimport { css, html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport type { EditorStateManager } from '../core/EditorStateManager';\nimport {\n  getGlobalEditorManager,\n  onGlobalEditorManagerChange,\n} from '../core/globalManager';\n\n/**\n * <intlayer-edited-content>\n *\n * Framework-agnostic Lit element 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 */\nexport class IntlayerEditedContentElement extends LitElement {\n  static styles = css`\n    :host {\n      display: contents;\n    }\n  `;\n\n  @property({ type: String, attribute: 'dictionary-key' }) dictionaryKey = '';\n  @property({ type: String, attribute: 'key-path' }) keyPathJson = '[]';\n  @property({ type: String, attribute: 'locale' }) locale = '';\n\n  @state() private _editedText: string | null = null;\n\n  private _unsubManager: (() => void) | null = null;\n  private _unsubEditedContent: (() => void) | null = null;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this._subscribeToManager();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._teardown();\n  }\n\n  private _teardown(): void {\n    this._unsubManager?.();\n    this._unsubEditedContent?.();\n    this._unsubManager = null;\n    this._unsubEditedContent = null;\n  }\n\n  private _getKeyPath(): KeyPath[] {\n    try {\n      return JSON.parse(this.keyPathJson);\n    } catch {\n      return [];\n    }\n  }\n\n  private _resolveEditedText(manager: EditorStateManager): void {\n    const keyPath = this._getKeyPath();\n    const editedValue = manager.getContentValue(this.dictionaryKey, keyPath);\n\n    if (editedValue === undefined || editedValue === null) {\n      this._editedText = null;\n      return;\n    }\n\n    if (typeof editedValue === 'string' || typeof editedValue === 'number') {\n      this._editedText = String(editedValue);\n      return;\n    }\n\n    if (typeof editedValue === 'object') {\n      const locale = this.locale || undefined;\n      const transformed = getContent(\n        editedValue,\n        {\n          locale: locale as any,\n          dictionaryKey: this.dictionaryKey,\n          keyPath,\n        },\n        getBasePlugins(locale as any)\n      );\n      if (typeof transformed === 'string' || typeof transformed === 'number') {\n        this._editedText = String(transformed);\n      } else {\n        console.error(\n          `[intlayer-edited-content] Incorrect edited content format. Expected string. Value: ${JSON.stringify(transformed)}`\n        );\n        this._editedText = null;\n      }\n      return;\n    }\n\n    this._editedText = null;\n  }\n\n  private _setupManagerSubscriptions(manager: EditorStateManager): void {\n    this._resolveEditedText(manager);\n\n    const handleChange = () => this._resolveEditedText(manager);\n    manager.editedContent.addEventListener('change', handleChange);\n\n    this._unsubEditedContent = () =>\n      manager.editedContent.removeEventListener('change', handleChange);\n  }\n\n  private _subscribeToManager(): void {\n    const manager = getGlobalEditorManager();\n    if (manager) {\n      this._setupManagerSubscriptions(manager);\n    }\n\n    this._unsubManager = onGlobalEditorManagerChange((m) => {\n      this._unsubEditedContent?.();\n      this._unsubEditedContent = null;\n      if (m) {\n        this._setupManagerSubscriptions(m);\n      } else {\n        this._editedText = null;\n      }\n    });\n  }\n\n  render() {\n    return html`\n      <intlayer-content-selector-wrapper\n        key-path=${this.keyPathJson}\n        dictionary-key=${this.dictionaryKey}\n      >\n        ${this._editedText !== null ? this._editedText : html`<slot></slot>`}\n      </intlayer-content-selector-wrapper>\n    `;\n  }\n}\n\nexport const defineIntlayerEditedContent = (): void => {\n  if (typeof customElements === 'undefined') return;\n\n  if (!customElements.get('intlayer-edited-content')) {\n    customElements.define(\n      'intlayer-edited-content',\n      IntlayerEditedContentElement\n    );\n  }\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAwBA,IAAa,+BAAb,cAAkD,WAAW;;;uBAOc;qBACR;gBACP;qBAEZ;uBAED;6BACM;;;gBAbnC,GAAG;;;;;;CAenB,oBAA0B;AACxB,QAAM,mBAAmB;AACzB,OAAK,qBAAqB;;CAG5B,uBAA6B;AAC3B,QAAM,sBAAsB;AAC5B,OAAK,WAAW;;CAGlB,AAAQ,YAAkB;AACxB,OAAK,iBAAiB;AACtB,OAAK,uBAAuB;AAC5B,OAAK,gBAAgB;AACrB,OAAK,sBAAsB;;CAG7B,AAAQ,cAAyB;AAC/B,MAAI;AACF,UAAO,KAAK,MAAM,KAAK,YAAY;UAC7B;AACN,UAAO,EAAE;;;CAIb,AAAQ,mBAAmB,SAAmC;EAC5D,MAAM,UAAU,KAAK,aAAa;EAClC,MAAM,cAAc,QAAQ,gBAAgB,KAAK,eAAe,QAAQ;AAExE,MAAI,gBAAgB,UAAa,gBAAgB,MAAM;AACrD,QAAK,cAAc;AACnB;;AAGF,MAAI,OAAO,gBAAgB,YAAY,OAAO,gBAAgB,UAAU;AACtE,QAAK,cAAc,OAAO,YAAY;AACtC;;AAGF,MAAI,OAAO,gBAAgB,UAAU;GACnC,MAAM,SAAS,KAAK,UAAU;GAC9B,MAAM,cAAc,WAClB,aACA;IACU;IACR,eAAe,KAAK;IACpB;IACD,EACD,eAAe,OAAc,CAC9B;AACD,OAAI,OAAO,gBAAgB,YAAY,OAAO,gBAAgB,SAC5D,MAAK,cAAc,OAAO,YAAY;QACjC;AACL,YAAQ,MACN,sFAAsF,KAAK,UAAU,YAAY,GAClH;AACD,SAAK,cAAc;;AAErB;;AAGF,OAAK,cAAc;;CAGrB,AAAQ,2BAA2B,SAAmC;AACpE,OAAK,mBAAmB,QAAQ;EAEhC,MAAM,qBAAqB,KAAK,mBAAmB,QAAQ;AAC3D,UAAQ,cAAc,iBAAiB,UAAU,aAAa;AAE9D,OAAK,4BACH,QAAQ,cAAc,oBAAoB,UAAU,aAAa;;CAGrE,AAAQ,sBAA4B;EAClC,MAAM,UAAU,wBAAwB;AACxC,MAAI,QACF,MAAK,2BAA2B,QAAQ;AAG1C,OAAK,gBAAgB,6BAA6B,MAAM;AACtD,QAAK,uBAAuB;AAC5B,QAAK,sBAAsB;AAC3B,OAAI,EACF,MAAK,2BAA2B,EAAE;OAElC,MAAK,cAAc;IAErB;;CAGJ,SAAS;AACP,SAAO,IAAI;;mBAEI,KAAK,YAAY;yBACX,KAAK,cAAc;;UAElC,KAAK,gBAAgB,OAAO,KAAK,cAAc,IAAI,gBAAgB;;;;;YA1G1E,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAkB,CAAC;YACvD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAY,CAAC;YACjD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAU,CAAC;YAE/C,OAAO;AA4GV,MAAa,oCAA0C;AACrD,KAAI,OAAO,mBAAmB,YAAa;AAE3C,KAAI,CAAC,eAAe,IAAI,0BAA0B,CAChD,gBAAe,OACb,2BACA,6BACD"}

package/dist/esm/components/IntlayerEditor.mjs

@@ -1 +1,84 @@
-import{i as e,r as t}from"../components-RtOXxg9h.mjs";export{t as IntlayerEditorElement,e as defineIntlayerEditorElement};
+import { getGlobalEditorManager, onGlobalEditorManagerChange } from "../core/globalManager.mjs";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.mjs";
+import { initEditorClient, stopEditorClient } from "../core/initEditorClient.mjs";
+import { LitElement } from "lit";
+import { property } from "lit/decorators.js";
+
+//#region src/components/IntlayerEditor.ts
+/**
+* <intlayer-editor>
+*
+* A framework-agnostic Lit element 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 (display: contents, empty shadow root).
+*
+* @prop {IntlayerConfig} configuration  - The Intlayer config (required; set as 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 LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this._initialized = false;
+		this._unsubManager = null;
+	}
+	/** No visible UI — render nothing into the shadow root */
+	createRenderRoot() {
+		return this;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._init();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._unsubManager?.();
+		this._unsubManager = null;
+		if (this._initialized) {
+			stopEditorClient();
+			this._initialized = false;
+		}
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("configuration") && !this._initialized) this._init();
+		if (changedProperties.has("locale") && this.locale) this._syncLocale(this.locale);
+	}
+	_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((manager) => {
+				if (manager) {
+					this._unsubManager?.();
+					this._unsubManager = null;
+					manager.currentLocale.set(locale);
+				}
+			});
+		}
+	}
+};
+__decorate([property({ attribute: false })], IntlayerEditorElement.prototype, "configuration", void 0);
+__decorate([property({ type: String })], IntlayerEditorElement.prototype, "locale", void 0);
+const defineIntlayerEditorElement = () => {
+	if (typeof customElements === "undefined") return;
+	if (!customElements.get("intlayer-editor")) customElements.define("intlayer-editor", IntlayerEditorElement);
+};
+
+//#endregion
+export { IntlayerEditorElement, defineIntlayerEditorElement };
+//# sourceMappingURL=IntlayerEditor.mjs.map

package/dist/esm/components/IntlayerEditor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntlayerEditor.mjs","names":[],"sources":["../../../src/components/IntlayerEditor.ts"],"sourcesContent":["import type { Locale } from '@intlayer/types/allLocales';\nimport type { IntlayerConfig } from '@intlayer/types/config';\nimport { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport {\n  getGlobalEditorManager,\n  onGlobalEditorManagerChange,\n} from '../core/globalManager';\nimport { initEditorClient, stopEditorClient } from '../core/initEditorClient';\n\n/**\n * <intlayer-editor>\n *\n * A framework-agnostic Lit element 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 (display: contents, empty shadow root).\n *\n * @prop {IntlayerConfig} configuration  - The Intlayer config (required; set as 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 */\nexport class IntlayerEditorElement extends LitElement {\n  /** No visible UI — render nothing into the shadow root */\n  createRenderRoot(): this {\n    return this;\n  }\n\n  @property({ attribute: false }) configuration?: IntlayerConfig;\n\n  @property({ type: String }) locale?: string;\n\n  private _initialized = false;\n  private _unsubManager: (() => void) | null = null;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this._init();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._unsubManager?.();\n    this._unsubManager = null;\n\n    if (this._initialized) {\n      stopEditorClient();\n      this._initialized = false;\n    }\n  }\n\n  updated(changedProperties: Map<string | symbol, unknown>): void {\n    if (changedProperties.has('configuration') && !this._initialized) {\n      this._init();\n    }\n\n    if (changedProperties.has('locale') && this.locale) {\n      this._syncLocale(this.locale);\n    }\n  }\n\n  private _init(): void {\n    if (this._initialized) return;\n\n    initEditorClient();\n\n    this._initialized = true;\n\n    // Sync locale immediately after init if it is already set\n    if (this.locale) {\n      this._syncLocale(this.locale);\n    }\n  }\n\n  private _syncLocale(locale: string): void {\n    const manager = getGlobalEditorManager();\n\n    if (manager) {\n      manager.currentLocale.set(locale as Locale);\n    } else {\n      // Manager may not be ready yet — wait for it\n      this._unsubManager?.();\n      this._unsubManager = onGlobalEditorManagerChange((manager) => {\n        if (manager) {\n          this._unsubManager?.();\n          this._unsubManager = null;\n\n          manager.currentLocale.set(locale as Locale);\n        }\n      });\n    }\n  }\n}\n\nexport const defineIntlayerEditorElement = (): void => {\n  if (typeof customElements === 'undefined') return;\n\n  if (!customElements.get('intlayer-editor')) {\n    customElements.define('intlayer-editor', IntlayerEditorElement);\n  }\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,IAAa,wBAAb,cAA2C,WAAW;;;sBAU7B;uBACsB;;;CAT7C,mBAAyB;AACvB,SAAO;;CAUT,oBAA0B;AACxB,QAAM,mBAAmB;AACzB,OAAK,OAAO;;CAGd,uBAA6B;AAC3B,QAAM,sBAAsB;AAC5B,OAAK,iBAAiB;AACtB,OAAK,gBAAgB;AAErB,MAAI,KAAK,cAAc;AACrB,qBAAkB;AAClB,QAAK,eAAe;;;CAIxB,QAAQ,mBAAwD;AAC9D,MAAI,kBAAkB,IAAI,gBAAgB,IAAI,CAAC,KAAK,aAClD,MAAK,OAAO;AAGd,MAAI,kBAAkB,IAAI,SAAS,IAAI,KAAK,OAC1C,MAAK,YAAY,KAAK,OAAO;;CAIjC,AAAQ,QAAc;AACpB,MAAI,KAAK,aAAc;AAEvB,oBAAkB;AAElB,OAAK,eAAe;AAGpB,MAAI,KAAK,OACP,MAAK,YAAY,KAAK,OAAO;;CAIjC,AAAQ,YAAY,QAAsB;EACxC,MAAM,UAAU,wBAAwB;AAExC,MAAI,QACF,SAAQ,cAAc,IAAI,OAAiB;OACtC;AAEL,QAAK,iBAAiB;AACtB,QAAK,gBAAgB,6BAA6B,YAAY;AAC5D,QAAI,SAAS;AACX,UAAK,iBAAiB;AACtB,UAAK,gBAAgB;AAErB,aAAQ,cAAc,IAAI,OAAiB;;KAE7C;;;;YA7DL,SAAS,EAAE,WAAW,OAAO,CAAC;YAE9B,SAAS,EAAE,MAAM,QAAQ,CAAC;AAgE7B,MAAa,oCAA0C;AACrD,KAAI,OAAO,mBAAmB,YAAa;AAE3C,KAAI,CAAC,eAAe,IAAI,kBAAkB,CACxC,gBAAe,OAAO,mBAAmB,sBAAsB"}

package/dist/esm/components/index.mjs

@@ -1 +1,6 @@
-import{IntlayerContentSelectorWrapperElement as e,defineIntlayerContentSelectorWrapper as t}from"./ContentSelectorWrapper.mjs";import{IntlayerEditedContentElement as n,defineIntlayerEditedContent as r}from"./EditedContent.mjs";import{i,n as a,r as o,t as s}from"../components-RtOXxg9h.mjs";export{s as IntlayerContentSelectorElement,e as IntlayerContentSelectorWrapperElement,n as IntlayerEditedContentElement,o as IntlayerEditorElement,t as defineIntlayerContentSelectorWrapper,r as defineIntlayerEditedContent,i as defineIntlayerEditorElement,a as defineIntlayerElements};
+import { IntlayerContentSelectorWrapperElement, defineIntlayerContentSelectorWrapper } from "./ContentSelectorWrapper.mjs";
+import { IntlayerEditedContentElement, defineIntlayerEditedContent } from "./EditedContent.mjs";
+import { IntlayerEditorElement, defineIntlayerEditorElement } from "./IntlayerEditor.mjs";
+import { IntlayerContentSelectorElement, defineIntlayerElements } from "./ContentSelector.mjs";
+
+export { IntlayerContentSelectorElement, IntlayerContentSelectorWrapperElement, IntlayerEditedContentElement, IntlayerEditorElement, defineIntlayerContentSelectorWrapper, defineIntlayerEditedContent, defineIntlayerEditorElement, defineIntlayerElements };

package/dist/esm/core/CrossFrameMessenger.mjs

@@ -1,2 +1,77 @@
-import{compareUrls as e}from"../compareUrls.mjs";const t=()=>Math.random().toString(36).slice(2);var n=class{constructor(e){this._subscribers=new Map,this._windowHandler=null,this._seenMessageIds=new Set,this._config=e,this.senderId=t()}start(){typeof window>`u`||this._windowHandler||(this._windowHandler=e=>{this._handleMessage(e)},window.addEventListener(`message`,this._windowHandler))}stop(){this._windowHandler&&=(window.removeEventListener(`message`,this._windowHandler),null)}send(e,n){let r={type:e,data:n,senderId:this.senderId,messageId:t()};for(let e of this._config.allowedOrigins)e&&this._config.postMessageFn(r,e)}subscribe(e,t){return this._subscribers.has(e)||this._subscribers.set(e,new Set),this._subscribers.get(e).add(t),()=>{this._subscribers.get(e)?.delete(t)}}_handleMessage(t){let n=t.data;if(!n||typeof n!=`object`)return;let{type:r,data:i,senderId:a,messageId:o}=n;if(!r||typeof r!=`string`||a===this.senderId)return;if(o){if(this._seenMessageIds.has(o))return;this._seenMessageIds.add(o),this._seenMessageIds.size>200&&this._seenMessageIds.clear()}let{allowedOrigins:s}=this._config;if(!(!s||s.length===0||s.includes(`*`)||s.filter(e=>!!e&&e!==``).some(n=>e(n,t.origin))))return;let c=this._subscribers.get(r);if(c)for(let e of c)e(i,a)}};export{n as CrossFrameMessenger};
+import { compareUrls } from "../compareUrls.mjs";
+
+//#region src/core/CrossFrameMessenger.ts
+const randomUUID = () => Math.random().toString(36).slice(2);
+/**
+* CrossFrameMessenger manages all cross-frame postMessage communication.
+* It owns a single window message listener and routes incoming messages to
+* type-specific subscribers.
+*
+* Replaces CommunicatorContext + useCrossFrameMessageListener across all frameworks.
+*/
+var CrossFrameMessenger = class {
+	constructor(config) {
+		this._subscribers = /* @__PURE__ */ new Map();
+		this._windowHandler = null;
+		this._seenMessageIds = /* @__PURE__ */ new Set();
+		this._config = config;
+		this.senderId = randomUUID();
+	}
+	/** Start listening for incoming messages on window. */
+	start() {
+		if (typeof window === "undefined") return;
+		if (this._windowHandler) return;
+		this._windowHandler = (event) => {
+			this._handleMessage(event);
+		};
+		window.addEventListener("message", this._windowHandler);
+	}
+	/** Stop listening and clean up. */
+	stop() {
+		if (this._windowHandler) {
+			window.removeEventListener("message", this._windowHandler);
+			this._windowHandler = null;
+		}
+	}
+	/** Send a message payload to all configured target origins. */
+	send(type, data) {
+		const payload = {
+			type,
+			data,
+			senderId: this.senderId,
+			messageId: randomUUID()
+		};
+		for (const origin of this._config.allowedOrigins) if (origin) this._config.postMessageFn(payload, origin);
+	}
+	/**
+	* Subscribe to messages of a given type.
+	* Returns an unsubscribe function.
+	*/
+	subscribe(type, handler) {
+		if (!this._subscribers.has(type)) this._subscribers.set(type, /* @__PURE__ */ new Set());
+		this._subscribers.get(type).add(handler);
+		return () => {
+			this._subscribers.get(type)?.delete(handler);
+		};
+	}
+	_handleMessage(event) {
+		const payload = event.data;
+		if (!payload || typeof payload !== "object") return;
+		const { type, data, senderId: msgSenderId, messageId } = payload;
+		if (!type || typeof type !== "string") return;
+		if (msgSenderId === this.senderId) return;
+		if (messageId) {
+			if (this._seenMessageIds.has(messageId)) return;
+			this._seenMessageIds.add(messageId);
+			if (this._seenMessageIds.size > 200) this._seenMessageIds.clear();
+		}
+		const { allowedOrigins } = this._config;
+		if (!(!allowedOrigins || allowedOrigins.length === 0 || allowedOrigins.includes("*") || allowedOrigins.filter((url) => Boolean(url) && url !== "").some((url) => compareUrls(url, event.origin)))) return;
+		const handlers = this._subscribers.get(type);
+		if (handlers) for (const handler of handlers) handler(data, msgSenderId);
+	}
+};
+
+//#endregion
+export { CrossFrameMessenger };
 //# sourceMappingURL=CrossFrameMessenger.mjs.map