@craftile/preview-client 0.1.2 → 0.1.4

package/dist/index.cjs

@@ -149,6 +149,7 @@ class Inspector {
     this.messenger.listen("craftile.inspector.disable", () => this.disable());
     this.messenger.listen("craftile.inspector.overlay-button-enter", this.handleOverlayButtonEnter.bind(this));
     this.messenger.listen("craftile.inspector.overlay-button-leave", this.handleOverlayButtonLeave.bind(this));
+    this.messenger.listen("craftile.editor.select-block", this.handleEditorSelectBlock.bind(this));
     window.addEventListener("scroll", this.handleScroll.bind(this), { passive: true });
     this.setupGlobalEventListeners();
   }
@@ -172,6 +173,14 @@ class Inspector {
       this.messenger.send("craftile.preview.block-leave");
     }
   }
+  handleEditorSelectBlock(data) {
+    const element = document.querySelector(`[data-block="${data.blockId}"]`);
+    if (element) {
+      this.currentSelectedBlock = element;
+      this.sendSelectedBlockPosition();
+      this.trackSelectedBlock();
+    }
+  }
   handleScroll() {
     if (this.currentSelectedBlock) {
       this.sendSelectedBlockPosition();

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../messenger/src/index.ts","../../event-bus/src/index.ts","../src/inspector.ts","../src/client.ts"],"sourcesContent":["export interface TypedMessage<T = any> {\n  type: string;\n  payload: T | undefined;\n}\n\nexport class WindowMessenger<Messages extends Record<string, any>> {\n  private handlers = new Map<keyof Messages, Function[]>();\n  private targetWindow: Window;\n  private targetOrigin: string;\n  private fallbackHandler?: (data: any, event: MessageEvent) => void;\n\n  constructor(targetWindow: Window, targetOrigin: string = '*') {\n    this.targetWindow = targetWindow;\n    this.targetOrigin = targetOrigin;\n\n    window.addEventListener('message', this.handleMessage.bind(this));\n  }\n\n  private handleMessage(event: MessageEvent) {\n    const message = event.data as TypedMessage;\n\n    if (!message.type) {\n      return;\n    }\n\n    const handlers = this.handlers.get(message.type);\n\n    if (handlers) {\n      handlers.forEach((handler) => handler(message.payload, event));\n    } else if (this.fallbackHandler) {\n      this.fallbackHandler(event.data, event);\n    }\n  }\n\n  send<K extends keyof Messages>(type: K, payload?: Messages[K]): void {\n    const message: TypedMessage<Messages[K]> = { type: type as string, payload };\n    this.targetWindow.postMessage(message, this.targetOrigin);\n  }\n\n  listen<K extends keyof Messages>(type: K, handler: (data: Messages[K], event: MessageEvent) => void): () => void {\n    if (!this.handlers.has(type)) {\n      this.handlers.set(type, []);\n    }\n\n    this.handlers.get(type)!.push(handler);\n\n    return () => {\n      const handlers = this.handlers.get(type);\n      if (handlers) {\n        const index = handlers.indexOf(handler);\n        if (index > -1) {\n          handlers.splice(index, 1);\n        }\n      }\n    };\n  }\n\n  registerFallbackHandler(handler: (data: any, event: MessageEvent) => void) {\n    this.fallbackHandler = handler;\n  }\n}\n\nexport function createIframeMessenger<T extends Record<string, any>>(iframe: HTMLIFrameElement, targetOrigin = '*') {\n  return new WindowMessenger<T>(iframe.contentWindow!, targetOrigin);\n}\n\nexport function createParentMessenger<T extends Record<string, any>>(targetOrigin = '*') {\n  if (window.parent === window) {\n    throw new Error('Not inside an iframe');\n  }\n  return new WindowMessenger<T>(window.parent, targetOrigin);\n}\n","export type EventListener<T = any> = (data: T) => void;\nexport type EventMap = {\n  [event: string]: any;\n};\n\n/**\n * Type-safe EventBus with generic event map support\n *\n * @template T Event map interface that defines the events and their data types\n */\nexport class EventBus<T extends EventMap = EventMap> {\n  private listeners: Map<keyof T, Set<EventListener<any>>> = new Map();\n\n  /**\n   * Add an event listener\n   *\n   * @param event Event name\n   * @param listener Event listener function\n   *\n   * @returns Cleanup function to remove the listener\n   */\n  on<K extends keyof T>(event: K, listener: EventListener<T[K]>): () => void {\n    if (!this.listeners.has(event)) {\n      this.listeners.set(event, new Set());\n    }\n\n    this.listeners.get(event)!.add(listener);\n\n    return () => {\n      this.off(event, listener);\n    };\n  }\n\n  /**\n   * Remove an event listener\n   *\n   * @param event Event name\n   * @param listener Event listener function to remove\n   */\n  off<K extends keyof T>(event: K, listener: EventListener<T[K]>): void {\n    const eventListeners = this.listeners.get(event);\n\n    if (eventListeners) {\n      eventListeners.delete(listener);\n\n      if (eventListeners.size === 0) {\n        this.listeners.delete(event);\n      }\n    }\n  }\n\n  /**\n   * Add a one-time event listener\n   *\n   * @param event Event name\n   * @param listener Event listener function\n   */\n  once<K extends keyof T>(event: K, listener: EventListener<T[K]>): void {\n    const onceWrapper = (data: T[K]) => {\n      listener(data);\n      this.off(event, onceWrapper);\n    };\n\n    this.on(event, onceWrapper);\n  }\n\n  /**\n   * Emit an event\n   *\n   * @param event Event name\n   * @param args Event data (optional, depending on event type)\n   */\n  emit<K extends keyof T>(event: K, ...args: T[K] extends void ? [] : [T[K]]): void {\n    const eventListeners = this.listeners.get(event);\n\n    if (eventListeners) {\n      const data = args[0];\n      eventListeners.forEach((listener) => {\n        try {\n          listener(data);\n        } catch (error) {\n          console.error(`Error in event listener for '${String(event)}':`, error);\n        }\n      });\n    }\n  }\n\n  /**\n   * Remove all listeners for an event, or all listeners if no event specified\n   *\n   * @param event Optional event name. If not provided, removes all listeners\n   */\n  removeAllListeners<K extends keyof T>(event?: K): void {\n    if (event) {\n      this.listeners.delete(event);\n    } else {\n      this.listeners.clear();\n    }\n  }\n}\n","import type { WindowMessenger } from '@craftile/messenger';\nimport type { WindowMessages } from '@craftile/types';\n\nexport class Inspector {\n  private active = true;\n  private messenger: WindowMessenger<WindowMessages>;\n  private currentHoveredBlock: HTMLElement | null = null;\n  private currentSelectedBlock: HTMLElement | null = null;\n  private overlayButtonHovered = false;\n\n  private resizeObserver: ResizeObserver | null = null;\n  private mutationObserver: MutationObserver | null = null;\n\n  constructor(messenger: WindowMessenger<WindowMessages>) {\n    this.messenger = messenger;\n\n    this.messenger.listen('craftile.inspector.enable', () => this.enable());\n    this.messenger.listen('craftile.inspector.disable', () => this.disable());\n    this.messenger.listen('craftile.inspector.overlay-button-enter', this.handleOverlayButtonEnter.bind(this));\n    this.messenger.listen('craftile.inspector.overlay-button-leave', this.handleOverlayButtonLeave.bind(this));\n\n    window.addEventListener('scroll', this.handleScroll.bind(this), { passive: true });\n    this.setupGlobalEventListeners();\n  }\n\n  enable() {\n    this.active = true;\n    document.body.classList.add('craftile-inspector-active');\n  }\n\n  disable() {\n    this.active = false;\n    document.body.classList.remove('craftile-inspector-active');\n    this.currentHoveredBlock = null;\n    this.currentSelectedBlock = null;\n    this.overlayButtonHovered = false;\n  }\n\n  private handleOverlayButtonEnter() {\n    this.overlayButtonHovered = true;\n  }\n\n  private handleOverlayButtonLeave(_data: { blockId: string }) {\n    this.overlayButtonHovered = false;\n\n    if (!this.currentHoveredBlock) {\n      this.messenger.send('craftile.preview.block-leave');\n    }\n  }\n\n  private handleScroll() {\n    if (this.currentSelectedBlock) {\n      this.sendSelectedBlockPosition();\n    }\n\n    if (this.currentHoveredBlock) {\n      this.sendHoveredBlockPosition();\n    }\n  }\n\n  private setupGlobalEventListeners() {\n    document.addEventListener('mouseover', this.handleGlobalHover.bind(this));\n    document.addEventListener('mouseout', this.handleGlobalLeave.bind(this));\n    document.addEventListener('click', this.handleGlobalClick.bind(this));\n  }\n\n  private handleGlobalHover(e: Event) {\n    if (!this.active) {\n      return;\n    }\n\n    const blockElement = (e.target as Element).closest('[data-block]') as HTMLElement;\n\n    if (!blockElement) {\n      return;\n    }\n\n    e.stopPropagation();\n    this.currentHoveredBlock = blockElement;\n    this.sendHoveredBlockPosition();\n  }\n\n  private handleGlobalLeave(e: Event) {\n    if (!this.active) {\n      return;\n    }\n\n    const blockElement = (e.target as Element).closest('[data-block]') as HTMLElement;\n    if (!blockElement) {\n      return;\n    }\n\n    // Only clear overlay if button is not being hovered\n    if (!this.overlayButtonHovered) {\n      this.currentHoveredBlock = null;\n      this.messenger.send('craftile.preview.block-leave');\n    }\n  }\n\n  private handleGlobalClick(e: Event) {\n    this.messenger.send('craftile.preview.click');\n\n    if (!this.active) {\n      return;\n    }\n\n    const blockElement = (e.target as Element).closest('[data-block]') as HTMLElement;\n    if (!blockElement) {\n      return;\n    }\n\n    e.stopPropagation();\n\n    const blockId = blockElement.getAttribute('data-block');\n\n    if (blockId) {\n      this.currentSelectedBlock = blockElement;\n      this.sendSelectedBlockPosition();\n      this.trackSelectedBlock();\n    }\n  }\n\n  private sendHoveredBlockPosition() {\n    const position = this.computeElementPositioning(this.currentHoveredBlock!);\n\n    this.messenger.send('craftile.preview.block-hover', {\n      blockRect: position.rect,\n      parentRect: position.parentRect,\n      scrollTop: position.scrollTop,\n      scrollLeft: position.scrollLeft,\n      blockId: this.currentHoveredBlock!.dataset.block as string,\n      parentFlexDirection: position.parentFlexDirection,\n    });\n  }\n\n  private sendSelectedBlockPosition(updates: boolean = false) {\n    const position = this.computeElementPositioning(this.currentSelectedBlock!);\n    this.messenger.send(updates ? 'craftile.preview.update-selected-block' : 'craftile.preview.block-select', {\n      blockRect: position.rect,\n      scrollTop: position.scrollTop,\n      scrollLeft: position.scrollLeft,\n      blockId: this.currentSelectedBlock!.dataset.block as string,\n    });\n  }\n\n  private trackSelectedBlock() {\n    if (!this.currentSelectedBlock) {\n      return;\n    }\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n      this.resizeObserver = null;\n    }\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n      this.mutationObserver = null;\n    }\n\n    this.resizeObserver = new ResizeObserver(() => {\n      this.sendSelectedBlockPosition(true);\n    });\n    this.resizeObserver.observe(this.currentSelectedBlock);\n\n    this.mutationObserver = new MutationObserver(() => {\n      this.sendSelectedBlockPosition(true);\n    });\n\n    this.mutationObserver.observe(this.currentSelectedBlock, {\n      attributes: true,\n      subtree: false,\n    });\n\n    // Also observe parent elements that might affect positioning\n    let parent = this.currentSelectedBlock.parentElement;\n    while (parent) {\n      this.mutationObserver.observe(parent, {\n        childList: true,\n        subtree: false,\n      });\n\n      if (parent === document.body) {\n        break;\n      }\n\n      parent = parent.parentElement;\n    }\n  }\n\n  private computeElementPositioning(element: HTMLElement) {\n    const rect = element.getBoundingClientRect();\n    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;\n\n    const eldestParent = this.findEldestParentBlock(element);\n    const parentRect = eldestParent && eldestParent !== element ? eldestParent.getBoundingClientRect() : undefined;\n    const parentFlexDirection = this.getElementFlexDirection(element.parentElement);\n\n    return {\n      rect,\n      parentRect,\n      scrollTop,\n      scrollLeft,\n      parentFlexDirection,\n    };\n  }\n\n  private findEldestParentBlock(element: HTMLElement): HTMLElement | null {\n    let eldestParent: HTMLElement | null = null;\n    let parentElement = element.parentElement;\n\n    while (parentElement && parentElement !== document.body) {\n      if (parentElement.hasAttribute('data-block')) {\n        eldestParent = parentElement;\n      }\n      parentElement = parentElement.parentElement;\n    }\n\n    return eldestParent;\n  }\n\n  private getElementFlexDirection(element: HTMLElement | null): 'row' | 'column' {\n    if (!element) {\n      return 'column';\n    }\n\n    const style = window.getComputedStyle(element);\n    const flexDirection = style.display.includes('flex') ? style.flexDirection : 'column';\n\n    return flexDirection === 'row' || flexDirection === 'row-reverse' ? 'row' : 'column';\n  }\n}\n","import type { WindowMessages } from '@craftile/types';\nimport { createParentMessenger, WindowMessenger } from '@craftile/messenger';\nimport { EventBus } from '@craftile/event-bus';\nimport { Inspector } from './inspector';\n\nexport class PreviewClient extends EventBus {\n  private messenger: WindowMessenger<WindowMessages>;\n  // @ts-ignore\n  private inspector: Inspector;\n\n  constructor() {\n    super();\n\n    this.messenger = createParentMessenger(window.origin);\n    this.inspector = new Inspector(this.messenger);\n\n    this.initialize();\n  }\n\n  private initialize() {\n    window.addEventListener('load', () => {\n      this.messenger.send('craftile.preview.ready', {});\n      setTimeout(() => {\n        this.sendPageData();\n      }, 0);\n    });\n\n    this.messenger.registerFallbackHandler((data: any) => {\n      const { type, payload } = data;\n      this.emit(type, payload);\n    });\n  }\n\n  private sendPageData() {\n    const pageDataElement = document.getElementById('page-data');\n\n    if (!pageDataElement) {\n      return;\n    }\n\n    try {\n      const pageData = JSON.parse(pageDataElement.textContent || '{}');\n      this.messenger.send('craftile.preview.page-data', { pageData });\n    } catch (error) {\n      console.error('Failed to parse page data:', error);\n    }\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../messenger/src/index.ts","../../event-bus/src/index.ts","../src/inspector.ts","../src/client.ts"],"sourcesContent":["export interface TypedMessage<T = any> {\n  type: string;\n  payload: T | undefined;\n}\n\nexport class WindowMessenger<Messages extends Record<string, any>> {\n  private handlers = new Map<keyof Messages, Function[]>();\n  private targetWindow: Window;\n  private targetOrigin: string;\n  private fallbackHandler?: (data: any, event: MessageEvent) => void;\n\n  constructor(targetWindow: Window, targetOrigin: string = '*') {\n    this.targetWindow = targetWindow;\n    this.targetOrigin = targetOrigin;\n\n    window.addEventListener('message', this.handleMessage.bind(this));\n  }\n\n  private handleMessage(event: MessageEvent) {\n    const message = event.data as TypedMessage;\n\n    if (!message.type) {\n      return;\n    }\n\n    const handlers = this.handlers.get(message.type);\n\n    if (handlers) {\n      handlers.forEach((handler) => handler(message.payload, event));\n    } else if (this.fallbackHandler) {\n      this.fallbackHandler(event.data, event);\n    }\n  }\n\n  send<K extends keyof Messages>(type: K, payload?: Messages[K]): void {\n    const message: TypedMessage<Messages[K]> = { type: type as string, payload };\n    this.targetWindow.postMessage(message, this.targetOrigin);\n  }\n\n  listen<K extends keyof Messages>(type: K, handler: (data: Messages[K], event: MessageEvent) => void): () => void {\n    if (!this.handlers.has(type)) {\n      this.handlers.set(type, []);\n    }\n\n    this.handlers.get(type)!.push(handler);\n\n    return () => {\n      const handlers = this.handlers.get(type);\n      if (handlers) {\n        const index = handlers.indexOf(handler);\n        if (index > -1) {\n          handlers.splice(index, 1);\n        }\n      }\n    };\n  }\n\n  registerFallbackHandler(handler: (data: any, event: MessageEvent) => void) {\n    this.fallbackHandler = handler;\n  }\n}\n\nexport function createIframeMessenger<T extends Record<string, any>>(iframe: HTMLIFrameElement, targetOrigin = '*') {\n  return new WindowMessenger<T>(iframe.contentWindow!, targetOrigin);\n}\n\nexport function createParentMessenger<T extends Record<string, any>>(targetOrigin = '*') {\n  if (window.parent === window) {\n    throw new Error('Not inside an iframe');\n  }\n  return new WindowMessenger<T>(window.parent, targetOrigin);\n}\n","export type EventListener<T = any> = (data: T) => void;\nexport type EventMap = {\n  [event: string]: any;\n};\n\n/**\n * Type-safe EventBus with generic event map support\n *\n * @template T Event map interface that defines the events and their data types\n */\nexport class EventBus<T extends EventMap = EventMap> {\n  private listeners: Map<keyof T, Set<EventListener<any>>> = new Map();\n\n  /**\n   * Add an event listener\n   *\n   * @param event Event name\n   * @param listener Event listener function\n   *\n   * @returns Cleanup function to remove the listener\n   */\n  on<K extends keyof T>(event: K, listener: EventListener<T[K]>): () => void {\n    if (!this.listeners.has(event)) {\n      this.listeners.set(event, new Set());\n    }\n\n    this.listeners.get(event)!.add(listener);\n\n    return () => {\n      this.off(event, listener);\n    };\n  }\n\n  /**\n   * Remove an event listener\n   *\n   * @param event Event name\n   * @param listener Event listener function to remove\n   */\n  off<K extends keyof T>(event: K, listener: EventListener<T[K]>): void {\n    const eventListeners = this.listeners.get(event);\n\n    if (eventListeners) {\n      eventListeners.delete(listener);\n\n      if (eventListeners.size === 0) {\n        this.listeners.delete(event);\n      }\n    }\n  }\n\n  /**\n   * Add a one-time event listener\n   *\n   * @param event Event name\n   * @param listener Event listener function\n   */\n  once<K extends keyof T>(event: K, listener: EventListener<T[K]>): void {\n    const onceWrapper = (data: T[K]) => {\n      listener(data);\n      this.off(event, onceWrapper);\n    };\n\n    this.on(event, onceWrapper);\n  }\n\n  /**\n   * Emit an event\n   *\n   * @param event Event name\n   * @param args Event data (optional, depending on event type)\n   */\n  emit<K extends keyof T>(event: K, ...args: T[K] extends void ? [] : [T[K]]): void {\n    const eventListeners = this.listeners.get(event);\n\n    if (eventListeners) {\n      const data = args[0];\n      eventListeners.forEach((listener) => {\n        try {\n          listener(data);\n        } catch (error) {\n          console.error(`Error in event listener for '${String(event)}':`, error);\n        }\n      });\n    }\n  }\n\n  /**\n   * Remove all listeners for an event, or all listeners if no event specified\n   *\n   * @param event Optional event name. If not provided, removes all listeners\n   */\n  removeAllListeners<K extends keyof T>(event?: K): void {\n    if (event) {\n      this.listeners.delete(event);\n    } else {\n      this.listeners.clear();\n    }\n  }\n}\n","import type { WindowMessenger } from '@craftile/messenger';\nimport type { WindowMessages } from '@craftile/types';\n\nexport class Inspector {\n  private active = true;\n  private messenger: WindowMessenger<WindowMessages>;\n  private currentHoveredBlock: HTMLElement | null = null;\n  private currentSelectedBlock: HTMLElement | null = null;\n  private overlayButtonHovered = false;\n\n  private resizeObserver: ResizeObserver | null = null;\n  private mutationObserver: MutationObserver | null = null;\n\n  constructor(messenger: WindowMessenger<WindowMessages>) {\n    this.messenger = messenger;\n\n    this.messenger.listen('craftile.inspector.enable', () => this.enable());\n    this.messenger.listen('craftile.inspector.disable', () => this.disable());\n    this.messenger.listen('craftile.inspector.overlay-button-enter', this.handleOverlayButtonEnter.bind(this));\n    this.messenger.listen('craftile.inspector.overlay-button-leave', this.handleOverlayButtonLeave.bind(this));\n    this.messenger.listen('craftile.editor.select-block', this.handleEditorSelectBlock.bind(this));\n\n    window.addEventListener('scroll', this.handleScroll.bind(this), { passive: true });\n    this.setupGlobalEventListeners();\n  }\n\n  enable() {\n    this.active = true;\n    document.body.classList.add('craftile-inspector-active');\n  }\n\n  disable() {\n    this.active = false;\n    document.body.classList.remove('craftile-inspector-active');\n    this.currentHoveredBlock = null;\n    this.currentSelectedBlock = null;\n    this.overlayButtonHovered = false;\n  }\n\n  private handleOverlayButtonEnter() {\n    this.overlayButtonHovered = true;\n  }\n\n  private handleOverlayButtonLeave(_data: { blockId: string }) {\n    this.overlayButtonHovered = false;\n\n    if (!this.currentHoveredBlock) {\n      this.messenger.send('craftile.preview.block-leave');\n    }\n  }\n\n  private handleEditorSelectBlock(data: { blockId: string }) {\n    const element = document.querySelector(`[data-block=\"${data.blockId}\"]`) as HTMLElement;\n\n    if (element) {\n      this.currentSelectedBlock = element;\n      this.sendSelectedBlockPosition();\n      this.trackSelectedBlock();\n    }\n  }\n\n  private handleScroll() {\n    if (this.currentSelectedBlock) {\n      this.sendSelectedBlockPosition();\n    }\n\n    if (this.currentHoveredBlock) {\n      this.sendHoveredBlockPosition();\n    }\n  }\n\n  private setupGlobalEventListeners() {\n    document.addEventListener('mouseover', this.handleGlobalHover.bind(this));\n    document.addEventListener('mouseout', this.handleGlobalLeave.bind(this));\n    document.addEventListener('click', this.handleGlobalClick.bind(this));\n  }\n\n  private handleGlobalHover(e: Event) {\n    if (!this.active) {\n      return;\n    }\n\n    const blockElement = (e.target as Element).closest('[data-block]') as HTMLElement;\n\n    if (!blockElement) {\n      return;\n    }\n\n    e.stopPropagation();\n    this.currentHoveredBlock = blockElement;\n    this.sendHoveredBlockPosition();\n  }\n\n  private handleGlobalLeave(e: Event) {\n    if (!this.active) {\n      return;\n    }\n\n    const blockElement = (e.target as Element).closest('[data-block]') as HTMLElement;\n    if (!blockElement) {\n      return;\n    }\n\n    // Only clear overlay if button is not being hovered\n    if (!this.overlayButtonHovered) {\n      this.currentHoveredBlock = null;\n      this.messenger.send('craftile.preview.block-leave');\n    }\n  }\n\n  private handleGlobalClick(e: Event) {\n    this.messenger.send('craftile.preview.click');\n\n    if (!this.active) {\n      return;\n    }\n\n    const blockElement = (e.target as Element).closest('[data-block]') as HTMLElement;\n    if (!blockElement) {\n      return;\n    }\n\n    e.stopPropagation();\n\n    const blockId = blockElement.getAttribute('data-block');\n\n    if (blockId) {\n      this.currentSelectedBlock = blockElement;\n      this.sendSelectedBlockPosition();\n      this.trackSelectedBlock();\n    }\n  }\n\n  private sendHoveredBlockPosition() {\n    const position = this.computeElementPositioning(this.currentHoveredBlock!);\n\n    this.messenger.send('craftile.preview.block-hover', {\n      blockRect: position.rect,\n      parentRect: position.parentRect,\n      scrollTop: position.scrollTop,\n      scrollLeft: position.scrollLeft,\n      blockId: this.currentHoveredBlock!.dataset.block as string,\n      parentFlexDirection: position.parentFlexDirection,\n    });\n  }\n\n  private sendSelectedBlockPosition(updates: boolean = false) {\n    const position = this.computeElementPositioning(this.currentSelectedBlock!);\n    this.messenger.send(updates ? 'craftile.preview.update-selected-block' : 'craftile.preview.block-select', {\n      blockRect: position.rect,\n      scrollTop: position.scrollTop,\n      scrollLeft: position.scrollLeft,\n      blockId: this.currentSelectedBlock!.dataset.block as string,\n    });\n  }\n\n  private trackSelectedBlock() {\n    if (!this.currentSelectedBlock) {\n      return;\n    }\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n      this.resizeObserver = null;\n    }\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n      this.mutationObserver = null;\n    }\n\n    this.resizeObserver = new ResizeObserver(() => {\n      this.sendSelectedBlockPosition(true);\n    });\n    this.resizeObserver.observe(this.currentSelectedBlock);\n\n    this.mutationObserver = new MutationObserver(() => {\n      this.sendSelectedBlockPosition(true);\n    });\n\n    this.mutationObserver.observe(this.currentSelectedBlock, {\n      attributes: true,\n      subtree: false,\n    });\n\n    // Also observe parent elements that might affect positioning\n    let parent = this.currentSelectedBlock.parentElement;\n    while (parent) {\n      this.mutationObserver.observe(parent, {\n        childList: true,\n        subtree: false,\n      });\n\n      if (parent === document.body) {\n        break;\n      }\n\n      parent = parent.parentElement;\n    }\n  }\n\n  private computeElementPositioning(element: HTMLElement) {\n    const rect = element.getBoundingClientRect();\n    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;\n\n    const eldestParent = this.findEldestParentBlock(element);\n    const parentRect = eldestParent && eldestParent !== element ? eldestParent.getBoundingClientRect() : undefined;\n    const parentFlexDirection = this.getElementFlexDirection(element.parentElement);\n\n    return {\n      rect,\n      parentRect,\n      scrollTop,\n      scrollLeft,\n      parentFlexDirection,\n    };\n  }\n\n  private findEldestParentBlock(element: HTMLElement): HTMLElement | null {\n    let eldestParent: HTMLElement | null = null;\n    let parentElement = element.parentElement;\n\n    while (parentElement && parentElement !== document.body) {\n      if (parentElement.hasAttribute('data-block')) {\n        eldestParent = parentElement;\n      }\n      parentElement = parentElement.parentElement;\n    }\n\n    return eldestParent;\n  }\n\n  private getElementFlexDirection(element: HTMLElement | null): 'row' | 'column' {\n    if (!element) {\n      return 'column';\n    }\n\n    const style = window.getComputedStyle(element);\n    const flexDirection = style.display.includes('flex') ? style.flexDirection : 'column';\n\n    return flexDirection === 'row' || flexDirection === 'row-reverse' ? 'row' : 'column';\n  }\n}\n","import type { WindowMessages } from '@craftile/types';\nimport { createParentMessenger, WindowMessenger } from '@craftile/messenger';\nimport { EventBus } from '@craftile/event-bus';\nimport { Inspector } from './inspector';\n\nexport class PreviewClient extends EventBus {\n  private messenger: WindowMessenger<WindowMessages>;\n  // @ts-ignore\n  private inspector: Inspector;\n\n  constructor() {\n    super();\n\n    this.messenger = createParentMessenger(window.origin);\n    this.inspector = new Inspector(this.messenger);\n\n    this.initialize();\n  }\n\n  private initialize() {\n    window.addEventListener('load', () => {\n      this.messenger.send('craftile.preview.ready', {});\n      setTimeout(() => {\n        this.sendPageData();\n      }, 0);\n    });\n\n    this.messenger.registerFallbackHandler((data: any) => {\n      const { type, payload } = data;\n      this.emit(type, payload);\n    });\n  }\n\n  private sendPageData() {\n    const pageDataElement = document.getElementById('page-data');\n\n    if (!pageDataElement) {\n      return;\n    }\n\n    try {\n      const pageData = JSON.parse(pageDataElement.textContent || '{}');\n      this.messenger.send('craftile.preview.page-data', { pageData });\n    } catch (error) {\n      console.error('Failed to parse page data:', error);\n    }\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -147,6 +147,7 @@ class Inspector {
     this.messenger.listen("craftile.inspector.disable", () => this.disable());
     this.messenger.listen("craftile.inspector.overlay-button-enter", this.handleOverlayButtonEnter.bind(this));
     this.messenger.listen("craftile.inspector.overlay-button-leave", this.handleOverlayButtonLeave.bind(this));
+    this.messenger.listen("craftile.editor.select-block", this.handleEditorSelectBlock.bind(this));
     window.addEventListener("scroll", this.handleScroll.bind(this), { passive: true });
     this.setupGlobalEventListeners();
   }
@@ -170,6 +171,14 @@ class Inspector {
       this.messenger.send("craftile.preview.block-leave");
     }
   }
+  handleEditorSelectBlock(data) {
+    const element = document.querySelector(`[data-block="${data.blockId}"]`);
+    if (element) {
+      this.currentSelectedBlock = element;
+      this.sendSelectedBlockPosition();
+      this.trackSelectedBlock();
+    }
+  }
   handleScroll() {
     if (this.currentSelectedBlock) {
       this.sendSelectedBlockPosition();

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../messenger/src/index.ts","../../event-bus/src/index.ts","../src/inspector.ts","../src/client.ts"],"sourcesContent":["export interface TypedMessage<T = any> {\n  type: string;\n  payload: T | undefined;\n}\n\nexport class WindowMessenger<Messages extends Record<string, any>> {\n  private handlers = new Map<keyof Messages, Function[]>();\n  private targetWindow: Window;\n  private targetOrigin: string;\n  private fallbackHandler?: (data: any, event: MessageEvent) => void;\n\n  constructor(targetWindow: Window, targetOrigin: string = '*') {\n    this.targetWindow = targetWindow;\n    this.targetOrigin = targetOrigin;\n\n    window.addEventListener('message', this.handleMessage.bind(this));\n  }\n\n  private handleMessage(event: MessageEvent) {\n    const message = event.data as TypedMessage;\n\n    if (!message.type) {\n      return;\n    }\n\n    const handlers = this.handlers.get(message.type);\n\n    if (handlers) {\n      handlers.forEach((handler) => handler(message.payload, event));\n    } else if (this.fallbackHandler) {\n      this.fallbackHandler(event.data, event);\n    }\n  }\n\n  send<K extends keyof Messages>(type: K, payload?: Messages[K]): void {\n    const message: TypedMessage<Messages[K]> = { type: type as string, payload };\n    this.targetWindow.postMessage(message, this.targetOrigin);\n  }\n\n  listen<K extends keyof Messages>(type: K, handler: (data: Messages[K], event: MessageEvent) => void): () => void {\n    if (!this.handlers.has(type)) {\n      this.handlers.set(type, []);\n    }\n\n    this.handlers.get(type)!.push(handler);\n\n    return () => {\n      const handlers = this.handlers.get(type);\n      if (handlers) {\n        const index = handlers.indexOf(handler);\n        if (index > -1) {\n          handlers.splice(index, 1);\n        }\n      }\n    };\n  }\n\n  registerFallbackHandler(handler: (data: any, event: MessageEvent) => void) {\n    this.fallbackHandler = handler;\n  }\n}\n\nexport function createIframeMessenger<T extends Record<string, any>>(iframe: HTMLIFrameElement, targetOrigin = '*') {\n  return new WindowMessenger<T>(iframe.contentWindow!, targetOrigin);\n}\n\nexport function createParentMessenger<T extends Record<string, any>>(targetOrigin = '*') {\n  if (window.parent === window) {\n    throw new Error('Not inside an iframe');\n  }\n  return new WindowMessenger<T>(window.parent, targetOrigin);\n}\n","export type EventListener<T = any> = (data: T) => void;\nexport type EventMap = {\n  [event: string]: any;\n};\n\n/**\n * Type-safe EventBus with generic event map support\n *\n * @template T Event map interface that defines the events and their data types\n */\nexport class EventBus<T extends EventMap = EventMap> {\n  private listeners: Map<keyof T, Set<EventListener<any>>> = new Map();\n\n  /**\n   * Add an event listener\n   *\n   * @param event Event name\n   * @param listener Event listener function\n   *\n   * @returns Cleanup function to remove the listener\n   */\n  on<K extends keyof T>(event: K, listener: EventListener<T[K]>): () => void {\n    if (!this.listeners.has(event)) {\n      this.listeners.set(event, new Set());\n    }\n\n    this.listeners.get(event)!.add(listener);\n\n    return () => {\n      this.off(event, listener);\n    };\n  }\n\n  /**\n   * Remove an event listener\n   *\n   * @param event Event name\n   * @param listener Event listener function to remove\n   */\n  off<K extends keyof T>(event: K, listener: EventListener<T[K]>): void {\n    const eventListeners = this.listeners.get(event);\n\n    if (eventListeners) {\n      eventListeners.delete(listener);\n\n      if (eventListeners.size === 0) {\n        this.listeners.delete(event);\n      }\n    }\n  }\n\n  /**\n   * Add a one-time event listener\n   *\n   * @param event Event name\n   * @param listener Event listener function\n   */\n  once<K extends keyof T>(event: K, listener: EventListener<T[K]>): void {\n    const onceWrapper = (data: T[K]) => {\n      listener(data);\n      this.off(event, onceWrapper);\n    };\n\n    this.on(event, onceWrapper);\n  }\n\n  /**\n   * Emit an event\n   *\n   * @param event Event name\n   * @param args Event data (optional, depending on event type)\n   */\n  emit<K extends keyof T>(event: K, ...args: T[K] extends void ? [] : [T[K]]): void {\n    const eventListeners = this.listeners.get(event);\n\n    if (eventListeners) {\n      const data = args[0];\n      eventListeners.forEach((listener) => {\n        try {\n          listener(data);\n        } catch (error) {\n          console.error(`Error in event listener for '${String(event)}':`, error);\n        }\n      });\n    }\n  }\n\n  /**\n   * Remove all listeners for an event, or all listeners if no event specified\n   *\n   * @param event Optional event name. If not provided, removes all listeners\n   */\n  removeAllListeners<K extends keyof T>(event?: K): void {\n    if (event) {\n      this.listeners.delete(event);\n    } else {\n      this.listeners.clear();\n    }\n  }\n}\n","import type { WindowMessenger } from '@craftile/messenger';\nimport type { WindowMessages } from '@craftile/types';\n\nexport class Inspector {\n  private active = true;\n  private messenger: WindowMessenger<WindowMessages>;\n  private currentHoveredBlock: HTMLElement | null = null;\n  private currentSelectedBlock: HTMLElement | null = null;\n  private overlayButtonHovered = false;\n\n  private resizeObserver: ResizeObserver | null = null;\n  private mutationObserver: MutationObserver | null = null;\n\n  constructor(messenger: WindowMessenger<WindowMessages>) {\n    this.messenger = messenger;\n\n    this.messenger.listen('craftile.inspector.enable', () => this.enable());\n    this.messenger.listen('craftile.inspector.disable', () => this.disable());\n    this.messenger.listen('craftile.inspector.overlay-button-enter', this.handleOverlayButtonEnter.bind(this));\n    this.messenger.listen('craftile.inspector.overlay-button-leave', this.handleOverlayButtonLeave.bind(this));\n\n    window.addEventListener('scroll', this.handleScroll.bind(this), { passive: true });\n    this.setupGlobalEventListeners();\n  }\n\n  enable() {\n    this.active = true;\n    document.body.classList.add('craftile-inspector-active');\n  }\n\n  disable() {\n    this.active = false;\n    document.body.classList.remove('craftile-inspector-active');\n    this.currentHoveredBlock = null;\n    this.currentSelectedBlock = null;\n    this.overlayButtonHovered = false;\n  }\n\n  private handleOverlayButtonEnter() {\n    this.overlayButtonHovered = true;\n  }\n\n  private handleOverlayButtonLeave(_data: { blockId: string }) {\n    this.overlayButtonHovered = false;\n\n    if (!this.currentHoveredBlock) {\n      this.messenger.send('craftile.preview.block-leave');\n    }\n  }\n\n  private handleScroll() {\n    if (this.currentSelectedBlock) {\n      this.sendSelectedBlockPosition();\n    }\n\n    if (this.currentHoveredBlock) {\n      this.sendHoveredBlockPosition();\n    }\n  }\n\n  private setupGlobalEventListeners() {\n    document.addEventListener('mouseover', this.handleGlobalHover.bind(this));\n    document.addEventListener('mouseout', this.handleGlobalLeave.bind(this));\n    document.addEventListener('click', this.handleGlobalClick.bind(this));\n  }\n\n  private handleGlobalHover(e: Event) {\n    if (!this.active) {\n      return;\n    }\n\n    const blockElement = (e.target as Element).closest('[data-block]') as HTMLElement;\n\n    if (!blockElement) {\n      return;\n    }\n\n    e.stopPropagation();\n    this.currentHoveredBlock = blockElement;\n    this.sendHoveredBlockPosition();\n  }\n\n  private handleGlobalLeave(e: Event) {\n    if (!this.active) {\n      return;\n    }\n\n    const blockElement = (e.target as Element).closest('[data-block]') as HTMLElement;\n    if (!blockElement) {\n      return;\n    }\n\n    // Only clear overlay if button is not being hovered\n    if (!this.overlayButtonHovered) {\n      this.currentHoveredBlock = null;\n      this.messenger.send('craftile.preview.block-leave');\n    }\n  }\n\n  private handleGlobalClick(e: Event) {\n    this.messenger.send('craftile.preview.click');\n\n    if (!this.active) {\n      return;\n    }\n\n    const blockElement = (e.target as Element).closest('[data-block]') as HTMLElement;\n    if (!blockElement) {\n      return;\n    }\n\n    e.stopPropagation();\n\n    const blockId = blockElement.getAttribute('data-block');\n\n    if (blockId) {\n      this.currentSelectedBlock = blockElement;\n      this.sendSelectedBlockPosition();\n      this.trackSelectedBlock();\n    }\n  }\n\n  private sendHoveredBlockPosition() {\n    const position = this.computeElementPositioning(this.currentHoveredBlock!);\n\n    this.messenger.send('craftile.preview.block-hover', {\n      blockRect: position.rect,\n      parentRect: position.parentRect,\n      scrollTop: position.scrollTop,\n      scrollLeft: position.scrollLeft,\n      blockId: this.currentHoveredBlock!.dataset.block as string,\n      parentFlexDirection: position.parentFlexDirection,\n    });\n  }\n\n  private sendSelectedBlockPosition(updates: boolean = false) {\n    const position = this.computeElementPositioning(this.currentSelectedBlock!);\n    this.messenger.send(updates ? 'craftile.preview.update-selected-block' : 'craftile.preview.block-select', {\n      blockRect: position.rect,\n      scrollTop: position.scrollTop,\n      scrollLeft: position.scrollLeft,\n      blockId: this.currentSelectedBlock!.dataset.block as string,\n    });\n  }\n\n  private trackSelectedBlock() {\n    if (!this.currentSelectedBlock) {\n      return;\n    }\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n      this.resizeObserver = null;\n    }\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n      this.mutationObserver = null;\n    }\n\n    this.resizeObserver = new ResizeObserver(() => {\n      this.sendSelectedBlockPosition(true);\n    });\n    this.resizeObserver.observe(this.currentSelectedBlock);\n\n    this.mutationObserver = new MutationObserver(() => {\n      this.sendSelectedBlockPosition(true);\n    });\n\n    this.mutationObserver.observe(this.currentSelectedBlock, {\n      attributes: true,\n      subtree: false,\n    });\n\n    // Also observe parent elements that might affect positioning\n    let parent = this.currentSelectedBlock.parentElement;\n    while (parent) {\n      this.mutationObserver.observe(parent, {\n        childList: true,\n        subtree: false,\n      });\n\n      if (parent === document.body) {\n        break;\n      }\n\n      parent = parent.parentElement;\n    }\n  }\n\n  private computeElementPositioning(element: HTMLElement) {\n    const rect = element.getBoundingClientRect();\n    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;\n\n    const eldestParent = this.findEldestParentBlock(element);\n    const parentRect = eldestParent && eldestParent !== element ? eldestParent.getBoundingClientRect() : undefined;\n    const parentFlexDirection = this.getElementFlexDirection(element.parentElement);\n\n    return {\n      rect,\n      parentRect,\n      scrollTop,\n      scrollLeft,\n      parentFlexDirection,\n    };\n  }\n\n  private findEldestParentBlock(element: HTMLElement): HTMLElement | null {\n    let eldestParent: HTMLElement | null = null;\n    let parentElement = element.parentElement;\n\n    while (parentElement && parentElement !== document.body) {\n      if (parentElement.hasAttribute('data-block')) {\n        eldestParent = parentElement;\n      }\n      parentElement = parentElement.parentElement;\n    }\n\n    return eldestParent;\n  }\n\n  private getElementFlexDirection(element: HTMLElement | null): 'row' | 'column' {\n    if (!element) {\n      return 'column';\n    }\n\n    const style = window.getComputedStyle(element);\n    const flexDirection = style.display.includes('flex') ? style.flexDirection : 'column';\n\n    return flexDirection === 'row' || flexDirection === 'row-reverse' ? 'row' : 'column';\n  }\n}\n","import type { WindowMessages } from '@craftile/types';\nimport { createParentMessenger, WindowMessenger } from '@craftile/messenger';\nimport { EventBus } from '@craftile/event-bus';\nimport { Inspector } from './inspector';\n\nexport class PreviewClient extends EventBus {\n  private messenger: WindowMessenger<WindowMessages>;\n  // @ts-ignore\n  private inspector: Inspector;\n\n  constructor() {\n    super();\n\n    this.messenger = createParentMessenger(window.origin);\n    this.inspector = new Inspector(this.messenger);\n\n    this.initialize();\n  }\n\n  private initialize() {\n    window.addEventListener('load', () => {\n      this.messenger.send('craftile.preview.ready', {});\n      setTimeout(() => {\n        this.sendPageData();\n      }, 0);\n    });\n\n    this.messenger.registerFallbackHandler((data: any) => {\n      const { type, payload } = data;\n      this.emit(type, payload);\n    });\n  }\n\n  private sendPageData() {\n    const pageDataElement = document.getElementById('page-data');\n\n    if (!pageDataElement) {\n      return;\n    }\n\n    try {\n      const pageData = JSON.parse(pageDataElement.textContent || '{}');\n      this.messenger.send('craftile.preview.page-data', { pageData });\n    } catch (error) {\n      console.error('Failed to parse page data:', error);\n    }\n  }\n}\n"],"names":[],"mappings":";;;AAKO,MAAM,gBAAsD;AAAA,EAMjE,YAAY,cAAsB,eAAuB,KAAK;AALtD,wDAAe,IAAA;AACf;AACA;AACA;AAGN,SAAK,eAAe;AACpB,SAAK,eAAe;AAEpB,WAAO,iBAAiB,WAAW,KAAK,cAAc,KAAK,IAAI,CAAC;AAAA,EAClE;AAAA,EAEQ,cAAc,OAAqB;AACzC,UAAM,UAAU,MAAM;AAEtB,QAAI,CAAC,QAAQ,MAAM;AACjB;AAAA,IACF;AAEA,UAAM,WAAW,KAAK,SAAS,IAAI,QAAQ,IAAI;AAE/C,QAAI,UAAU;AACZ,eAAS,QAAQ,CAAC,YAAY,QAAQ,QAAQ,SAAS,KAAK,CAAC;AAAA,IAC/D,WAAW,KAAK,iBAAiB;AAC/B,WAAK,gBAAgB,MAAM,MAAM,KAAK;AAAA,IACxC;AAAA,EACF;AAAA,EAEA,KAA+B,MAAS,SAA6B;AACnE,UAAM,UAAqC,EAAE,MAAsB,QAAA;AACnE,SAAK,aAAa,YAAY,SAAS,KAAK,YAAY;AAAA,EAC1D;AAAA,EAEA,OAAiC,MAAS,SAAuE;AAC/G,QAAI,CAAC,KAAK,SAAS,IAAI,IAAI,GAAG;AAC5B,WAAK,SAAS,IAAI,MAAM,CAAA,CAAE;AAAA,IAC5B;AAEA,SAAK,SAAS,IAAI,IAAI,EAAG,KAAK,OAAO;AAErC,WAAO,MAAM;AACX,YAAM,WAAW,KAAK,SAAS,IAAI,IAAI;AACvC,UAAI,UAAU;AACZ,cAAM,QAAQ,SAAS,QAAQ,OAAO;AACtC,YAAI,QAAQ,IAAI;AACd,mBAAS,OAAO,OAAO,CAAC;AAAA,QAC1B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,wBAAwB,SAAmD;AACzE,SAAK,kBAAkB;AAAA,EACzB;AACF;AAMO,SAAS,sBAAqD,eAAe,KAAK;AACvF,MAAI,OAAO,WAAW,QAAQ;AAC5B,UAAM,IAAI,MAAM,sBAAsB;AAAA,EACxC;AACA,SAAO,IAAI,gBAAmB,OAAO,QAAQ,YAAY;AAC3D;AC7DO,MAAM,SAAwC;AAAA,EAA9C;AACG,yDAAuD,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU/D,GAAsB,OAAU,UAA2C;AACzE,QAAI,CAAC,KAAK,UAAU,IAAI,KAAK,GAAG;AAC9B,WAAK,UAAU,IAAI,OAAO,oBAAI,KAAK;AAAA,IACrC;AAEA,SAAK,UAAU,IAAI,KAAK,EAAG,IAAI,QAAQ;AAEvC,WAAO,MAAM;AACX,WAAK,IAAI,OAAO,QAAQ;AAAA,IAC1B;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,IAAuB,OAAU,UAAqC;AACpE,UAAM,iBAAiB,KAAK,UAAU,IAAI,KAAK;AAE/C,QAAI,gBAAgB;AAClB,qBAAe,OAAO,QAAQ;AAE9B,UAAI,eAAe,SAAS,GAAG;AAC7B,aAAK,UAAU,OAAO,KAAK;AAAA,MAC7B;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,KAAwB,OAAU,UAAqC;AACrE,UAAM,cAAc,CAAC,SAAe;AAClC,eAAS,IAAI;AACb,WAAK,IAAI,OAAO,WAAW;AAAA,IAC7B;AAEA,SAAK,GAAG,OAAO,WAAW;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,KAAwB,UAAa,MAA6C;AAChF,UAAM,iBAAiB,KAAK,UAAU,IAAI,KAAK;AAE/C,QAAI,gBAAgB;AAClB,YAAM,OAAO,KAAK,CAAC;AACnB,qBAAe,QAAQ,CAAC,aAAa;AACnC,YAAI;AACF,mBAAS,IAAI;AAAA,QACf,SAAS,OAAO;AACd,kBAAQ,MAAM,gCAAgC,OAAO,KAAK,CAAC,MAAM,KAAK;AAAA,QACxE;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,mBAAsC,OAAiB;AACrD,QAAI,OAAO;AACT,WAAK,UAAU,OAAO,KAAK;AAAA,IAC7B,OAAO;AACL,WAAK,UAAU,MAAA;AAAA,IACjB;AAAA,EACF;AACF;AChGO,MAAM,UAAU;AAAA,EAUrB,YAAY,WAA4C;AAThD,kCAAS;AACT;AACA,+CAA0C;AAC1C,gDAA2C;AAC3C,gDAAuB;AAEvB,0CAAwC;AACxC,4CAA4C;AAGlD,SAAK,YAAY;AAEjB,SAAK,UAAU,OAAO,6BAA6B,MAAM,KAAK,QAAQ;AACtE,SAAK,UAAU,OAAO,8BAA8B,MAAM,KAAK,SAAS;AACxE,SAAK,UAAU,OAAO,2CAA2C,KAAK,yBAAyB,KAAK,IAAI,CAAC;AACzG,SAAK,UAAU,OAAO,2CAA2C,KAAK,yBAAyB,KAAK,IAAI,CAAC;AAEzG,WAAO,iBAAiB,UAAU,KAAK,aAAa,KAAK,IAAI,GAAG,EAAE,SAAS,MAAM;AACjF,SAAK,0BAAA;AAAA,EACP;AAAA,EAEA,SAAS;AACP,SAAK,SAAS;AACd,aAAS,KAAK,UAAU,IAAI,2BAA2B;AAAA,EACzD;AAAA,EAEA,UAAU;AACR,SAAK,SAAS;AACd,aAAS,KAAK,UAAU,OAAO,2BAA2B;AAC1D,SAAK,sBAAsB;AAC3B,SAAK,uBAAuB;AAC5B,SAAK,uBAAuB;AAAA,EAC9B;AAAA,EAEQ,2BAA2B;AACjC,SAAK,uBAAuB;AAAA,EAC9B;AAAA,EAEQ,yBAAyB,OAA4B;AAC3D,SAAK,uBAAuB;AAE5B,QAAI,CAAC,KAAK,qBAAqB;AAC7B,WAAK,UAAU,KAAK,8BAA8B;AAAA,IACpD;AAAA,EACF;AAAA,EAEQ,eAAe;AACrB,QAAI,KAAK,sBAAsB;AAC7B,WAAK,0BAAA;AAAA,IACP;AAEA,QAAI,KAAK,qBAAqB;AAC5B,WAAK,yBAAA;AAAA,IACP;AAAA,EACF;AAAA,EAEQ,4BAA4B;AAClC,aAAS,iBAAiB,aAAa,KAAK,kBAAkB,KAAK,IAAI,CAAC;AACxE,aAAS,iBAAiB,YAAY,KAAK,kBAAkB,KAAK,IAAI,CAAC;AACvE,aAAS,iBAAiB,SAAS,KAAK,kBAAkB,KAAK,IAAI,CAAC;AAAA,EACtE;AAAA,EAEQ,kBAAkB,GAAU;AAClC,QAAI,CAAC,KAAK,QAAQ;AAChB;AAAA,IACF;AAEA,UAAM,eAAgB,EAAE,OAAmB,QAAQ,cAAc;AAEjE,QAAI,CAAC,cAAc;AACjB;AAAA,IACF;AAEA,MAAE,gBAAA;AACF,SAAK,sBAAsB;AAC3B,SAAK,yBAAA;AAAA,EACP;AAAA,EAEQ,kBAAkB,GAAU;AAClC,QAAI,CAAC,KAAK,QAAQ;AAChB;AAAA,IACF;AAEA,UAAM,eAAgB,EAAE,OAAmB,QAAQ,cAAc;AACjE,QAAI,CAAC,cAAc;AACjB;AAAA,IACF;AAGA,QAAI,CAAC,KAAK,sBAAsB;AAC9B,WAAK,sBAAsB;AAC3B,WAAK,UAAU,KAAK,8BAA8B;AAAA,IACpD;AAAA,EACF;AAAA,EAEQ,kBAAkB,GAAU;AAClC,SAAK,UAAU,KAAK,wBAAwB;AAE5C,QAAI,CAAC,KAAK,QAAQ;AAChB;AAAA,IACF;AAEA,UAAM,eAAgB,EAAE,OAAmB,QAAQ,cAAc;AACjE,QAAI,CAAC,cAAc;AACjB;AAAA,IACF;AAEA,MAAE,gBAAA;AAEF,UAAM,UAAU,aAAa,aAAa,YAAY;AAEtD,QAAI,SAAS;AACX,WAAK,uBAAuB;AAC5B,WAAK,0BAAA;AACL,WAAK,mBAAA;AAAA,IACP;AAAA,EACF;AAAA,EAEQ,2BAA2B;AACjC,UAAM,WAAW,KAAK,0BAA0B,KAAK,mBAAoB;AAEzE,SAAK,UAAU,KAAK,gCAAgC;AAAA,MAClD,WAAW,SAAS;AAAA,MACpB,YAAY,SAAS;AAAA,MACrB,WAAW,SAAS;AAAA,MACpB,YAAY,SAAS;AAAA,MACrB,SAAS,KAAK,oBAAqB,QAAQ;AAAA,MAC3C,qBAAqB,SAAS;AAAA,IAAA,CAC/B;AAAA,EACH;AAAA,EAEQ,0BAA0B,UAAmB,OAAO;AAC1D,UAAM,WAAW,KAAK,0BAA0B,KAAK,oBAAqB;AAC1E,SAAK,UAAU,KAAK,UAAU,2CAA2C,iCAAiC;AAAA,MACxG,WAAW,SAAS;AAAA,MACpB,WAAW,SAAS;AAAA,MACpB,YAAY,SAAS;AAAA,MACrB,SAAS,KAAK,qBAAsB,QAAQ;AAAA,IAAA,CAC7C;AAAA,EACH;AAAA,EAEQ,qBAAqB;AAC3B,QAAI,CAAC,KAAK,sBAAsB;AAC9B;AAAA,IACF;AAEA,QAAI,KAAK,gBAAgB;AACvB,WAAK,eAAe,WAAA;AACpB,WAAK,iBAAiB;AAAA,IACxB;AAEA,QAAI,KAAK,kBAAkB;AACzB,WAAK,iBAAiB,WAAA;AACtB,WAAK,mBAAmB;AAAA,IAC1B;AAEA,SAAK,iBAAiB,IAAI,eAAe,MAAM;AAC7C,WAAK,0BAA0B,IAAI;AAAA,IACrC,CAAC;AACD,SAAK,eAAe,QAAQ,KAAK,oBAAoB;AAErD,SAAK,mBAAmB,IAAI,iBAAiB,MAAM;AACjD,WAAK,0BAA0B,IAAI;AAAA,IACrC,CAAC;AAED,SAAK,iBAAiB,QAAQ,KAAK,sBAAsB;AAAA,MACvD,YAAY;AAAA,MACZ,SAAS;AAAA,IAAA,CACV;AAGD,QAAI,SAAS,KAAK,qBAAqB;AACvC,WAAO,QAAQ;AACb,WAAK,iBAAiB,QAAQ,QAAQ;AAAA,QACpC,WAAW;AAAA,QACX,SAAS;AAAA,MAAA,CACV;AAED,UAAI,WAAW,SAAS,MAAM;AAC5B;AAAA,MACF;AAEA,eAAS,OAAO;AAAA,IAClB;AAAA,EACF;AAAA,EAEQ,0BAA0B,SAAsB;AACtD,UAAM,OAAO,QAAQ,sBAAA;AACrB,UAAM,YAAY,OAAO,eAAe,SAAS,gBAAgB;AACjE,UAAM,aAAa,OAAO,eAAe,SAAS,gBAAgB;AAElE,UAAM,eAAe,KAAK,sBAAsB,OAAO;AACvD,UAAM,aAAa,gBAAgB,iBAAiB,UAAU,aAAa,0BAA0B;AACrG,UAAM,sBAAsB,KAAK,wBAAwB,QAAQ,aAAa;AAE9E,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AAAA,EAEQ,sBAAsB,SAA0C;AACtE,QAAI,eAAmC;AACvC,QAAI,gBAAgB,QAAQ;AAE5B,WAAO,iBAAiB,kBAAkB,SAAS,MAAM;AACvD,UAAI,cAAc,aAAa,YAAY,GAAG;AAC5C,uBAAe;AAAA,MACjB;AACA,sBAAgB,cAAc;AAAA,IAChC;AAEA,WAAO;AAAA,EACT;AAAA,EAEQ,wBAAwB,SAA+C;AAC7E,QAAI,CAAC,SAAS;AACZ,aAAO;AAAA,IACT;AAEA,UAAM,QAAQ,OAAO,iBAAiB,OAAO;AAC7C,UAAM,gBAAgB,MAAM,QAAQ,SAAS,MAAM,IAAI,MAAM,gBAAgB;AAE7E,WAAO,kBAAkB,SAAS,kBAAkB,gBAAgB,QAAQ;AAAA,EAC9E;AACF;ACnOO,MAAM,sBAAsB,SAAS;AAAA,EAK1C,cAAc;AACZ,UAAA;AALM;AAEA;AAAA;AAKN,SAAK,YAAY,sBAAsB,OAAO,MAAM;AACpD,SAAK,YAAY,IAAI,UAAU,KAAK,SAAS;AAE7C,SAAK,WAAA;AAAA,EACP;AAAA,EAEQ,aAAa;AACnB,WAAO,iBAAiB,QAAQ,MAAM;AACpC,WAAK,UAAU,KAAK,0BAA0B,CAAA,CAAE;AAChD,iBAAW,MAAM;AACf,aAAK,aAAA;AAAA,MACP,GAAG,CAAC;AAAA,IACN,CAAC;AAED,SAAK,UAAU,wBAAwB,CAAC,SAAc;AACpD,YAAM,EAAE,MAAM,QAAA,IAAY;AAC1B,WAAK,KAAK,MAAM,OAAO;AAAA,IACzB,CAAC;AAAA,EACH;AAAA,EAEQ,eAAe;AACrB,UAAM,kBAAkB,SAAS,eAAe,WAAW;AAE3D,QAAI,CAAC,iBAAiB;AACpB;AAAA,IACF;AAEA,QAAI;AACF,YAAM,WAAW,KAAK,MAAM,gBAAgB,eAAe,IAAI;AAC/D,WAAK,UAAU,KAAK,8BAA8B,EAAE,UAAU;AAAA,IAChE,SAAS,OAAO;AACd,cAAQ,MAAM,8BAA8B,KAAK;AAAA,IACnD;AAAA,EACF;AACF;"}
+{"version":3,"file":"index.js","sources":["../../messenger/src/index.ts","../../event-bus/src/index.ts","../src/inspector.ts","../src/client.ts"],"sourcesContent":["export interface TypedMessage<T = any> {\n  type: string;\n  payload: T | undefined;\n}\n\nexport class WindowMessenger<Messages extends Record<string, any>> {\n  private handlers = new Map<keyof Messages, Function[]>();\n  private targetWindow: Window;\n  private targetOrigin: string;\n  private fallbackHandler?: (data: any, event: MessageEvent) => void;\n\n  constructor(targetWindow: Window, targetOrigin: string = '*') {\n    this.targetWindow = targetWindow;\n    this.targetOrigin = targetOrigin;\n\n    window.addEventListener('message', this.handleMessage.bind(this));\n  }\n\n  private handleMessage(event: MessageEvent) {\n    const message = event.data as TypedMessage;\n\n    if (!message.type) {\n      return;\n    }\n\n    const handlers = this.handlers.get(message.type);\n\n    if (handlers) {\n      handlers.forEach((handler) => handler(message.payload, event));\n    } else if (this.fallbackHandler) {\n      this.fallbackHandler(event.data, event);\n    }\n  }\n\n  send<K extends keyof Messages>(type: K, payload?: Messages[K]): void {\n    const message: TypedMessage<Messages[K]> = { type: type as string, payload };\n    this.targetWindow.postMessage(message, this.targetOrigin);\n  }\n\n  listen<K extends keyof Messages>(type: K, handler: (data: Messages[K], event: MessageEvent) => void): () => void {\n    if (!this.handlers.has(type)) {\n      this.handlers.set(type, []);\n    }\n\n    this.handlers.get(type)!.push(handler);\n\n    return () => {\n      const handlers = this.handlers.get(type);\n      if (handlers) {\n        const index = handlers.indexOf(handler);\n        if (index > -1) {\n          handlers.splice(index, 1);\n        }\n      }\n    };\n  }\n\n  registerFallbackHandler(handler: (data: any, event: MessageEvent) => void) {\n    this.fallbackHandler = handler;\n  }\n}\n\nexport function createIframeMessenger<T extends Record<string, any>>(iframe: HTMLIFrameElement, targetOrigin = '*') {\n  return new WindowMessenger<T>(iframe.contentWindow!, targetOrigin);\n}\n\nexport function createParentMessenger<T extends Record<string, any>>(targetOrigin = '*') {\n  if (window.parent === window) {\n    throw new Error('Not inside an iframe');\n  }\n  return new WindowMessenger<T>(window.parent, targetOrigin);\n}\n","export type EventListener<T = any> = (data: T) => void;\nexport type EventMap = {\n  [event: string]: any;\n};\n\n/**\n * Type-safe EventBus with generic event map support\n *\n * @template T Event map interface that defines the events and their data types\n */\nexport class EventBus<T extends EventMap = EventMap> {\n  private listeners: Map<keyof T, Set<EventListener<any>>> = new Map();\n\n  /**\n   * Add an event listener\n   *\n   * @param event Event name\n   * @param listener Event listener function\n   *\n   * @returns Cleanup function to remove the listener\n   */\n  on<K extends keyof T>(event: K, listener: EventListener<T[K]>): () => void {\n    if (!this.listeners.has(event)) {\n      this.listeners.set(event, new Set());\n    }\n\n    this.listeners.get(event)!.add(listener);\n\n    return () => {\n      this.off(event, listener);\n    };\n  }\n\n  /**\n   * Remove an event listener\n   *\n   * @param event Event name\n   * @param listener Event listener function to remove\n   */\n  off<K extends keyof T>(event: K, listener: EventListener<T[K]>): void {\n    const eventListeners = this.listeners.get(event);\n\n    if (eventListeners) {\n      eventListeners.delete(listener);\n\n      if (eventListeners.size === 0) {\n        this.listeners.delete(event);\n      }\n    }\n  }\n\n  /**\n   * Add a one-time event listener\n   *\n   * @param event Event name\n   * @param listener Event listener function\n   */\n  once<K extends keyof T>(event: K, listener: EventListener<T[K]>): void {\n    const onceWrapper = (data: T[K]) => {\n      listener(data);\n      this.off(event, onceWrapper);\n    };\n\n    this.on(event, onceWrapper);\n  }\n\n  /**\n   * Emit an event\n   *\n   * @param event Event name\n   * @param args Event data (optional, depending on event type)\n   */\n  emit<K extends keyof T>(event: K, ...args: T[K] extends void ? [] : [T[K]]): void {\n    const eventListeners = this.listeners.get(event);\n\n    if (eventListeners) {\n      const data = args[0];\n      eventListeners.forEach((listener) => {\n        try {\n          listener(data);\n        } catch (error) {\n          console.error(`Error in event listener for '${String(event)}':`, error);\n        }\n      });\n    }\n  }\n\n  /**\n   * Remove all listeners for an event, or all listeners if no event specified\n   *\n   * @param event Optional event name. If not provided, removes all listeners\n   */\n  removeAllListeners<K extends keyof T>(event?: K): void {\n    if (event) {\n      this.listeners.delete(event);\n    } else {\n      this.listeners.clear();\n    }\n  }\n}\n","import type { WindowMessenger } from '@craftile/messenger';\nimport type { WindowMessages } from '@craftile/types';\n\nexport class Inspector {\n  private active = true;\n  private messenger: WindowMessenger<WindowMessages>;\n  private currentHoveredBlock: HTMLElement | null = null;\n  private currentSelectedBlock: HTMLElement | null = null;\n  private overlayButtonHovered = false;\n\n  private resizeObserver: ResizeObserver | null = null;\n  private mutationObserver: MutationObserver | null = null;\n\n  constructor(messenger: WindowMessenger<WindowMessages>) {\n    this.messenger = messenger;\n\n    this.messenger.listen('craftile.inspector.enable', () => this.enable());\n    this.messenger.listen('craftile.inspector.disable', () => this.disable());\n    this.messenger.listen('craftile.inspector.overlay-button-enter', this.handleOverlayButtonEnter.bind(this));\n    this.messenger.listen('craftile.inspector.overlay-button-leave', this.handleOverlayButtonLeave.bind(this));\n    this.messenger.listen('craftile.editor.select-block', this.handleEditorSelectBlock.bind(this));\n\n    window.addEventListener('scroll', this.handleScroll.bind(this), { passive: true });\n    this.setupGlobalEventListeners();\n  }\n\n  enable() {\n    this.active = true;\n    document.body.classList.add('craftile-inspector-active');\n  }\n\n  disable() {\n    this.active = false;\n    document.body.classList.remove('craftile-inspector-active');\n    this.currentHoveredBlock = null;\n    this.currentSelectedBlock = null;\n    this.overlayButtonHovered = false;\n  }\n\n  private handleOverlayButtonEnter() {\n    this.overlayButtonHovered = true;\n  }\n\n  private handleOverlayButtonLeave(_data: { blockId: string }) {\n    this.overlayButtonHovered = false;\n\n    if (!this.currentHoveredBlock) {\n      this.messenger.send('craftile.preview.block-leave');\n    }\n  }\n\n  private handleEditorSelectBlock(data: { blockId: string }) {\n    const element = document.querySelector(`[data-block=\"${data.blockId}\"]`) as HTMLElement;\n\n    if (element) {\n      this.currentSelectedBlock = element;\n      this.sendSelectedBlockPosition();\n      this.trackSelectedBlock();\n    }\n  }\n\n  private handleScroll() {\n    if (this.currentSelectedBlock) {\n      this.sendSelectedBlockPosition();\n    }\n\n    if (this.currentHoveredBlock) {\n      this.sendHoveredBlockPosition();\n    }\n  }\n\n  private setupGlobalEventListeners() {\n    document.addEventListener('mouseover', this.handleGlobalHover.bind(this));\n    document.addEventListener('mouseout', this.handleGlobalLeave.bind(this));\n    document.addEventListener('click', this.handleGlobalClick.bind(this));\n  }\n\n  private handleGlobalHover(e: Event) {\n    if (!this.active) {\n      return;\n    }\n\n    const blockElement = (e.target as Element).closest('[data-block]') as HTMLElement;\n\n    if (!blockElement) {\n      return;\n    }\n\n    e.stopPropagation();\n    this.currentHoveredBlock = blockElement;\n    this.sendHoveredBlockPosition();\n  }\n\n  private handleGlobalLeave(e: Event) {\n    if (!this.active) {\n      return;\n    }\n\n    const blockElement = (e.target as Element).closest('[data-block]') as HTMLElement;\n    if (!blockElement) {\n      return;\n    }\n\n    // Only clear overlay if button is not being hovered\n    if (!this.overlayButtonHovered) {\n      this.currentHoveredBlock = null;\n      this.messenger.send('craftile.preview.block-leave');\n    }\n  }\n\n  private handleGlobalClick(e: Event) {\n    this.messenger.send('craftile.preview.click');\n\n    if (!this.active) {\n      return;\n    }\n\n    const blockElement = (e.target as Element).closest('[data-block]') as HTMLElement;\n    if (!blockElement) {\n      return;\n    }\n\n    e.stopPropagation();\n\n    const blockId = blockElement.getAttribute('data-block');\n\n    if (blockId) {\n      this.currentSelectedBlock = blockElement;\n      this.sendSelectedBlockPosition();\n      this.trackSelectedBlock();\n    }\n  }\n\n  private sendHoveredBlockPosition() {\n    const position = this.computeElementPositioning(this.currentHoveredBlock!);\n\n    this.messenger.send('craftile.preview.block-hover', {\n      blockRect: position.rect,\n      parentRect: position.parentRect,\n      scrollTop: position.scrollTop,\n      scrollLeft: position.scrollLeft,\n      blockId: this.currentHoveredBlock!.dataset.block as string,\n      parentFlexDirection: position.parentFlexDirection,\n    });\n  }\n\n  private sendSelectedBlockPosition(updates: boolean = false) {\n    const position = this.computeElementPositioning(this.currentSelectedBlock!);\n    this.messenger.send(updates ? 'craftile.preview.update-selected-block' : 'craftile.preview.block-select', {\n      blockRect: position.rect,\n      scrollTop: position.scrollTop,\n      scrollLeft: position.scrollLeft,\n      blockId: this.currentSelectedBlock!.dataset.block as string,\n    });\n  }\n\n  private trackSelectedBlock() {\n    if (!this.currentSelectedBlock) {\n      return;\n    }\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n      this.resizeObserver = null;\n    }\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n      this.mutationObserver = null;\n    }\n\n    this.resizeObserver = new ResizeObserver(() => {\n      this.sendSelectedBlockPosition(true);\n    });\n    this.resizeObserver.observe(this.currentSelectedBlock);\n\n    this.mutationObserver = new MutationObserver(() => {\n      this.sendSelectedBlockPosition(true);\n    });\n\n    this.mutationObserver.observe(this.currentSelectedBlock, {\n      attributes: true,\n      subtree: false,\n    });\n\n    // Also observe parent elements that might affect positioning\n    let parent = this.currentSelectedBlock.parentElement;\n    while (parent) {\n      this.mutationObserver.observe(parent, {\n        childList: true,\n        subtree: false,\n      });\n\n      if (parent === document.body) {\n        break;\n      }\n\n      parent = parent.parentElement;\n    }\n  }\n\n  private computeElementPositioning(element: HTMLElement) {\n    const rect = element.getBoundingClientRect();\n    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;\n\n    const eldestParent = this.findEldestParentBlock(element);\n    const parentRect = eldestParent && eldestParent !== element ? eldestParent.getBoundingClientRect() : undefined;\n    const parentFlexDirection = this.getElementFlexDirection(element.parentElement);\n\n    return {\n      rect,\n      parentRect,\n      scrollTop,\n      scrollLeft,\n      parentFlexDirection,\n    };\n  }\n\n  private findEldestParentBlock(element: HTMLElement): HTMLElement | null {\n    let eldestParent: HTMLElement | null = null;\n    let parentElement = element.parentElement;\n\n    while (parentElement && parentElement !== document.body) {\n      if (parentElement.hasAttribute('data-block')) {\n        eldestParent = parentElement;\n      }\n      parentElement = parentElement.parentElement;\n    }\n\n    return eldestParent;\n  }\n\n  private getElementFlexDirection(element: HTMLElement | null): 'row' | 'column' {\n    if (!element) {\n      return 'column';\n    }\n\n    const style = window.getComputedStyle(element);\n    const flexDirection = style.display.includes('flex') ? style.flexDirection : 'column';\n\n    return flexDirection === 'row' || flexDirection === 'row-reverse' ? 'row' : 'column';\n  }\n}\n","import type { WindowMessages } from '@craftile/types';\nimport { createParentMessenger, WindowMessenger } from '@craftile/messenger';\nimport { EventBus } from '@craftile/event-bus';\nimport { Inspector } from './inspector';\n\nexport class PreviewClient extends EventBus {\n  private messenger: WindowMessenger<WindowMessages>;\n  // @ts-ignore\n  private inspector: Inspector;\n\n  constructor() {\n    super();\n\n    this.messenger = createParentMessenger(window.origin);\n    this.inspector = new Inspector(this.messenger);\n\n    this.initialize();\n  }\n\n  private initialize() {\n    window.addEventListener('load', () => {\n      this.messenger.send('craftile.preview.ready', {});\n      setTimeout(() => {\n        this.sendPageData();\n      }, 0);\n    });\n\n    this.messenger.registerFallbackHandler((data: any) => {\n      const { type, payload } = data;\n      this.emit(type, payload);\n    });\n  }\n\n  private sendPageData() {\n    const pageDataElement = document.getElementById('page-data');\n\n    if (!pageDataElement) {\n      return;\n    }\n\n    try {\n      const pageData = JSON.parse(pageDataElement.textContent || '{}');\n      this.messenger.send('craftile.preview.page-data', { pageData });\n    } catch (error) {\n      console.error('Failed to parse page data:', error);\n    }\n  }\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@craftile/preview-client",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Browser client for Craftile editor preview iframe functionality",
   "keywords": [
     "craftile",
@@ -35,9 +35,9 @@
     "typescript": "^5.8.4",
     "vite": "^7.0.0",
     "vite-plugin-dts": "^4.3.0",
-    "@craftile/event-bus": "0.1.2",
-    "@craftile/messenger": "0.1.2",
-    "@craftile/types": "0.1.2"
+    "@craftile/event-bus": "0.1.4",
+    "@craftile/messenger": "0.1.4",
+    "@craftile/types": "0.1.4"
   },
   "repository": {
     "type": "git",