@intlayer/editor 8.7.6 → 8.7.8-canary.0

package/dist/cjs/core/UrlStateManager.cjs

@@ -9,10 +9,11 @@ const require_messageKey = require('../messageKey.cjs');
 * Replaces useCrossURLPathSetter / useCrossURLPathState across all frameworks.
 */
 var UrlStateManager = class {
+	_messenger;
+	_originalPushState = null;
+	_originalReplaceState = null;
+	_listeners = [];
 	constructor(messenger) {
-		this._originalPushState = null;
-		this._originalReplaceState = null;
-		this._listeners = [];
 		this._messenger = messenger;
 	}
 	start() {

package/dist/cjs/core/UrlStateManager.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"UrlStateManager.cjs","names":[],"sources":["../../../src/core/UrlStateManager.ts"],"sourcesContent":["import { MessageKey } from '../messageKey';\nimport type { CrossFrameMessenger } from './CrossFrameMessenger';\n\n/**\n * UrlStateManager patches window.history and broadcasts URL path changes\n * across frames via postMessage.\n *\n * Replaces useCrossURLPathSetter / useCrossURLPathState across all frameworks.\n */\nexport class UrlStateManager {\n  private readonly _messenger: CrossFrameMessenger;\n  private _originalPushState: typeof history.pushState | null = null;\n  private _originalReplaceState: typeof history.replaceState | null = null;\n  private _listeners: Array<[string, EventListener]> = [];\n\n  constructor(messenger: CrossFrameMessenger) {\n    this._messenger = messenger;\n  }\n\n  start(): void {\n    if (typeof window === 'undefined') return;\n\n    const updateURLState = () => {\n      this._messenger.send(\n        `${MessageKey.INTLAYER_URL_CHANGE}/post`,\n        window.location.pathname\n      );\n    };\n\n    this._originalPushState = history.pushState;\n    this._originalReplaceState = history.replaceState;\n\n    const injectLocationChange = (method: typeof history.pushState) =>\n      function (\n        this: typeof history,\n        ...args: Parameters<typeof history.pushState>\n      ) {\n        method.apply(this, args);\n        window.dispatchEvent(new Event('locationchange'));\n      };\n\n    history.pushState = injectLocationChange(\n      this._originalPushState\n    ) as typeof history.pushState;\n    history.replaceState = injectLocationChange(\n      this._originalReplaceState\n    ) as typeof history.replaceState;\n\n    for (const eventName of [\n      'locationchange',\n      'popstate',\n      'hashchange',\n      'load',\n    ] as const) {\n      const listener = updateURLState as EventListener;\n      window.addEventListener(eventName, listener);\n      this._listeners.push([eventName, listener]);\n    }\n\n    updateURLState();\n  }\n\n  stop(): void {\n    if (typeof window === 'undefined') return;\n\n    for (const [eventName, listener] of this._listeners) {\n      window.removeEventListener(eventName, listener);\n    }\n    this._listeners = [];\n\n    if (this._originalPushState) {\n      history.pushState = this._originalPushState;\n      this._originalPushState = null;\n    }\n    if (this._originalReplaceState) {\n      history.replaceState = this._originalReplaceState;\n      this._originalReplaceState = null;\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;AASA,IAAa,kBAAb,MAA6B;CAM3B,YAAY,WAAgC;4BAJkB;+BACM;oBACf,EAAE;AAGrD,OAAK,aAAa;;CAGpB,QAAc;AACZ,MAAI,OAAO,WAAW,YAAa;EAEnC,MAAM,uBAAuB;AAC3B,QAAK,WAAW,KACd,yBAAkC,QAClC,OAAO,SAAS,SACjB;;AAGH,OAAK,qBAAqB,QAAQ;AAClC,OAAK,wBAAwB,QAAQ;EAErC,MAAM,wBAAwB,WAC5B,SAEE,GAAG,MACH;AACA,UAAO,MAAM,MAAM,KAAK;AACxB,UAAO,cAAc,IAAI,MAAM,iBAAiB,CAAC;;AAGrD,UAAQ,YAAY,qBAClB,KAAK,mBACN;AACD,UAAQ,eAAe,qBACrB,KAAK,sBACN;AAED,OAAK,MAAM,aAAa;GACtB;GACA;GACA;GACA;GACD,EAAW;GACV,MAAM,WAAW;AACjB,UAAO,iBAAiB,WAAW,SAAS;AAC5C,QAAK,WAAW,KAAK,CAAC,WAAW,SAAS,CAAC;;AAG7C,kBAAgB;;CAGlB,OAAa;AACX,MAAI,OAAO,WAAW,YAAa;AAEnC,OAAK,MAAM,CAAC,WAAW,aAAa,KAAK,WACvC,QAAO,oBAAoB,WAAW,SAAS;AAEjD,OAAK,aAAa,EAAE;AAEpB,MAAI,KAAK,oBAAoB;AAC3B,WAAQ,YAAY,KAAK;AACzB,QAAK,qBAAqB;;AAE5B,MAAI,KAAK,uBAAuB;AAC9B,WAAQ,eAAe,KAAK;AAC5B,QAAK,wBAAwB"}
+{"version":3,"file":"UrlStateManager.cjs","names":[],"sources":["../../../src/core/UrlStateManager.ts"],"sourcesContent":["import { MessageKey } from '../messageKey';\nimport type { CrossFrameMessenger } from './CrossFrameMessenger';\n\n/**\n * UrlStateManager patches window.history and broadcasts URL path changes\n * across frames via postMessage.\n *\n * Replaces useCrossURLPathSetter / useCrossURLPathState across all frameworks.\n */\nexport class UrlStateManager {\n  private readonly _messenger: CrossFrameMessenger;\n  private _originalPushState: typeof history.pushState | null = null;\n  private _originalReplaceState: typeof history.replaceState | null = null;\n  private _listeners: Array<[string, EventListener]> = [];\n\n  constructor(messenger: CrossFrameMessenger) {\n    this._messenger = messenger;\n  }\n\n  start(): void {\n    if (typeof window === 'undefined') return;\n\n    const updateURLState = () => {\n      this._messenger.send(\n        `${MessageKey.INTLAYER_URL_CHANGE}/post`,\n        window.location.pathname\n      );\n    };\n\n    this._originalPushState = history.pushState;\n    this._originalReplaceState = history.replaceState;\n\n    const injectLocationChange = (method: typeof history.pushState) =>\n      function (\n        this: typeof history,\n        ...args: Parameters<typeof history.pushState>\n      ) {\n        method.apply(this, args);\n        window.dispatchEvent(new Event('locationchange'));\n      };\n\n    history.pushState = injectLocationChange(\n      this._originalPushState\n    ) as typeof history.pushState;\n    history.replaceState = injectLocationChange(\n      this._originalReplaceState\n    ) as typeof history.replaceState;\n\n    for (const eventName of [\n      'locationchange',\n      'popstate',\n      'hashchange',\n      'load',\n    ] as const) {\n      const listener = updateURLState as EventListener;\n      window.addEventListener(eventName, listener);\n      this._listeners.push([eventName, listener]);\n    }\n\n    updateURLState();\n  }\n\n  stop(): void {\n    if (typeof window === 'undefined') return;\n\n    for (const [eventName, listener] of this._listeners) {\n      window.removeEventListener(eventName, listener);\n    }\n    this._listeners = [];\n\n    if (this._originalPushState) {\n      history.pushState = this._originalPushState;\n      this._originalPushState = null;\n    }\n    if (this._originalReplaceState) {\n      history.replaceState = this._originalReplaceState;\n      this._originalReplaceState = null;\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;AASA,IAAa,kBAAb,MAA6B;CAC3B,AAAiB;CACjB,AAAQ,qBAAsD;CAC9D,AAAQ,wBAA4D;CACpE,AAAQ,aAA6C,EAAE;CAEvD,YAAY,WAAgC;AAC1C,OAAK,aAAa;;CAGpB,QAAc;AACZ,MAAI,OAAO,WAAW,YAAa;EAEnC,MAAM,uBAAuB;AAC3B,QAAK,WAAW,KACd,yBAAkC,QAClC,OAAO,SAAS,SACjB;;AAGH,OAAK,qBAAqB,QAAQ;AAClC,OAAK,wBAAwB,QAAQ;EAErC,MAAM,wBAAwB,WAC5B,SAEE,GAAG,MACH;AACA,UAAO,MAAM,MAAM,KAAK;AACxB,UAAO,cAAc,IAAI,MAAM,iBAAiB,CAAC;;AAGrD,UAAQ,YAAY,qBAClB,KAAK,mBACN;AACD,UAAQ,eAAe,qBACrB,KAAK,sBACN;AAED,OAAK,MAAM,aAAa;GACtB;GACA;GACA;GACA;GACD,EAAW;GACV,MAAM,WAAW;AACjB,UAAO,iBAAiB,WAAW,SAAS;AAC5C,QAAK,WAAW,KAAK,CAAC,WAAW,SAAS,CAAC;;AAG7C,kBAAgB;;CAGlB,OAAa;AACX,MAAI,OAAO,WAAW,YAAa;AAEnC,OAAK,MAAM,CAAC,WAAW,aAAa,KAAK,WACvC,QAAO,oBAAoB,WAAW,SAAS;AAEjD,OAAK,aAAa,EAAE;AAEpB,MAAI,KAAK,oBAAoB;AAC3B,WAAQ,YAAY,KAAK;AACzB,QAAK,qBAAqB;;AAE5B,MAAI,KAAK,uBAAuB;AAC9B,WAAQ,eAAe,KAAK;AAC5B,QAAK,wBAAwB"}

package/dist/cjs/core/globalManager.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"globalManager.cjs","names":[],"sources":["../../../src/core/globalManager.ts"],"sourcesContent":["import type { EditorStateManager } from './EditorStateManager';\n\n/**\n * Type for storing custom properties on the global window object.\n * Used to safely attach singleton instances across multiple module instances.\n */\ntype WindowWithEditorGlobals = typeof window & {\n  [MANAGER_KEY]?: EditorStateManager | null;\n  [EVENTS_KEY]?: EventTarget;\n  [key: string]: unknown;\n};\n\n/**\n * Keys on window used to share the singleton across multiple module instances.\n * When bundlers include @intlayer/editor more than once (e.g. framework package +\n * app), each copy has its own module-level variables. Using window ensures they\n * all read/write the same manager and event-target.\n */\nconst MANAGER_KEY = '__intlayer_editor_manager__';\nconst EVENTS_KEY = '__intlayer_editor_manager_events__';\n\n/**\n * Retrieves or creates a shared EventTarget for global editor manager events.\n * In browser environments, stores the EventTarget on window to ensure sharing\n * across multiple module instances. In SSR environments, creates a fresh\n * EventTarget (no sharing needed on server-side).\n *\n * @returns The shared EventTarget instance for dispatching manager change events\n * @private\n */\nconst getEventTarget = (): EventTarget => {\n  if (typeof window === 'undefined') {\n    // SSR fallback — create a fresh one (no sharing needed server-side)\n    return new EventTarget();\n  }\n\n  const windowGlobals = window as WindowWithEditorGlobals;\n  if (!windowGlobals[EVENTS_KEY]) {\n    windowGlobals[EVENTS_KEY] = new EventTarget();\n  }\n\n  return windowGlobals[EVENTS_KEY] as EventTarget;\n};\n\n/**\n * Retrieves the global editor state manager instance.\n * Returns null if no manager has been set or in SSR environments where\n * window is undefined.\n *\n * @returns The global EditorStateManager instance or null if not set\n */\nexport const getGlobalEditorManager = (): EditorStateManager | null => {\n  if (typeof window === 'undefined') {\n    return null;\n  }\n\n  const windowGlobals = window as WindowWithEditorGlobals;\n  const manager = windowGlobals[MANAGER_KEY];\n\n  return manager ?? null;\n};\n\n/**\n * Sets the global editor state manager instance and notifies all listeners\n * of the change through a CustomEvent.\n *\n * @param manager - The EditorStateManager instance to set globally, or null to clear it\n */\nexport const setGlobalEditorManager = (\n  manager: EditorStateManager | null\n): void => {\n  if (typeof window !== 'undefined') {\n    const windowGlobals = window as WindowWithEditorGlobals;\n    windowGlobals[MANAGER_KEY] = manager;\n  }\n\n  const eventTarget = getEventTarget();\n\n  eventTarget.dispatchEvent(\n    new CustomEvent<EditorStateManager | null>('change', { detail: manager })\n  );\n};\n\n/**\n * Registers a callback function to be invoked whenever the global editor\n * manager changes. Useful for reactive updates across the application.\n *\n * @param changeCallback - Function to invoke with the new manager state whenever it changes\n * @returns An unsubscribe function that removes the listener when called\n *\n * @example\n * ```typescript\n * const unsubscribe = onGlobalEditorManagerChange((manager) => {\n *   console.log('Manager updated:', manager);\n * });\n *\n * // Later, clean up the listener\n * unsubscribe();\n * ```\n */\nexport const onGlobalEditorManagerChange = (\n  changeCallback: (manager: EditorStateManager | null) => void\n): (() => void) => {\n  const eventTarget = getEventTarget();\n\n  const eventHandler = (event: Event) => {\n    const customEvent = event as CustomEvent<EditorStateManager | null>;\n    changeCallback(customEvent.detail);\n  };\n\n  eventTarget.addEventListener('change', eventHandler);\n\n  return () => {\n    eventTarget.removeEventListener('change', eventHandler);\n  };\n};\n"],"mappings":";;;;;;;;;AAkBA,MAAM,cAAc;AACpB,MAAM,aAAa;;;;;;;;;;AAWnB,MAAM,uBAAoC;AACxC,KAAI,OAAO,WAAW,YAEpB,QAAO,IAAI,aAAa;CAG1B,MAAM,gBAAgB;AACtB,KAAI,CAAC,cAAc,YACjB,eAAc,cAAc,IAAI,aAAa;AAG/C,QAAO,cAAc;;;;;;;;;AAUvB,MAAa,+BAA0D;AACrE,KAAI,OAAO,WAAW,YACpB,QAAO;AAMT,QAHsB,OACQ,gBAEZ;;;;;;;;AASpB,MAAa,0BACX,YACS;AACT,KAAI,OAAO,WAAW,aAAa;EACjC,MAAM,gBAAgB;AACtB,gBAAc,eAAe;;AAK/B,CAFoB,gBAAgB,CAExB,cACV,IAAI,YAAuC,UAAU,EAAE,QAAQ,SAAS,CAAC,CAC1E;;;;;;;;;;;;;;;;;;;AAoBH,MAAa,+BACX,mBACiB;CACjB,MAAM,cAAc,gBAAgB;CAEpC,MAAM,gBAAgB,UAAiB;AAErC,iBADoB,MACO,OAAO;;AAGpC,aAAY,iBAAiB,UAAU,aAAa;AAEpD,cAAa;AACX,cAAY,oBAAoB,UAAU,aAAa"}
+{"version":3,"file":"globalManager.cjs","names":["windowGlobals","customEvent"],"sources":["../../../src/core/globalManager.ts"],"sourcesContent":["import type { EditorStateManager } from './EditorStateManager';\n\n/**\n * Type for storing custom properties on the global window object.\n * Used to safely attach singleton instances across multiple module instances.\n */\ntype WindowWithEditorGlobals = typeof window & {\n  [MANAGER_KEY]?: EditorStateManager | null;\n  [EVENTS_KEY]?: EventTarget;\n  [key: string]: unknown;\n};\n\n/**\n * Keys on window used to share the singleton across multiple module instances.\n * When bundlers include @intlayer/editor more than once (e.g. framework package +\n * app), each copy has its own module-level variables. Using window ensures they\n * all read/write the same manager and event-target.\n */\nconst MANAGER_KEY = '__intlayer_editor_manager__';\nconst EVENTS_KEY = '__intlayer_editor_manager_events__';\n\n/**\n * Retrieves or creates a shared EventTarget for global editor manager events.\n * In browser environments, stores the EventTarget on window to ensure sharing\n * across multiple module instances. In SSR environments, creates a fresh\n * EventTarget (no sharing needed on server-side).\n *\n * @returns The shared EventTarget instance for dispatching manager change events\n * @private\n */\nconst getEventTarget = (): EventTarget => {\n  if (typeof window === 'undefined') {\n    // SSR fallback — create a fresh one (no sharing needed server-side)\n    return new EventTarget();\n  }\n\n  const windowGlobals = window as WindowWithEditorGlobals;\n  if (!windowGlobals[EVENTS_KEY]) {\n    windowGlobals[EVENTS_KEY] = new EventTarget();\n  }\n\n  return windowGlobals[EVENTS_KEY] as EventTarget;\n};\n\n/**\n * Retrieves the global editor state manager instance.\n * Returns null if no manager has been set or in SSR environments where\n * window is undefined.\n *\n * @returns The global EditorStateManager instance or null if not set\n */\nexport const getGlobalEditorManager = (): EditorStateManager | null => {\n  if (typeof window === 'undefined') {\n    return null;\n  }\n\n  const windowGlobals = window as WindowWithEditorGlobals;\n  const manager = windowGlobals[MANAGER_KEY];\n\n  return manager ?? null;\n};\n\n/**\n * Sets the global editor state manager instance and notifies all listeners\n * of the change through a CustomEvent.\n *\n * @param manager - The EditorStateManager instance to set globally, or null to clear it\n */\nexport const setGlobalEditorManager = (\n  manager: EditorStateManager | null\n): void => {\n  if (typeof window !== 'undefined') {\n    const windowGlobals = window as WindowWithEditorGlobals;\n    windowGlobals[MANAGER_KEY] = manager;\n  }\n\n  const eventTarget = getEventTarget();\n\n  eventTarget.dispatchEvent(\n    new CustomEvent<EditorStateManager | null>('change', { detail: manager })\n  );\n};\n\n/**\n * Registers a callback function to be invoked whenever the global editor\n * manager changes. Useful for reactive updates across the application.\n *\n * @param changeCallback - Function to invoke with the new manager state whenever it changes\n * @returns An unsubscribe function that removes the listener when called\n *\n * @example\n * ```typescript\n * const unsubscribe = onGlobalEditorManagerChange((manager) => {\n *   console.log('Manager updated:', manager);\n * });\n *\n * // Later, clean up the listener\n * unsubscribe();\n * ```\n */\nexport const onGlobalEditorManagerChange = (\n  changeCallback: (manager: EditorStateManager | null) => void\n): (() => void) => {\n  const eventTarget = getEventTarget();\n\n  const eventHandler = (event: Event) => {\n    const customEvent = event as CustomEvent<EditorStateManager | null>;\n    changeCallback(customEvent.detail);\n  };\n\n  eventTarget.addEventListener('change', eventHandler);\n\n  return () => {\n    eventTarget.removeEventListener('change', eventHandler);\n  };\n};\n"],"mappings":";;;;;;;;;AAkBA,MAAM,cAAc;AACpB,MAAM,aAAa;;;;;;;;;;AAWnB,MAAM,uBAAoC;AACxC,KAAI,OAAO,WAAW,YAEpB,QAAO,IAAI,aAAa;CAG1B,MAAM,gBAAgB;AACtB,KAAI,CAAC,cAAc,YACjB,eAAc,cAAc,IAAI,aAAa;AAG/C,QAAO,cAAc;;;;;;;;;AAUvB,MAAa,+BAA0D;AACrE,KAAI,OAAO,WAAW,YACpB,QAAO;AAMT,QAFgBA,OAAc,gBAEZ;;;;;;;;AASpB,MAAa,0BACX,YACS;AACT,KAAI,OAAO,WAAW,aAAa;EACjC,MAAM,gBAAgB;AACtB,gBAAc,eAAe;;AAK/B,CAFoB,gBAET,CAAC,cACV,IAAI,YAAuC,UAAU,EAAE,QAAQ,SAAS,CAAC,CAC1E;;;;;;;;;;;;;;;;;;;AAoBH,MAAa,+BACX,mBACiB;CACjB,MAAM,cAAc,gBAAgB;CAEpC,MAAM,gBAAgB,UAAiB;AAErC,iBAAeC,MAAY,OAAO;;AAGpC,aAAY,iBAAiB,UAAU,aAAa;AAEpD,cAAa;AACX,cAAY,oBAAoB,UAAU,aAAa"}

package/dist/cjs/core/initEditorClient.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"initEditorClient.cjs","names":["editor","getGlobalEditorManager","EditorStateManager"],"sources":["../../../src/core/initEditorClient.ts"],"sourcesContent":["import { default as configuration, editor } from '@intlayer/config/built';\nimport { defineIntlayerElements } from '../components';\nimport type { MessengerConfig } from './CrossFrameMessenger';\nimport { EditorStateManager } from './EditorStateManager';\nimport {\n  getGlobalEditorManager,\n  setGlobalEditorManager,\n} from './globalManager';\n\nexport const buildClientMessengerConfig = (): MessengerConfig => {\n  return {\n    allowedOrigins: [editor?.editorURL, editor?.cmsURL].filter(\n      Boolean\n    ) as string[],\n    postMessageFn: (payload: unknown, origin: string) => {\n      if (typeof window === 'undefined') return;\n\n      const isInIframe = window.self !== window.top;\n\n      if (!isInIframe) return;\n      window.parent?.postMessage(payload, origin);\n    },\n  };\n};\n\n/** Reference count — tracks how many providers have called initEditorClient. */\nlet _clientRefCount = 0;\n\n/**\n * Initialize the Intlayer editor client singleton.\n * Safe to call multiple times — returns the existing manager if already initialized.\n * Increments a reference counter so nested providers don't destroy the manager\n * prematurely when the inner provider unmounts.\n */\nexport const initEditorClient = (): EditorStateManager => {\n  _clientRefCount++;\n\n  const existing = getGlobalEditorManager();\n  if (existing) return existing;\n\n  const manager = new EditorStateManager({\n    mode: 'client',\n    messenger: buildClientMessengerConfig(),\n    configuration,\n  });\n\n  setGlobalEditorManager(manager);\n  defineIntlayerElements();\n  manager.start();\n\n  return manager;\n};\n\n/**\n * Decrement the reference count and stop the global editor client singleton\n * only when the last provider unmounts.\n */\nexport const stopEditorClient = (): void => {\n  _clientRefCount = Math.max(0, _clientRefCount - 1);\n\n  if (_clientRefCount > 0) return;\n\n  const manager = getGlobalEditorManager();\n  manager?.stop();\n  setGlobalEditorManager(null);\n};\n"],"mappings":";;;;;;;;;AASA,MAAa,mCAAoD;AAC/D,QAAO;EACL,gBAAgB,CAACA,+BAAQ,WAAWA,+BAAQ,OAAO,CAAC,OAClD,QACD;EACD,gBAAgB,SAAkB,WAAmB;AACnD,OAAI,OAAO,WAAW,YAAa;AAInC,OAAI,EAFe,OAAO,SAAS,OAAO,KAEzB;AACjB,UAAO,QAAQ,YAAY,SAAS,OAAO;;EAE9C;;;AAIH,IAAI,kBAAkB;;;;;;;AAQtB,MAAa,yBAA6C;AACxD;CAEA,MAAM,WAAWC,mDAAwB;AACzC,KAAI,SAAU,QAAO;CAErB,MAAM,UAAU,IAAIC,mDAAmB;EACrC,MAAM;EACN,WAAW,4BAA4B;EACvC;EACD,CAAC;AAEF,mDAAuB,QAAQ;AAC/B,4DAAwB;AACxB,SAAQ,OAAO;AAEf,QAAO;;;;;;AAOT,MAAa,yBAA+B;AAC1C,mBAAkB,KAAK,IAAI,GAAG,kBAAkB,EAAE;AAElD,KAAI,kBAAkB,EAAG;AAGzB,CADgBD,mDAAwB,EAC/B,MAAM;AACf,mDAAuB,KAAK"}
+{"version":3,"file":"initEditorClient.cjs","names":["editor","getGlobalEditorManager","EditorStateManager"],"sources":["../../../src/core/initEditorClient.ts"],"sourcesContent":["import { default as configuration, editor } from '@intlayer/config/built';\nimport { defineIntlayerElements } from '../components';\nimport type { MessengerConfig } from './CrossFrameMessenger';\nimport { EditorStateManager } from './EditorStateManager';\nimport {\n  getGlobalEditorManager,\n  setGlobalEditorManager,\n} from './globalManager';\n\nexport const buildClientMessengerConfig = (): MessengerConfig => {\n  return {\n    allowedOrigins: [editor?.editorURL, editor?.cmsURL].filter(\n      Boolean\n    ) as string[],\n    postMessageFn: (payload: unknown, origin: string) => {\n      if (typeof window === 'undefined') return;\n\n      const isInIframe = window.self !== window.top;\n\n      if (!isInIframe) return;\n      window.parent?.postMessage(payload, origin);\n    },\n  };\n};\n\n/** Reference count — tracks how many providers have called initEditorClient. */\nlet _clientRefCount = 0;\n\n/**\n * Initialize the Intlayer editor client singleton.\n * Safe to call multiple times — returns the existing manager if already initialized.\n * Increments a reference counter so nested providers don't destroy the manager\n * prematurely when the inner provider unmounts.\n */\nexport const initEditorClient = (): EditorStateManager => {\n  _clientRefCount++;\n\n  const existing = getGlobalEditorManager();\n  if (existing) return existing;\n\n  const manager = new EditorStateManager({\n    mode: 'client',\n    messenger: buildClientMessengerConfig(),\n    configuration,\n  });\n\n  setGlobalEditorManager(manager);\n  defineIntlayerElements();\n  manager.start();\n\n  return manager;\n};\n\n/**\n * Decrement the reference count and stop the global editor client singleton\n * only when the last provider unmounts.\n */\nexport const stopEditorClient = (): void => {\n  _clientRefCount = Math.max(0, _clientRefCount - 1);\n\n  if (_clientRefCount > 0) return;\n\n  const manager = getGlobalEditorManager();\n  manager?.stop();\n  setGlobalEditorManager(null);\n};\n"],"mappings":";;;;;;;;;AASA,MAAa,mCAAoD;AAC/D,QAAO;EACL,gBAAgB,CAACA,+BAAQ,WAAWA,+BAAQ,OAAO,CAAC,OAClD,QACD;EACD,gBAAgB,SAAkB,WAAmB;AACnD,OAAI,OAAO,WAAW,YAAa;AAInC,OAAI,EAFe,OAAO,SAAS,OAAO,KAEzB;AACjB,UAAO,QAAQ,YAAY,SAAS,OAAO;;EAE9C;;;AAIH,IAAI,kBAAkB;;;;;;;AAQtB,MAAa,yBAA6C;AACxD;CAEA,MAAM,WAAWC,mDAAwB;AACzC,KAAI,SAAU,QAAO;CAErB,MAAM,UAAU,IAAIC,mDAAmB;EACrC,MAAM;EACN,WAAW,4BAA4B;EACvC;EACD,CAAC;AAEF,mDAAuB,QAAQ;AAC/B,4DAAwB;AACxB,SAAQ,OAAO;AAEf,QAAO;;;;;;AAOT,MAAa,yBAA+B;AAC1C,mBAAkB,KAAK,IAAI,GAAG,kBAAkB,EAAE;AAElD,KAAI,kBAAkB,EAAG;AAGzB,CADgBD,mDACT,EAAE,MAAM;AACf,mDAAuB,KAAK"}

package/dist/esm/components/ContentSelector.mjs

@@ -1,20 +1,37 @@
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.mjs";
 import { defineIntlayerContentSelectorWrapper } from "./ContentSelectorWrapper.mjs";
 import { defineIntlayerEditedContent } from "./EditedContent.mjs";
 import { defineIntlayerEditorElement } from "./IntlayerEditor.mjs";
-import { LitElement, css, html } from "lit";
-import { property, query, state } from "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.
@@ -23,57 +40,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 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 = 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);
@@ -90,11 +130,13 @@ var IntlayerContentSelectorElement = class extends 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() {
@@ -103,50 +145,19 @@ var IntlayerContentSelectorElement = class extends 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 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();
 	}
 };
-__decorate([property({
-	type: Boolean,
-	attribute: "is-selecting"
-})], IntlayerContentSelectorElement.prototype, "isSelecting", void 0);
-__decorate([property({
-	type: Number,
-	attribute: "press-duration"
-})], IntlayerContentSelectorElement.prototype, "pressDuration", void 0);
-__decorate([state()], IntlayerContentSelectorElement.prototype, "_isHovered", void 0);
-__decorate([state()], IntlayerContentSelectorElement.prototype, "_isSelectingState", void 0);
-__decorate([query(".wrapper")], IntlayerContentSelectorElement.prototype, "_wrapper", void 0);
 /**
 * Register all Intlayer custom elements.
 * Call this once at application startup (inside IntlayerEditorProvider or similar).

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

@@ -1 +1 @@
-{"version":3,"file":"ContentSelector.mjs","names":[],"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,cAAoD,WAAW;;;qBAwB/C;uBAGE;oBAEc;2BACO;qBAIuB;8BACK;;;gBAlCjD,GAAG;;;;;;;;;;;;;;;;;;;;;;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,IAAI;;;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;;;;;;;YAlGvB,SAAS;CAAE,MAAM;CAAS,WAAW;CAAgB,CAAC;YAGtD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAkB,CAAC;YAGvD,OAAO;YACP,OAAO;YAEP,MAAM,WAAW;;;;;;AAsGpB,MAAa,+BAAqC;AAChD,KAAI,OAAO,mBAAmB,YAAa;AAC3C,KAAI,CAAC,eAAe,IAAI,4BAA4B,CAClD,gBAAe,OACb,6BACA,+BACD;AAEH,uCAAsC;AACtC,8BAA6B;AAC7B,8BAA6B"}
+{"version":3,"file":"ContentSelector.mjs","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":";;;;;AAIA,MAAM,yBAAyB;AAE/B,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;AAsBf,MAAM,eACJ,OAAO,gBAAgB,cACnB,cACC,MAAM;;;;;;;;;;;;;;;AAgBb,IAAa,iCAAb,cAAoD,aAAa;CAC/D,AAAQ,eAAe;CACvB,AAAQ,iBAAiB;CACzB,AAAQ,aAAa;CACrB,AAAQ,oBAAoB;CAC5B,AAAQ;CACR,AAAQ,cAAoD;CAC5D,AAAQ,uBAAyD;CAEjE,WAAW,qBAA+B;AACxC,SAAO,CAAC,gBAAgB,iBAAiB;;CAG3C,IAAI,cAAuB;AACzB,SAAO,KAAK;;CAEd,IAAI,YAAY,GAAY;AAC1B,OAAK,eAAe;AACpB,OAAK,oBAAoB;;CAG3B,IAAI,gBAAwB;AAC1B,SAAO,KAAK;;CAEd,IAAI,cAAc,GAAW;AAC3B,OAAK,iBAAiB;;CAGxB,cAAc;AACZ,SAAO;EACP,MAAM,SAAS,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;EAElD,MAAM,QAAQ,SAAS,cAAc,QAAQ;AAC7C,QAAM,cAAc;AACpB,SAAO,YAAY,MAAM;EAEzB,MAAM,UAAU,SAAS,cAAc,OAAO;AAC9C,UAAQ,YAAY;AACpB,UAAQ,aAAa,QAAQ,SAAS;AACtC,UAAQ,aAAa,YAAY,IAAI;AACrC,UAAQ,YAAY,SAAS,cAAc,OAAO,CAAC;AACnD,SAAO,YAAY,QAAQ;AAC3B,OAAK,WAAW;AAEhB,UAAQ,iBAAiB,mBAAmB,KAAK,kBAAkB,CAAC;AACpE,UAAQ,iBAAiB,iBAAiB,KAAK,uBAAuB,CAAC;AACvE,UAAQ,iBAAiB,oBAAoB,KAAK,uBAAuB,CAAC;AAC1E,UAAQ,iBAAiB,oBAAoB,KAAK,mBAAmB,CAAC;AACtE,UAAQ,iBAAiB,UAAU,MAAM,KAAK,aAAa,EAAE,CAAC;AAC9D,UAAQ,iBAAiB,oBAAoB,KAAK,kBAAkB,CAAC;AACrE,UAAQ,iBAAiB,kBAAkB,KAAK,uBAAuB,CAAC;AACxE,UAAQ,iBAAiB,qBAAqB,KAAK,uBAAuB,CAAC;AAC3E,UAAQ,iBAAiB,cAAc,KAAK,aAAa,CAAC;;CAG5D,yBACE,MACA,SACA,QACM;AACN,MAAI,SAAS,gBAAgB;AAC3B,QAAK,eAAe,WAAW;AAC/B,QAAK,oBAAoB;aAChB,SAAS,iBAClB,MAAK,iBACH,WAAW,OAAO,SAAS,QAAQ,GAAG,GAAG;;CAI/C,oBAA0B;AACxB,OAAK,wBAAwB,MAAkB;AAE7C,OAAI,CAAC,EAAE,cAAc,CAAC,SAAS,KAAK,EAAE;AACpC,SAAK,oBAAoB;AACzB,SAAK,UAAU,yBAAyB;AACxC,SAAK,oBAAoB;;;AAG7B,WAAS,iBAAiB,aAAa,KAAK,qBAAqB;;CAGnE,uBAA6B;AAC3B,MAAI,KAAK,sBAAsB;AAC7B,YAAS,oBAAoB,aAAa,KAAK,qBAAqB;AACpE,QAAK,uBAAuB;;AAE9B,OAAK,kBAAkB;;CAGzB,AAAQ,qBAA2B;AAGjC,MADE,KAAK,gBAAgB,KAAK,qBAAqB,KAAK,WAEpD,MAAK,SAAS,aAAa,eAAe,GAAG;MAE7C,MAAK,SAAS,gBAAgB,cAAc;;CAIhD,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,oBAAoB;AACzB,QAAK,UAAU,iBAAiB;KAC/B,KAAK,eAAe;;CAGzB,AAAQ,oBAA0B;AAChC,OAAK,aAAa;AAClB,OAAK,oBAAoB;AACzB,OAAK,UAAU,iBAAiB;;CAGlC,AAAQ,wBAA8B;AACpC,MAAI,KAAK,YAAY;AACnB,QAAK,aAAa;AAClB,QAAK,UAAU,mBAAmB;;AAEpC,OAAK,kBAAkB;AACvB,OAAK,oBAAoB;;CAG3B,AAAQ,aAAa,GAAqB;AACxC,MAAI,KAAK,gBAAgB,KAAK,mBAAmB;AAC/C,KAAE,gBAAgB;AAClB,KAAE,iBAAiB;;;CAIvB,AAAQ,cAAoB;AAC1B,OAAK,oBAAoB;AACzB,OAAK,oBAAoB;;;;;;;;AAS7B,MAAa,+BAAqC;AAChD,KAAI,OAAO,mBAAmB,YAAa;AAC3C,KAAI,CAAC,eAAe,IAAI,4BAA4B,CAClD,gBAAe,OACb,6BACA,+BACD;AAEH,uCAAsC;AACtC,8BAA6B;AAC7B,8BAA6B"}

package/dist/esm/components/ContentSelectorWrapper.mjs

@@ -1,16 +1,14 @@
 import { MessageKey } from "../messageKey.mjs";
 import { getGlobalEditorManager, onGlobalEditorManagerChange } from "../core/globalManager.mjs";
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.126.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
+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).
 *
@@ -21,42 +19,64 @@ import * as NodeTypes from "@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 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 = getGlobalEditorManager();
+		if (manager) this._updateEditedValue(manager);
+	}
+	get dictionaryKey() {
+		return this._dictionaryKey;
 	}
-	static {
-		this.styles = css`
-    :host {
-      display: contents;
-    }
-  `;
+	set dictionaryKey(v) {
+		this._dictionaryKey = v;
+		const manager = getGlobalEditorManager();
+		if (manager) this._updateEditedValue(manager);
+	}
+	constructor() {
+		super();
+		const shadow = this.attachShadow({ mode: "open" });
+		const style = document.createElement("style");
+		style.textContent = ":host { display: contents; }";
+		shadow.appendChild(style);
+	}
+	attributeChangedCallback(name, _oldVal, newVal) {
+		if (name === "key-path") {
+			this._keyPathJson = newVal ?? "[]";
+			const manager = getGlobalEditorManager();
+			if (manager) this._updateEditedValue(manager);
+		} else if (name === "dictionary-key") {
+			this._dictionaryKey = newVal ?? "";
+			const manager = getGlobalEditorManager();
+			if (manager) this._updateEditedValue(manager);
+		}
 	}
 	connectedCallback() {
-		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 = getGlobalEditorManager();
-			if (manager) this._updateEditedValue(manager);
-		}
-	}
 	_teardown() {
 		this._unsubManager?.();
 		this._unsubEnabled?.();
@@ -67,6 +87,53 @@ var IntlayerContentSelectorWrapperElement = class extends LitElement {
 		this._unsubFocused = null;
 		this._unsubEditedContent = null;
 	}
+	_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;
+			this._render();
+			return;
+		}
+		const rawKeyPath = this._getRawKeyPath();
+		const lastStepType = rawKeyPath[rawKeyPath.length - 1]?.type;
+		if (lastStepType === NodeTypes.MARKDOWN || lastStepType === NodeTypes.HTML || lastStepType === NodeTypes.INSERTION || lastStepType === NodeTypes.FILE) {
+			this._editedValue = void 0;
+			this._render();
+			return;
+		}
+		let value = manager.getContentValue(this._dictionaryKey, filteredKeyPath);
+		if (value !== null && value !== void 0 && typeof value === "object" && value.nodeType === NodeTypes.TRANSLATION) {
+			const locale = manager.currentLocale.value;
+			value = locale ? value[NodeTypes.TRANSLATION][locale] : void 0;
+		}
+		this._editedValue = value;
+		this._render();
+	}
+	_updateIsSelected(focusedContent) {
+		if (!focusedContent) {
+			this._isSelected = false;
+			this._updateSelectorAttr();
+			return;
+		}
+		const keyPath = this._getFilteredKeyPath();
+		this._isSelected = focusedContent.dictionaryKey === this._dictionaryKey && (focusedContent.keyPath?.length ?? 0) > 0 && 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 = getGlobalEditorManager();
 		if (manager) this._setupManagerSubscriptions(manager);
@@ -82,6 +149,7 @@ var IntlayerContentSelectorWrapperElement = class extends LitElement {
 				this._editorEnabled = false;
 				this._isSelected = false;
 				this._editedValue = void 0;
+				this._render();
 			}
 		});
 	}
@@ -91,6 +159,7 @@ var IntlayerContentSelectorWrapperElement = class extends LitElement {
 		this._updateEditedValue(manager);
 		const handleEnabledChange = (e) => {
 			this._editorEnabled = e.detail;
+			this._render();
 		};
 		const handleFocusedChange = (e) => {
 			this._updateIsSelected(e.detail);
@@ -105,56 +174,19 @@ var IntlayerContentSelectorWrapperElement = class extends 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 !== 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,
+			dictionaryKey: this._dictionaryKey,
 			keyPath: this._getFilteredKeyPath()
 		});
 	}
 	_handleHover(e) {
 		e.stopPropagation();
 		getGlobalEditorManager()?.messenger.send(`${"INTLAYER_HOVERED_CONTENT_CHANGED"}/post`, {
-			dictionaryKey: this.dictionaryKey,
+			dictionaryKey: this._dictionaryKey,
 			keyPath: this._getFilteredKeyPath()
 		});
 	}
@@ -162,34 +194,38 @@ var IntlayerContentSelectorWrapperElement = class extends LitElement {
 		e.stopPropagation();
 		getGlobalEditorManager()?.messenger.send(`${"INTLAYER_HOVERED_CONTENT_CHANGED"}/post`, null);
 	}
-	render() {
-		if (!this._isInIframe || !this._editorEnabled) return 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 : html`<slot></slot>`;
-		return 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;
 	}
 };
-__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);