@intlayer/editor 8.7.6-canary.0 → 8.7.7

package/dist/cjs/components/ContentSelector.cjs

@@ -1,22 +1,38 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
-const require_decorate = require('../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.cjs');
 const require_components_ContentSelectorWrapper = require('./ContentSelectorWrapper.cjs');
 const require_components_EditedContent = require('./EditedContent.cjs');
 const require_components_IntlayerEditor = require('./IntlayerEditor.cjs');
-let lit = require("lit");
-let lit_decorators_js = require("lit/decorators.js");
 
 //#region src/components/ContentSelector.ts
 const DEFAULT_PRESS_DURATION = 250;
+const STYLES = `
+  :host {
+    display: contents;
+  }
+
+  .wrapper {
+    display: inline-block;
+    cursor: pointer;
+    user-select: none;
+    border-radius: 0.375rem;
+    outline-width: 2px;
+    outline-offset: 4px;
+    outline-style: solid;
+    outline-color: transparent;
+    transition: all 100ms 50ms ease-in-out;
+  }
+
+  .wrapper[data-active] {
+    outline-color: inherit;
+  }
+`;
+const _HTMLElement = typeof HTMLElement !== "undefined" ? HTMLElement : class {};
 /**
 * <intlayer-content-selector>
 *
 * A framework-agnostic web component that wraps content with Intlayer editor
 * selection UI (hover outline, long-press to select, click-outside to deselect).
 *
-* Replaces the per-framework ContentSelector components (React, Svelte, Vue, Solid).
-*
 * @fires intlayer:press     - Fired after a long press (pressDuration ms). Bubbles.
 * @fires intlayer:hover     - Fired on mouseenter. Bubbles.
 * @fires intlayer:unhover   - Fired on mouseleave / mouseup. Bubbles.
@@ -25,57 +41,80 @@ const DEFAULT_PRESS_DURATION = 250;
 * @prop {boolean} isSelecting   - Whether this element is currently selected (external state)
 * @prop {number}  pressDuration - Long-press threshold in ms. Default: 250
 */
-var IntlayerContentSelectorElement = class extends lit.LitElement {
-	constructor(..._args) {
-		super(..._args);
-		this.isSelecting = false;
-		this.pressDuration = DEFAULT_PRESS_DURATION;
-		this._isHovered = false;
-		this._isSelectingState = false;
-		this._pressTimer = null;
-		this._clickOutsideHandler = null;
-	}
-	static {
-		this.styles = lit.css`
-    :host {
-      display: contents;
-    }
-
-    .wrapper {
-      display: inline-block;
-      cursor: pointer;
-      user-select: none;
-      border-radius: 0.375rem;
-      outline-width: 2px;
-      outline-offset: 4px;
-      outline-style: solid;
-      outline-color: transparent;
-      transition: all 100ms 50ms ease-in-out;
-    }
-
-    .wrapper[data-active] {
-      outline-color: inherit;
-    }
-  `;
+var IntlayerContentSelectorElement = class extends _HTMLElement {
+	_isSelecting = false;
+	_pressDuration = DEFAULT_PRESS_DURATION;
+	_isHovered = false;
+	_isSelectingState = false;
+	_wrapper;
+	_pressTimer = null;
+	_clickOutsideHandler = null;
+	static get observedAttributes() {
+		return ["is-selecting", "press-duration"];
+	}
+	get isSelecting() {
+		return this._isSelecting;
+	}
+	set isSelecting(v) {
+		this._isSelecting = v;
+		this._updateActiveState();
+	}
+	get pressDuration() {
+		return this._pressDuration;
+	}
+	set pressDuration(v) {
+		this._pressDuration = v;
+	}
+	constructor() {
+		super();
+		const shadow = this.attachShadow({ mode: "open" });
+		const style = document.createElement("style");
+		style.textContent = STYLES;
+		shadow.appendChild(style);
+		const wrapper = document.createElement("span");
+		wrapper.className = "wrapper";
+		wrapper.setAttribute("role", "button");
+		wrapper.setAttribute("tabindex", "0");
+		wrapper.appendChild(document.createElement("slot"));
+		shadow.appendChild(wrapper);
+		this._wrapper = wrapper;
+		wrapper.addEventListener("mousedown", () => this._handleMouseDown());
+		wrapper.addEventListener("mouseup", () => this._handleMouseUpOrLeave());
+		wrapper.addEventListener("mouseleave", () => this._handleMouseUpOrLeave());
+		wrapper.addEventListener("mouseenter", () => this._handleMouseEnter());
+		wrapper.addEventListener("click", (e) => this._handleClick(e));
+		wrapper.addEventListener("touchstart", () => this._handleMouseDown());
+		wrapper.addEventListener("touchend", () => this._handleMouseUpOrLeave());
+		wrapper.addEventListener("touchcancel", () => this._handleMouseUpOrLeave());
+		wrapper.addEventListener("blur", () => this._handleBlur());
+	}
+	attributeChangedCallback(name, _oldVal, newVal) {
+		if (name === "is-selecting") {
+			this._isSelecting = newVal !== null;
+			this._updateActiveState();
+		} else if (name === "press-duration") this._pressDuration = newVal !== null ? parseInt(newVal, 10) : DEFAULT_PRESS_DURATION;
 	}
 	connectedCallback() {
-		super.connectedCallback();
 		this._clickOutsideHandler = (e) => {
 			if (!e.composedPath().includes(this)) {
 				this._isSelectingState = false;
 				this._dispatch("intlayer:click-outside");
+				this._updateActiveState();
 			}
 		};
 		document.addEventListener("mousedown", this._clickOutsideHandler);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback();
 		if (this._clickOutsideHandler) {
 			document.removeEventListener("mousedown", this._clickOutsideHandler);
 			this._clickOutsideHandler = null;
 		}
 		this._clearPressTimer();
 	}
+	_updateActiveState() {
+		if (this._isSelecting || this._isSelectingState || this._isHovered) this._wrapper.setAttribute("data-active", "");
+		else this._wrapper.removeAttribute("data-active");
+	}
 	_clearPressTimer() {
 		if (this._pressTimer !== null) {
 			clearTimeout(this._pressTimer);
@@ -92,11 +131,13 @@ var IntlayerContentSelectorElement = class extends lit.LitElement {
 		this._clearPressTimer();
 		this._pressTimer = setTimeout(() => {
 			this._isSelectingState = true;
+			this._updateActiveState();
 			this._dispatch("intlayer:press");
-		}, this.pressDuration);
+		}, this._pressDuration);
 	}
 	_handleMouseEnter() {
 		this._isHovered = true;
+		this._updateActiveState();
 		this._dispatch("intlayer:hover");
 	}
 	_handleMouseUpOrLeave() {
@@ -105,50 +146,19 @@ var IntlayerContentSelectorElement = class extends lit.LitElement {
 			this._dispatch("intlayer:unhover");
 		}
 		this._clearPressTimer();
+		this._updateActiveState();
 	}
 	_handleClick(e) {
-		if (this.isSelecting || this._isSelectingState) {
+		if (this._isSelecting || this._isSelectingState) {
 			e.preventDefault();
 			e.stopPropagation();
 		}
 	}
 	_handleBlur() {
 		this._isSelectingState = false;
-	}
-	render() {
-		return lit.html`
-      <span
-        class="wrapper"
-        ?data-active=${this.isSelecting || this._isSelectingState || this._isHovered}
-        role="button"
-        tabindex="0"
-        @mousedown=${this._handleMouseDown}
-        @mouseup=${this._handleMouseUpOrLeave}
-        @mouseleave=${this._handleMouseUpOrLeave}
-        @mouseenter=${this._handleMouseEnter}
-        @click=${this._handleClick}
-        @touchstart=${this._handleMouseDown}
-        @touchend=${this._handleMouseUpOrLeave}
-        @touchcancel=${this._handleMouseUpOrLeave}
-        @blur=${this._handleBlur}
-        @keyup=${() => {}}
-      >
-        <slot></slot>
-      </span>
-    `;
+		this._updateActiveState();
 	}
 };
-require_decorate.__decorate([(0, lit_decorators_js.property)({
-	type: Boolean,
-	attribute: "is-selecting"
-})], IntlayerContentSelectorElement.prototype, "isSelecting", void 0);
-require_decorate.__decorate([(0, lit_decorators_js.property)({
-	type: Number,
-	attribute: "press-duration"
-})], IntlayerContentSelectorElement.prototype, "pressDuration", void 0);
-require_decorate.__decorate([(0, lit_decorators_js.state)()], IntlayerContentSelectorElement.prototype, "_isHovered", void 0);
-require_decorate.__decorate([(0, lit_decorators_js.state)()], IntlayerContentSelectorElement.prototype, "_isSelectingState", void 0);
-require_decorate.__decorate([(0, lit_decorators_js.query)(".wrapper")], IntlayerContentSelectorElement.prototype, "_wrapper", void 0);
 /**
 * Register all Intlayer custom elements.
 * Call this once at application startup (inside IntlayerEditorProvider or similar).

package/dist/cjs/components/ContentSelector.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentSelector.cjs","names":["LitElement"],"sources":["../../../src/components/ContentSelector.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { defineIntlayerContentSelectorWrapper } from './ContentSelectorWrapper';\nimport { defineIntlayerEditedContent } from './EditedContent';\nimport { defineIntlayerEditorElement } from './IntlayerEditor';\n\nconst DEFAULT_PRESS_DURATION = 250;\n\n/**\n * <intlayer-content-selector>\n *\n * A framework-agnostic web component that wraps content with Intlayer editor\n * selection UI (hover outline, long-press to select, click-outside to deselect).\n *\n * Replaces the per-framework ContentSelector components (React, Svelte, Vue, Solid).\n *\n * @fires intlayer:press     - Fired after a long press (pressDuration ms). Bubbles.\n * @fires intlayer:hover     - Fired on mouseenter. Bubbles.\n * @fires intlayer:unhover   - Fired on mouseleave / mouseup. Bubbles.\n * @fires intlayer:click-outside - Fired when a click occurs outside the element. Bubbles.\n *\n * @prop {boolean} isSelecting   - Whether this element is currently selected (external state)\n * @prop {number}  pressDuration - Long-press threshold in ms. Default: 250\n */\nexport class IntlayerContentSelectorElement extends LitElement {\n  static styles = css`\n    :host {\n      display: contents;\n    }\n\n    .wrapper {\n      display: inline-block;\n      cursor: pointer;\n      user-select: none;\n      border-radius: 0.375rem;\n      outline-width: 2px;\n      outline-offset: 4px;\n      outline-style: solid;\n      outline-color: transparent;\n      transition: all 100ms 50ms ease-in-out;\n    }\n\n    .wrapper[data-active] {\n      outline-color: inherit;\n    }\n  `;\n\n  @property({ type: Boolean, attribute: 'is-selecting' })\n  isSelecting = false;\n\n  @property({ type: Number, attribute: 'press-duration' })\n  pressDuration = DEFAULT_PRESS_DURATION;\n\n  @state() private _isHovered = false;\n  @state() private _isSelectingState = false;\n\n  @query('.wrapper') private _wrapper!: HTMLSpanElement;\n\n  private _pressTimer: ReturnType<typeof setTimeout> | null = null;\n  private _clickOutsideHandler: ((e: MouseEvent) => void) | null = null;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this._clickOutsideHandler = (e: MouseEvent) => {\n      // composedPath() pierces shadow boundaries\n      if (!e.composedPath().includes(this)) {\n        this._isSelectingState = false;\n        this._dispatch('intlayer:click-outside');\n      }\n    };\n    document.addEventListener('mousedown', this._clickOutsideHandler);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this._clickOutsideHandler) {\n      document.removeEventListener('mousedown', this._clickOutsideHandler);\n      this._clickOutsideHandler = null;\n    }\n    this._clearPressTimer();\n  }\n\n  private _clearPressTimer(): void {\n    if (this._pressTimer !== null) {\n      clearTimeout(this._pressTimer);\n      this._pressTimer = null;\n    }\n  }\n\n  private _dispatch(eventName: string): void {\n    this.dispatchEvent(\n      new CustomEvent(eventName, { bubbles: true, composed: true })\n    );\n  }\n\n  private _handleMouseDown(): void {\n    this._clearPressTimer();\n    this._pressTimer = setTimeout(() => {\n      this._isSelectingState = true;\n      this._dispatch('intlayer:press');\n    }, this.pressDuration);\n  }\n\n  private _handleMouseEnter(): void {\n    this._isHovered = true;\n    this._dispatch('intlayer:hover');\n  }\n\n  private _handleMouseUpOrLeave(): void {\n    if (this._isHovered) {\n      this._isHovered = false;\n      this._dispatch('intlayer:unhover');\n    }\n    this._clearPressTimer();\n  }\n\n  private _handleClick(e: MouseEvent): void {\n    if (this.isSelecting || this._isSelectingState) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  }\n\n  private _handleBlur(): void {\n    this._isSelectingState = false;\n  }\n\n  render() {\n    const isActive =\n      this.isSelecting || this._isSelectingState || this._isHovered;\n    return html`\n      <span\n        class=\"wrapper\"\n        ?data-active=${isActive}\n        role=\"button\"\n        tabindex=\"0\"\n        @mousedown=${this._handleMouseDown}\n        @mouseup=${this._handleMouseUpOrLeave}\n        @mouseleave=${this._handleMouseUpOrLeave}\n        @mouseenter=${this._handleMouseEnter}\n        @click=${this._handleClick}\n        @touchstart=${this._handleMouseDown}\n        @touchend=${this._handleMouseUpOrLeave}\n        @touchcancel=${this._handleMouseUpOrLeave}\n        @blur=${this._handleBlur}\n        @keyup=${() => {}}\n      >\n        <slot></slot>\n      </span>\n    `;\n  }\n}\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 */\nexport const defineIntlayerElements = (): void => {\n  if (typeof customElements === 'undefined') return;\n  if (!customElements.get('intlayer-content-selector')) {\n    customElements.define(\n      'intlayer-content-selector',\n      IntlayerContentSelectorElement\n    );\n  }\n  defineIntlayerContentSelectorWrapper();\n  defineIntlayerEditedContent();\n  defineIntlayerEditorElement();\n};\n"],"mappings":";;;;;;;;;;AAMA,MAAM,yBAAyB;;;;;;;;;;;;;;;;;AAkB/B,IAAa,iCAAb,cAAoDA,eAAW;;;qBAwB/C;uBAGE;oBAEc;2BACO;qBAIuB;8BACK;;;gBAlCjD,OAAG;;;;;;;;;;;;;;;;;;;;;;CAoCnB,oBAA0B;AACxB,QAAM,mBAAmB;AACzB,OAAK,wBAAwB,MAAkB;AAE7C,OAAI,CAAC,EAAE,cAAc,CAAC,SAAS,KAAK,EAAE;AACpC,SAAK,oBAAoB;AACzB,SAAK,UAAU,yBAAyB;;;AAG5C,WAAS,iBAAiB,aAAa,KAAK,qBAAqB;;CAGnE,uBAA6B;AAC3B,QAAM,sBAAsB;AAC5B,MAAI,KAAK,sBAAsB;AAC7B,YAAS,oBAAoB,aAAa,KAAK,qBAAqB;AACpE,QAAK,uBAAuB;;AAE9B,OAAK,kBAAkB;;CAGzB,AAAQ,mBAAyB;AAC/B,MAAI,KAAK,gBAAgB,MAAM;AAC7B,gBAAa,KAAK,YAAY;AAC9B,QAAK,cAAc;;;CAIvB,AAAQ,UAAU,WAAyB;AACzC,OAAK,cACH,IAAI,YAAY,WAAW;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAC9D;;CAGH,AAAQ,mBAAyB;AAC/B,OAAK,kBAAkB;AACvB,OAAK,cAAc,iBAAiB;AAClC,QAAK,oBAAoB;AACzB,QAAK,UAAU,iBAAiB;KAC/B,KAAK,cAAc;;CAGxB,AAAQ,oBAA0B;AAChC,OAAK,aAAa;AAClB,OAAK,UAAU,iBAAiB;;CAGlC,AAAQ,wBAA8B;AACpC,MAAI,KAAK,YAAY;AACnB,QAAK,aAAa;AAClB,QAAK,UAAU,mBAAmB;;AAEpC,OAAK,kBAAkB;;CAGzB,AAAQ,aAAa,GAAqB;AACxC,MAAI,KAAK,eAAe,KAAK,mBAAmB;AAC9C,KAAE,gBAAgB;AAClB,KAAE,iBAAiB;;;CAIvB,AAAQ,cAAoB;AAC1B,OAAK,oBAAoB;;CAG3B,SAAS;AAGP,SAAO,QAAI;;;uBADT,KAAK,eAAe,KAAK,qBAAqB,KAAK,WAIzB;;;qBAGX,KAAK,iBAAiB;mBACxB,KAAK,sBAAsB;sBACxB,KAAK,sBAAsB;sBAC3B,KAAK,kBAAkB;iBAC5B,KAAK,aAAa;sBACb,KAAK,iBAAiB;oBACxB,KAAK,sBAAsB;uBACxB,KAAK,sBAAsB;gBAClC,KAAK,YAAY;uBACV,GAAG;;;;;;;6DAlGd;CAAE,MAAM;CAAS,WAAW;CAAgB,CAAC;6DAG7C;CAAE,MAAM;CAAQ,WAAW;CAAkB,CAAC;2DAGhD;2DACA;0DAED,WAAW;;;;;;AAsGpB,MAAa,+BAAqC;AAChD,KAAI,OAAO,mBAAmB,YAAa;AAC3C,KAAI,CAAC,eAAe,IAAI,4BAA4B,CAClD,gBAAe,OACb,6BACA,+BACD;AAEH,iFAAsC;AACtC,+DAA6B;AAC7B,gEAA6B"}
+{"version":3,"file":"ContentSelector.cjs","names":[],"sources":["../../../src/components/ContentSelector.ts"],"sourcesContent":["import { defineIntlayerContentSelectorWrapper } from './ContentSelectorWrapper';\nimport { defineIntlayerEditedContent } from './EditedContent';\nimport { defineIntlayerEditorElement } from './IntlayerEditor';\n\nconst DEFAULT_PRESS_DURATION = 250;\n\nconst STYLES = `\n  :host {\n    display: contents;\n  }\n\n  .wrapper {\n    display: inline-block;\n    cursor: pointer;\n    user-select: none;\n    border-radius: 0.375rem;\n    outline-width: 2px;\n    outline-offset: 4px;\n    outline-style: solid;\n    outline-color: transparent;\n    transition: all 100ms 50ms ease-in-out;\n  }\n\n  .wrapper[data-active] {\n    outline-color: inherit;\n  }\n`;\n\nconst _HTMLElement =\n  typeof HTMLElement !== 'undefined'\n    ? HTMLElement\n    : (class {} as unknown as typeof HTMLElement);\n\n/**\n * <intlayer-content-selector>\n *\n * A framework-agnostic web component that wraps content with Intlayer editor\n * selection UI (hover outline, long-press to select, click-outside to deselect).\n *\n * @fires intlayer:press     - Fired after a long press (pressDuration ms). Bubbles.\n * @fires intlayer:hover     - Fired on mouseenter. Bubbles.\n * @fires intlayer:unhover   - Fired on mouseleave / mouseup. Bubbles.\n * @fires intlayer:click-outside - Fired when a click occurs outside the element. Bubbles.\n *\n * @prop {boolean} isSelecting   - Whether this element is currently selected (external state)\n * @prop {number}  pressDuration - Long-press threshold in ms. Default: 250\n */\nexport class IntlayerContentSelectorElement extends _HTMLElement {\n  private _isSelecting = false;\n  private _pressDuration = DEFAULT_PRESS_DURATION;\n  private _isHovered = false;\n  private _isSelectingState = false;\n  private _wrapper: HTMLSpanElement;\n  private _pressTimer: ReturnType<typeof setTimeout> | null = null;\n  private _clickOutsideHandler: ((e: MouseEvent) => void) | null = null;\n\n  static get observedAttributes(): string[] {\n    return ['is-selecting', 'press-duration'];\n  }\n\n  get isSelecting(): boolean {\n    return this._isSelecting;\n  }\n  set isSelecting(v: boolean) {\n    this._isSelecting = v;\n    this._updateActiveState();\n  }\n\n  get pressDuration(): number {\n    return this._pressDuration;\n  }\n  set pressDuration(v: number) {\n    this._pressDuration = v;\n  }\n\n  constructor() {\n    super();\n    const shadow = this.attachShadow({ mode: 'open' });\n\n    const style = document.createElement('style');\n    style.textContent = STYLES;\n    shadow.appendChild(style);\n\n    const wrapper = document.createElement('span');\n    wrapper.className = 'wrapper';\n    wrapper.setAttribute('role', 'button');\n    wrapper.setAttribute('tabindex', '0');\n    wrapper.appendChild(document.createElement('slot'));\n    shadow.appendChild(wrapper);\n    this._wrapper = wrapper;\n\n    wrapper.addEventListener('mousedown', () => this._handleMouseDown());\n    wrapper.addEventListener('mouseup', () => this._handleMouseUpOrLeave());\n    wrapper.addEventListener('mouseleave', () => this._handleMouseUpOrLeave());\n    wrapper.addEventListener('mouseenter', () => this._handleMouseEnter());\n    wrapper.addEventListener('click', (e) => this._handleClick(e));\n    wrapper.addEventListener('touchstart', () => this._handleMouseDown());\n    wrapper.addEventListener('touchend', () => this._handleMouseUpOrLeave());\n    wrapper.addEventListener('touchcancel', () => this._handleMouseUpOrLeave());\n    wrapper.addEventListener('blur', () => this._handleBlur());\n  }\n\n  attributeChangedCallback(\n    name: string,\n    _oldVal: string | null,\n    newVal: string | null\n  ): void {\n    if (name === 'is-selecting') {\n      this._isSelecting = newVal !== null;\n      this._updateActiveState();\n    } else if (name === 'press-duration') {\n      this._pressDuration =\n        newVal !== null ? parseInt(newVal, 10) : DEFAULT_PRESS_DURATION;\n    }\n  }\n\n  connectedCallback(): void {\n    this._clickOutsideHandler = (e: MouseEvent) => {\n      // composedPath() pierces shadow boundaries\n      if (!e.composedPath().includes(this)) {\n        this._isSelectingState = false;\n        this._dispatch('intlayer:click-outside');\n        this._updateActiveState();\n      }\n    };\n    document.addEventListener('mousedown', this._clickOutsideHandler);\n  }\n\n  disconnectedCallback(): void {\n    if (this._clickOutsideHandler) {\n      document.removeEventListener('mousedown', this._clickOutsideHandler);\n      this._clickOutsideHandler = null;\n    }\n    this._clearPressTimer();\n  }\n\n  private _updateActiveState(): void {\n    const isActive =\n      this._isSelecting || this._isSelectingState || this._isHovered;\n    if (isActive) {\n      this._wrapper.setAttribute('data-active', '');\n    } else {\n      this._wrapper.removeAttribute('data-active');\n    }\n  }\n\n  private _clearPressTimer(): void {\n    if (this._pressTimer !== null) {\n      clearTimeout(this._pressTimer);\n      this._pressTimer = null;\n    }\n  }\n\n  private _dispatch(eventName: string): void {\n    this.dispatchEvent(\n      new CustomEvent(eventName, { bubbles: true, composed: true })\n    );\n  }\n\n  private _handleMouseDown(): void {\n    this._clearPressTimer();\n    this._pressTimer = setTimeout(() => {\n      this._isSelectingState = true;\n      this._updateActiveState();\n      this._dispatch('intlayer:press');\n    }, this._pressDuration);\n  }\n\n  private _handleMouseEnter(): void {\n    this._isHovered = true;\n    this._updateActiveState();\n    this._dispatch('intlayer:hover');\n  }\n\n  private _handleMouseUpOrLeave(): void {\n    if (this._isHovered) {\n      this._isHovered = false;\n      this._dispatch('intlayer:unhover');\n    }\n    this._clearPressTimer();\n    this._updateActiveState();\n  }\n\n  private _handleClick(e: MouseEvent): void {\n    if (this._isSelecting || this._isSelectingState) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  }\n\n  private _handleBlur(): void {\n    this._isSelectingState = false;\n    this._updateActiveState();\n  }\n}\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 */\nexport const defineIntlayerElements = (): void => {\n  if (typeof customElements === 'undefined') return;\n  if (!customElements.get('intlayer-content-selector')) {\n    customElements.define(\n      'intlayer-content-selector',\n      IntlayerContentSelectorElement\n    );\n  }\n  defineIntlayerContentSelectorWrapper();\n  defineIntlayerEditedContent();\n  defineIntlayerEditorElement();\n};\n"],"mappings":"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"}

package/dist/cjs/components/ContentSelectorWrapper.cjs

@@ -2,18 +2,16 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
 const require_messageKey = require('../messageKey.cjs');
 const require_core_globalManager = require('../core/globalManager.cjs');
-const require_decorate = require('../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.cjs');
-let lit = require("lit");
-let lit_decorators_js = require("lit/decorators.js");
 let _intlayer_core_utils = require("@intlayer/core/utils");
 let _intlayer_types_nodeType = require("@intlayer/types/nodeType");
 _intlayer_types_nodeType = require_runtime.__toESM(_intlayer_types_nodeType);
 
 //#region src/components/ContentSelectorWrapper.ts
+const _HTMLElement = typeof HTMLElement !== "undefined" ? HTMLElement : class {};
 /**
 * <intlayer-content-selector-wrapper>
 *
-* Framework-agnostic Lit element that wraps content with the Intlayer editor
+* Framework-agnostic web component that wraps content with the Intlayer editor
 * selection UI. It replaces the per-framework ContentSelectorWrapper components
 * (Vue, Svelte, Solid, Preact).
 *
@@ -24,42 +22,64 @@ _intlayer_types_nodeType = require_runtime.__toESM(_intlayer_types_nodeType);
 * @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 lit.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;
+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 = require_core_globalManager.getGlobalEditorManager();
+		if (manager) this._updateEditedValue(manager);
+	}
+	get dictionaryKey() {
+		return this._dictionaryKey;
 	}
-	static {
-		this.styles = lit.css`
-    :host {
-      display: contents;
-    }
-  `;
+	set dictionaryKey(v) {
+		this._dictionaryKey = v;
+		const manager = require_core_globalManager.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 = require_core_globalManager.getGlobalEditorManager();
+			if (manager) this._updateEditedValue(manager);
+		} else if (name === "dictionary-key") {
+			this._dictionaryKey = newVal ?? "";
+			const manager = require_core_globalManager.getGlobalEditorManager();
+			if (manager) this._updateEditedValue(manager);
+		}
 	}
 	connectedCallback() {
-		super.connectedCallback();
 		if (typeof window !== "undefined") this._isInIframe = window.self !== window.top;
 		this._subscribeToManager();
+		this._render();
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback();
 		this._teardown();
 	}
-	updated(changedProperties) {
-		if (changedProperties.has("keyPathJson") || changedProperties.has("dictionaryKey")) {
-			const manager = require_core_globalManager.getGlobalEditorManager();
-			if (manager) this._updateEditedValue(manager);
-		}
-	}
 	_teardown() {
 		this._unsubManager?.();
 		this._unsubEnabled?.();
@@ -70,6 +90,53 @@ var IntlayerContentSelectorWrapperElement = class extends lit.LitElement {
 		this._unsubFocused = null;
 		this._unsubEditedContent = null;
 	}
+	_getRawKeyPath() {
+		try {
+			return JSON.parse(this._keyPathJson);
+		} catch {
+			return [];
+		}
+	}
+	_getFilteredKeyPath() {
+		return this._getRawKeyPath().filter((k) => k.type !== _intlayer_types_nodeType.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 === _intlayer_types_nodeType.MARKDOWN || lastStepType === _intlayer_types_nodeType.HTML || lastStepType === _intlayer_types_nodeType.INSERTION || lastStepType === _intlayer_types_nodeType.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 === _intlayer_types_nodeType.TRANSLATION) {
+			const locale = manager.currentLocale.value;
+			value = locale ? value[_intlayer_types_nodeType.TRANSLATION][locale] : void 0;
+		}
+		this._editedValue = value;
+		this._render();
+	}
+	_updateIsSelected(focusedContent) {
+		if (!focusedContent) {
+			this._isSelected = false;
+			this._updateSelectorAttr();
+			return;
+		}
+		const keyPath = this._getFilteredKeyPath();
+		this._isSelected = focusedContent.dictionaryKey === this._dictionaryKey && (focusedContent.keyPath?.length ?? 0) > 0 && (0, _intlayer_core_utils.isSameKeyPath)(focusedContent.keyPath ?? [], keyPath);
+		this._updateSelectorAttr();
+	}
+	_updateSelectorAttr() {
+		if (!this._selector) return;
+		if (this._isSelected) this._selector.setAttribute("is-selecting", "");
+		else this._selector.removeAttribute("is-selecting");
+	}
 	_subscribeToManager() {
 		const manager = require_core_globalManager.getGlobalEditorManager();
 		if (manager) this._setupManagerSubscriptions(manager);
@@ -85,6 +152,7 @@ var IntlayerContentSelectorWrapperElement = class extends lit.LitElement {
 				this._editorEnabled = false;
 				this._isSelected = false;
 				this._editedValue = void 0;
+				this._render();
 			}
 		});
 	}
@@ -94,6 +162,7 @@ var IntlayerContentSelectorWrapperElement = class extends lit.LitElement {
 		this._updateEditedValue(manager);
 		const handleEnabledChange = (e) => {
 			this._editorEnabled = e.detail;
+			this._render();
 		};
 		const handleFocusedChange = (e) => {
 			this._updateIsSelected(e.detail);
@@ -108,56 +177,19 @@ var IntlayerContentSelectorWrapperElement = class extends lit.LitElement {
 		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 !== _intlayer_types_nodeType.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 === _intlayer_types_nodeType.MARKDOWN || lastStepType === _intlayer_types_nodeType.HTML || lastStepType === _intlayer_types_nodeType.INSERTION || lastStepType === _intlayer_types_nodeType.FILE) {
-			this._editedValue = void 0;
-			return;
-		}
-		let value = manager.getContentValue(this.dictionaryKey, filteredKeyPath);
-		if (value !== null && value !== void 0 && typeof value === "object" && value.nodeType === _intlayer_types_nodeType.TRANSLATION) {
-			const locale = manager.currentLocale.value;
-			value = locale ? value[_intlayer_types_nodeType.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 && (0, _intlayer_core_utils.isSameKeyPath)(focusedContent.keyPath ?? [], keyPath);
-	}
 	_handlePress(e) {
 		e.stopPropagation();
 		const manager = require_core_globalManager.getGlobalEditorManager();
 		if (!manager) return;
 		manager.focusedContent.set({
-			dictionaryKey: this.dictionaryKey,
+			dictionaryKey: this._dictionaryKey,
 			keyPath: this._getFilteredKeyPath()
 		});
 	}
 	_handleHover(e) {
 		e.stopPropagation();
 		require_core_globalManager.getGlobalEditorManager()?.messenger.send(`${"INTLAYER_HOVERED_CONTENT_CHANGED"}/post`, {
-			dictionaryKey: this.dictionaryKey,
+			dictionaryKey: this._dictionaryKey,
 			keyPath: this._getFilteredKeyPath()
 		});
 	}
@@ -165,34 +197,38 @@ var IntlayerContentSelectorWrapperElement = class extends lit.LitElement {
 		e.stopPropagation();
 		require_core_globalManager.getGlobalEditorManager()?.messenger.send(`${"INTLAYER_HOVERED_CONTENT_CHANGED"}/post`, null);
 	}
-	render() {
-		if (!this._isInIframe || !this._editorEnabled) return lit.html`<slot></slot>`;
+	_render() {
+		const useWrapper = this._isInIframe && this._editorEnabled;
 		const editedValue = this._editedValue;
-		const displayedContent = typeof editedValue === "string" || typeof editedValue === "number" || typeof editedValue === "boolean" ? editedValue : lit.html`<slot></slot>`;
-		return lit.html`
-      <intlayer-content-selector
-        ?is-selecting=${this._isSelected}
-        @intlayer:press=${this._handlePress}
-        @intlayer:hover=${this._handleHover}
-        @intlayer:unhover=${this._handleUnhover}
-      >
-        ${displayedContent}
-      </intlayer-content-selector>
-    `;
+		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;
 	}
 };
-require_decorate.__decorate([(0, lit_decorators_js.property)({
-	type: String,
-	attribute: "key-path"
-})], IntlayerContentSelectorWrapperElement.prototype, "keyPathJson", void 0);
-require_decorate.__decorate([(0, lit_decorators_js.property)({
-	type: String,
-	attribute: "dictionary-key"
-})], IntlayerContentSelectorWrapperElement.prototype, "dictionaryKey", void 0);
-require_decorate.__decorate([(0, lit_decorators_js.state)()], IntlayerContentSelectorWrapperElement.prototype, "_editorEnabled", void 0);
-require_decorate.__decorate([(0, lit_decorators_js.state)()], IntlayerContentSelectorWrapperElement.prototype, "_isInIframe", void 0);
-require_decorate.__decorate([(0, lit_decorators_js.state)()], IntlayerContentSelectorWrapperElement.prototype, "_isSelected", void 0);
-require_decorate.__decorate([(0, lit_decorators_js.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);

package/dist/cjs/components/ContentSelectorWrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentSelectorWrapper.cjs","names":["LitElement","getGlobalEditorManager","onGlobalEditorManagerChange","NodeTypes"],"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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"}
+{"version":3,"file":"ContentSelectorWrapper.cjs","names":["getGlobalEditorManager","NodeTypes","node","onGlobalEditorManagerChange"],"sources":["../../../src/components/ContentSelectorWrapper.ts"],"sourcesContent":["import { isSameKeyPath } from '@intlayer/core/utils';\n\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 type {\n  EditorStateManager,\n  FileContent,\n} from '../core/EditorStateManager';\nimport {\n  getGlobalEditorManager,\n  onGlobalEditorManagerChange,\n} from '../core/globalManager';\nimport { MessageKey } from '../messageKey';\n\ntype RenderState = 'simple' | 'wrapped-slot' | 'wrapped-text';\n\nconst _HTMLElement =\n  typeof HTMLElement !== 'undefined'\n    ? HTMLElement\n    : (class {} as unknown as typeof HTMLElement);\n\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 */\nexport class IntlayerContentSelectorWrapperElement extends _HTMLElement {\n  private _keyPathJson = '[]';\n  private _dictionaryKey = '';\n  private _editorEnabled = false;\n  private _isInIframe = false;\n  private _isSelected = false;\n  private _editedValue: ContentNode | undefined = undefined;\n\n  private _renderState: RenderState | null = null;\n  private _selector: HTMLElement | null = null;\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  static get observedAttributes(): string[] {\n    return ['key-path', 'dictionary-key'];\n  }\n\n  get keyPathJson(): string {\n    return this._keyPathJson;\n  }\n  set keyPathJson(v: string) {\n    this._keyPathJson = v;\n    const manager = getGlobalEditorManager();\n    if (manager) this._updateEditedValue(manager);\n  }\n\n  get dictionaryKey(): string {\n    return this._dictionaryKey;\n  }\n  set dictionaryKey(v: string) {\n    this._dictionaryKey = v;\n    const manager = getGlobalEditorManager();\n    if (manager) this._updateEditedValue(manager);\n  }\n\n  constructor() {\n    super();\n    const shadow = this.attachShadow({ mode: 'open' });\n    const style = document.createElement('style');\n    style.textContent = ':host { display: contents; }';\n    shadow.appendChild(style);\n  }\n\n  attributeChangedCallback(\n    name: string,\n    _oldVal: string | null,\n    newVal: string | null\n  ): void {\n    if (name === 'key-path') {\n      this._keyPathJson = newVal ?? '[]';\n      const manager = getGlobalEditorManager();\n      if (manager) this._updateEditedValue(manager);\n    } else if (name === 'dictionary-key') {\n      this._dictionaryKey = newVal ?? '';\n      const manager = getGlobalEditorManager();\n      if (manager) this._updateEditedValue(manager);\n    }\n  }\n\n  connectedCallback(): void {\n    if (typeof window !== 'undefined') {\n      this._isInIframe = window.self !== window.top;\n    }\n    this._subscribeToManager();\n    this._render();\n  }\n\n  disconnectedCallback(): void {\n    this._teardown();\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 _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      this._render();\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      this._render();\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 as { nodeType?: unknown }).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    this._render();\n  }\n\n  private _updateIsSelected(\n    focusedContent: FileContent | null | undefined\n  ): void {\n    if (!focusedContent) {\n      this._isSelected = false;\n      this._updateSelectorAttr();\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    this._updateSelectorAttr();\n  }\n\n  private _updateSelectorAttr(): void {\n    if (!this._selector) return;\n    if (this._isSelected) {\n      this._selector.setAttribute('is-selecting', '');\n    } else {\n      this._selector.removeAttribute('is-selecting');\n    }\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        this._render();\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      this._render();\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 _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      {\n        dictionaryKey: this._dictionaryKey,\n        keyPath: this._getFilteredKeyPath(),\n      }\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  private _render(): void {\n    const useWrapper = this._isInIframe && this._editorEnabled;\n    const editedValue = this._editedValue;\n    const isSimpleValue =\n      typeof editedValue === 'string' ||\n      typeof editedValue === 'number' ||\n      typeof editedValue === 'boolean';\n\n    const newState: RenderState = !useWrapper\n      ? 'simple'\n      : isSimpleValue\n        ? 'wrapped-text'\n        : 'wrapped-slot';\n\n    if (this._renderState !== newState) {\n      this._rebuildContent(newState);\n      return;\n    }\n\n    // Structure unchanged — update only dynamic parts\n    if (newState !== 'simple' && this._selector) {\n      this._updateSelectorAttr();\n      if (\n        newState === 'wrapped-text' &&\n        this._selector.firstChild?.nodeType === Node.TEXT_NODE\n      ) {\n        (this._selector.firstChild as Text).data = String(editedValue);\n      }\n    }\n  }\n\n  private _rebuildContent(state: RenderState): void {\n    const shadow = this.shadowRoot!;\n    // Remove all nodes except the style element (first child)\n    while (shadow.childNodes.length > 1) {\n      shadow.removeChild(shadow.lastChild!);\n    }\n    this._selector = null;\n\n    if (state === 'simple') {\n      shadow.appendChild(document.createElement('slot'));\n    } else {\n      const selector = document.createElement('intlayer-content-selector');\n      this._selector = selector;\n      if (this._isSelected) selector.setAttribute('is-selecting', '');\n      selector.addEventListener('intlayer:press', (e) => this._handlePress(e));\n      selector.addEventListener('intlayer:hover', (e) => this._handleHover(e));\n      selector.addEventListener('intlayer:unhover', (e) =>\n        this._handleUnhover(e)\n      );\n\n      if (state === 'wrapped-text') {\n        selector.appendChild(\n          document.createTextNode(String(this._editedValue))\n        );\n      } else {\n        selector.appendChild(document.createElement('slot'));\n      }\n      shadow.appendChild(selector);\n    }\n\n    this._renderState = state;\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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"}