@rpgjs/client 5.0.0-beta.1 → 5.0.0-beta.11

package/dist/Gui/Gui.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gui.js","names":[],"sources":["../../src/Gui/Gui.ts"],"sourcesContent":["import { Context, inject } from \"@signe/di\";\nimport { signal, Signal, WritableSignal } from \"canvasengine\";\nimport { AbstractWebsocket, WebSocketToken } from \"../services/AbstractSocket\";\nimport { DialogboxComponent, ShopComponent, SaveLoadComponent, MainMenuComponent, NotificationComponent, TitleScreenComponent, GameoverComponent } from \"../components/gui\";\nimport { combineLatest, Subscription } from \"rxjs\";\nimport { delay, PrebuiltGui } from \"@rpgjs/common\";\n\ninterface GuiOptions {\n  name?: string;\n  id?: string;\n  component: any;\n  display?: boolean;\n  data?: any;\n  /**\n   * Auto display the GUI when added to the system\n   * @default false\n   */\n  autoDisplay?: boolean;\n  /**\n   * Function that returns an array of Signal dependencies\n   * The GUI will only display when all dependencies are resolved (!= undefined)\n   * @returns Array of Signal dependencies\n   */\n  dependencies?: () => Signal[];\n  /**\n   * Attach the GUI to sprites instead of displaying globally\n   * When true, the GUI will be rendered in character.ce for each sprite\n   * @default false\n   */\n  attachToSprite?: boolean;\n}\n\ninterface GuiInstance {\n  name: string;\n  component: any;\n  display: WritableSignal<boolean>;\n  data: WritableSignal<any>;\n  autoDisplay: boolean;\n  dependencies?: () => Signal[];\n  subscription?: Subscription;\n  attachToSprite?: boolean;\n}\n\ninterface GuiAction {\n  guiId: string;\n  name: string;\n  data: any;\n  clientActionId: string;\n}\n\ntype OptimisticReducer = (data: any, action: GuiAction) => any;\n\nconst throwError = (id: string) => {\n  throw `The GUI named ${id} is non-existent. Please add the component in the gui property of the decorator @RpgClient`;\n};\n\nconst updateItemQuantity = (items: any[], id: string) => {\n  const index = items.findIndex((item) => item?.id === id);\n  if (index === -1) return items;\n  const item = items[index];\n  if (item?.usable === false) return items;\n  if (item?.consumable === false) return items;\n  const quantity = typeof item?.quantity === \"number\" ? item.quantity : 1;\n  const nextQuantity = Math.max(0, quantity - 1);\n  if (nextQuantity === quantity) return items;\n  if (nextQuantity <= 0) {\n    return items.filter((_, idx) => idx !== index);\n  }\n  const nextItems = items.slice();\n  nextItems[index] = { ...item, quantity: nextQuantity };\n  return nextItems;\n};\n\nconst updateEquippedFlag = (items: any[], id: string, equip: boolean) => {\n  const index = items.findIndex((item) => item?.id === id);\n  if (index === -1) return items;\n  const item = items[index];\n  if (item?.equipped === equip) return items;\n  const nextItems = items.slice();\n  nextItems[index] = { ...item, equipped: equip };\n  return nextItems;\n};\n\nconst mainMenuOptimisticReducer: OptimisticReducer = (data, action) => {\n  if (!data || typeof data !== \"object\") return data;\n  if (action.name === \"useItem\") {\n    if (!Array.isArray(data.items)) return data;\n    const id = action.data?.id;\n    if (!id) return data;\n    const nextItems = updateItemQuantity(data.items, id);\n    if (nextItems === data.items) return data;\n    return { ...data, items: nextItems };\n  }\n  if (action.name === \"equipItem\") {\n    const id = action.data?.id;\n    if (!id || typeof action.data?.equip !== \"boolean\") return data;\n    const equip = action.data.equip;\n    let nextItems = data.items;\n    let nextEquips = data.equips;\n    if (Array.isArray(data.items)) {\n      nextItems = updateEquippedFlag(data.items, id, equip);\n    }\n    if (Array.isArray(data.equips)) {\n      nextEquips = updateEquippedFlag(data.equips, id, equip);\n    }\n    if (nextItems === data.items && nextEquips === data.equips) return data;\n    return {\n      ...data,\n      ...(nextItems !== data.items ? { items: nextItems } : {}),\n      ...(nextEquips !== data.equips ? { equips: nextEquips } : {})\n    };\n  }\n  return data;\n};\n\nexport class RpgGui {\n  private webSocket: AbstractWebsocket;\n  gui = signal<Record<string, GuiInstance>>({});\n  extraGuis: GuiInstance[] = [];\n  private vueGuiInstance: any = null; // Reference to VueGui instance\n  private optimisticReducers = new Map<string, OptimisticReducer[]>();\n  private pendingActions = new Map<string, GuiAction[]>();\n  /**\n   * Signal tracking which player IDs should display attached GUIs\n   * Key: player ID, Value: boolean (true = show, false = hide)\n   */\n  attachedGuiDisplayState = signal<Record<string, boolean>>({});\n\n  constructor(private context: Context) {\n    this.webSocket = inject(context, WebSocketToken);\n    this.add({\n      name: \"rpg-dialog\",\n      component: DialogboxComponent,\n    });\n    this.add({\n      name: PrebuiltGui.MainMenu,\n      component: MainMenuComponent,\n    });\n    this.add({\n      name: PrebuiltGui.Shop,\n      component: ShopComponent,\n    });\n    this.add({\n      name: PrebuiltGui.Notification,\n      component: NotificationComponent,\n      autoDisplay: true,\n    });\n    this.add({\n      name: PrebuiltGui.Save,\n      component: SaveLoadComponent,\n    });\n    this.add({\n      name: PrebuiltGui.TitleScreen,\n      component: TitleScreenComponent,\n    });\n    this.add({\n      name: PrebuiltGui.Gameover,\n      component: GameoverComponent,\n    });\n\n    this.registerOptimisticReducer(PrebuiltGui.MainMenu, mainMenuOptimisticReducer);\n  }\n\n  async _initialize() {\n    this.webSocket.on(\"gui.open\", (data: { guiId: string; data: any }) => {\n      this.clearPendingActions(data.guiId);\n      this.display(data.guiId, data.data);\n    });\n\n    this.webSocket.on(\"gui.exit\", (guiId: string) => {\n      this.hide(guiId);\n    });\n\n    this.webSocket.on(\"gui.update\", (payload: { guiId: string; data: any; clientActionId?: string }) => {\n      this.applyServerUpdate(payload.guiId, payload.data, payload.clientActionId);\n    });\n\n    /**\n     * Listen for tooltip display state changes from server\n     * This is triggered by showAttachedGui/hideAttachedGui on the server\n     */\n    this.webSocket.on(\"gui.tooltip\", (data: { players: string[]; display: boolean }) => {\n      const currentState = { ...this.attachedGuiDisplayState() };\n      data.players.forEach((playerId) => {\n        currentState[playerId] = data.display;\n      });\n      this.attachedGuiDisplayState.set(currentState);\n    });\n  }\n\n  /**\n   * Set the VueGui instance reference for Vue component management\n   * This is called by VueGui when it's initialized\n   * \n   * @param vueGuiInstance - The VueGui instance\n   */\n  _setVueGuiInstance(vueGuiInstance: any) {\n    this.vueGuiInstance = vueGuiInstance;\n  }\n\n  /**\n   * Notify VueGui about GUI state changes\n   * This synchronizes the Vue component display state\n   * \n   * @param guiId - The GUI component ID\n   * @param display - Display state\n   * @param data - Component data\n   */\n  private _notifyVueGui(guiId: string, display: boolean, data: any = {}) {\n    if (this.vueGuiInstance && this.vueGuiInstance.vm) {\n      // Find the GUI in extraGuis\n      const extraGui = this.extraGuis.find(gui => gui.name === guiId);\n      if (extraGui) {\n        // Update the Vue component's display state and data\n        this.vueGuiInstance.vm.gui[guiId] = {\n          name: guiId,\n          display,\n          data,\n          attachToSprite: extraGui.attachToSprite || false\n        };\n        // Trigger Vue reactivity\n        this.vueGuiInstance.vm.gui = Object.assign({}, this.vueGuiInstance.vm.gui);\n      }\n    }\n  }\n\n  /**\n   * Initialize Vue components in the VueGui instance\n   * This should be called after VueGui is mounted\n   */\n  _initializeVueComponents() {\n    if (this.vueGuiInstance && this.vueGuiInstance.vm) {\n      // Initialize all extraGuis in the Vue instance\n      this.extraGuis.forEach(gui => {\n        this.vueGuiInstance.vm.gui[gui.name] = {\n          name: gui.name,\n          display: gui.display(),\n          data: gui.data(),\n          attachToSprite: gui.attachToSprite || false\n        };\n      });\n      \n      // Trigger Vue reactivity\n      this.vueGuiInstance.vm.gui = Object.assign({}, this.vueGuiInstance.vm.gui);\n    }\n  }\n\n  guiInteraction(guiId: string, name: string, data: any) {\n    const clientActionId = globalThis.crypto?.randomUUID?.() || `${Date.now()}-${Math.random()}`;\n    const actionData = { ...(data || {}), clientActionId };\n    this.applyOptimisticAction({\n      guiId,\n      name,\n      data: actionData,\n      clientActionId\n    });\n    this.webSocket.emit(\"gui.interaction\", {\n      guiId,\n      name,\n      data: actionData,\n    });\n  }\n\n  guiClose(guiId: string, data?: any) {\n    this.webSocket.emit(\"gui.exit\", {\n      guiId,\n      data,\n    });\n  }\n\n  /**\n   * Add a GUI component to the system\n   * \n   * By default, only CanvasEngine components (.ce files) are accepted.\n   * Vue components should be handled by the @rpgjs/vue package.\n   * \n   * @param gui - GUI configuration options\n   * @param gui.name - Name or ID of the GUI component\n   * @param gui.id - Alternative ID if name is not provided\n   * @param gui.component - The component to render (must be a CanvasEngine component)\n   * @param gui.display - Initial display state (default: false)\n   * @param gui.data - Initial data for the component\n   * @param gui.autoDisplay - Auto display when added (default: false)\n   * @param gui.dependencies - Function returning Signal dependencies\n   * @param gui.attachToSprite - Attach GUI to sprites instead of global display (default: false)\n   * \n   * @example\n   * ```ts\n   * gui.add({\n   *   name: 'inventory',\n   *   component: InventoryComponent, // Must be a .ce component\n   *   autoDisplay: true,\n   *   dependencies: () => [playerSignal, inventorySignal]\n   * });\n   * \n   * // Attach to sprites\n   * gui.add({\n   *   name: 'tooltip',\n   *   component: TooltipComponent,\n   *   attachToSprite: true\n   * });\n   * ```\n   */\n  add(gui: GuiOptions) {\n    const guiId = gui.name || gui.id;\n    if (!guiId) {\n      throw new Error(\"GUI must have a name or id\");\n    }\n    const guiInstance: GuiInstance = {\n      name: guiId,\n      component: gui.component,\n      display: signal(gui.display || false),\n      data: signal(gui.data || {}),\n      autoDisplay: gui.autoDisplay || false,\n      dependencies: gui.dependencies ? gui.dependencies() : [],\n      attachToSprite: gui.attachToSprite || false,\n    };\n\n    // Accept both CanvasEngine components (.ce) and Vue components\n    // Vue components will be handled by VueGui if available\n    if (typeof gui.component !== 'function') {\n      guiInstance.component = gui;\n      this.extraGuis.push(guiInstance);\n      \n      // Auto display Vue components if enabled\n      if (guiInstance.autoDisplay) {\n        this._notifyVueGui(guiId, true, gui.data || {});\n      }\n      return;\n    }\n\n    this.gui()[guiId] = guiInstance;\n\n    // Auto display if enabled and it's a CanvasEngine component\n    if (guiInstance.autoDisplay && typeof gui.component === 'function') {\n      this.display(guiId, gui.data);\n    }\n  }\n\n  registerOptimisticReducer(guiId: string, reducer: OptimisticReducer) {\n    const existing = this.optimisticReducers.get(guiId) || [];\n    this.optimisticReducers.set(guiId, existing.concat(reducer));\n  }\n\n  /**\n   * Get all attached GUI components (attachToSprite: true)\n   * \n   * Returns all GUI instances that are configured to be attached to sprites.\n   * These GUIs should be rendered in character.ce instead of canvas.ce.\n   * \n   * @returns Array of GUI instances with attachToSprite: true\n   * \n   * @example\n   * ```ts\n   * const attachedGuis = gui.getAttachedGuis();\n   * // Use in character.ce to render tooltips\n   * ```\n   */\n  getAttachedGuis(): GuiInstance[] {\n    const allGuis = this.getAll();\n    return Object.values(allGuis).filter(gui => gui.attachToSprite === true);\n  }\n\n  /**\n   * Check if a player should display attached GUIs\n   * \n   * @param playerId - The player ID to check\n   * @returns true if attached GUIs should be displayed for this player\n   */\n  shouldDisplayAttachedGui(playerId: string): boolean {\n    return this.attachedGuiDisplayState()[playerId] === true;\n  }\n\n  get(id: string): GuiInstance | undefined {\n    // Check CanvasEngine GUIs first\n    const canvasGui = this.gui()[id];\n    if (canvasGui) {\n      return canvasGui;\n    }\n    \n    // Check Vue GUIs in extraGuis\n    return this.extraGuis.find(gui => gui.name === id);\n  }\n\n  exists(id: string): boolean {\n    return !!this.get(id);\n  }\n\n  getAll(): Record<string, GuiInstance> {\n    const allGuis = { ...this.gui() };\n    \n    // Add extraGuis to the result\n    this.extraGuis.forEach(gui => {\n      allGuis[gui.name] = gui;\n    });\n    \n    return allGuis;\n  }\n\n  /**\n   * Display a GUI component\n   * \n   * Displays the GUI immediately if no dependencies are configured,\n   * or waits for all dependencies to be resolved if dependencies are present.\n   * Automatically manages subscriptions to prevent memory leaks.\n   * Works with both CanvasEngine components and Vue components.\n   * \n   * @param id - The GUI component ID\n   * @param data - Data to pass to the component\n   * @param dependencies - Optional runtime dependencies (overrides config dependencies)\n   * \n   * @example\n   * ```ts\n   * // Display immediately\n   * gui.display('inventory', { items: [] });\n   * \n   * // Display with runtime dependencies\n   * gui.display('shop', { shopId: 1 }, [playerSignal, shopSignal]);\n   * ```\n   */\n  display(id: string, data = {}, dependencies: Signal[] = []) {\n    if (!this.exists(id)) {\n      throw throwError(id);\n    }\n\n    const guiInstance = this.get(id)!;\n    \n    // Check if it's a Vue component (in extraGuis)\n    const isVueComponent = this.extraGuis.some(gui => gui.name === id);\n    \n    if (isVueComponent) {\n      // Handle Vue component display\n      this._handleVueComponentDisplay(id, data, dependencies, guiInstance);\n    } else {\n      guiInstance.data.set(data);\n      guiInstance.display.set(true);\n    }\n  }\n\n  isDisplaying(id: string): boolean {\n    const guiInstance = this.get(id);\n    if (!guiInstance) return false;\n    return guiInstance.display();\n  }\n\n  /**\n   * Handle Vue component display logic\n   * \n   * @param id - GUI component ID\n   * @param data - Component data\n   * @param dependencies - Runtime dependencies\n   * @param guiInstance - GUI instance\n   */\n  private _handleVueComponentDisplay(id: string, data: any, dependencies: Signal[], guiInstance: GuiInstance) {\n    // Unsubscribe from previous subscription if exists\n    if (guiInstance.subscription) {\n      guiInstance.subscription.unsubscribe();\n      guiInstance.subscription = undefined;\n    }\n\n    // Use runtime dependencies or config dependencies\n    const deps = dependencies.length > 0 \n      ? dependencies \n      : (guiInstance.dependencies ? guiInstance.dependencies() : []);\n\n    if (deps.length > 0) {\n      // Subscribe to dependencies\n      guiInstance.subscription = combineLatest(\n        deps.map(dependency => dependency.observable)\n      ).subscribe((values) => {\n        if (values.every(value => value !== undefined)) {\n          guiInstance.data.set(data);\n          guiInstance.display.set(true);\n          this._notifyVueGui(id, true, data);\n        }\n      });\n      return;\n    }\n\n    // No dependencies, display immediately\n    guiInstance.data.set(data);\n    guiInstance.display.set(true);\n    this._notifyVueGui(id, true, data);\n  }\n\n  /**\n   * Hide a GUI component\n   * \n   * Hides the GUI and cleans up any active subscriptions.\n   * Works with both CanvasEngine components and Vue components.\n   * \n   * @param id - The GUI component ID\n   * \n   * @example\n   * ```ts\n   * gui.hide('inventory');\n   * ```\n   */\n  hide(id: string) {\n    if (!this.exists(id)) {\n      throw throwError(id);\n    }\n\n    const guiInstance = this.get(id)!;\n    \n    // Unsubscribe if there's an active subscription\n    if (guiInstance.subscription) {\n      guiInstance.subscription.unsubscribe();\n      guiInstance.subscription = undefined;\n    }\n\n    guiInstance.display.set(false)\n    \n    // Check if it's a Vue component and notify VueGui\n    const isVueComponent = this.extraGuis.some(gui => gui.name === id);\n    if (isVueComponent) {\n      this._notifyVueGui(id, false);\n    }\n  }\n\n  private isVueComponent(id: string) {\n    return this.extraGuis.some(gui => gui.name === id);\n  }\n\n  private clearPendingActions(guiId: string) {\n    this.pendingActions.delete(guiId);\n  }\n\n  private applyReducers(guiId: string, data: any, actions: GuiAction[]) {\n    const reducers = this.optimisticReducers.get(guiId);\n    if (!reducers || reducers.length === 0) return data;\n    let next = data;\n    for (const action of actions) {\n      for (const reducer of reducers) {\n        const updated = reducer(next, action);\n        if (updated !== undefined && updated !== null && updated !== next) {\n          next = updated;\n        }\n      }\n    }\n    return next;\n  }\n\n  private applyOptimisticAction(action: GuiAction) {\n    const guiInstance = this.get(action.guiId);\n    if (!guiInstance) return;\n    const reducers = this.optimisticReducers.get(action.guiId);\n    if (!reducers || reducers.length === 0) return;\n    const currentData = guiInstance.data();\n    const nextData = this.applyReducers(action.guiId, currentData, [action]);\n    if (nextData === currentData) return;\n    guiInstance.data.set(nextData);\n    const pending = this.pendingActions.get(action.guiId) || [];\n    pending.push(action);\n    this.pendingActions.set(action.guiId, pending);\n    if (this.isVueComponent(action.guiId)) {\n      this._notifyVueGui(action.guiId, guiInstance.display(), nextData);\n    }\n  }\n\n  private applyServerUpdate(guiId: string, data: any, clientActionId?: string) {\n    const guiInstance = this.get(guiId);\n    if (!guiInstance) return;\n    let pending = this.pendingActions.get(guiId) || [];\n    if (clientActionId) {\n      pending = pending.filter(action => action.clientActionId !== clientActionId);\n    } else {\n      pending = [];\n    }\n    let nextData = data;\n    if (pending.length) {\n      nextData = this.applyReducers(guiId, nextData, pending);\n    }\n    guiInstance.data.set(nextData);\n    this.pendingActions.set(guiId, pending);\n    if (this.isVueComponent(guiId)) {\n      this._notifyVueGui(guiId, guiInstance.display(), nextData);\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"Gui.js","names":[],"sources":["../../src/Gui/Gui.ts"],"sourcesContent":["import { Context, inject } from \"@signe/di\";\nimport { signal, Signal, WritableSignal } from \"canvasengine\";\nimport { AbstractWebsocket, WebSocketToken } from \"../services/AbstractSocket\";\nimport { DialogboxComponent, ShopComponent, SaveLoadComponent, MainMenuComponent, NotificationComponent, TitleScreenComponent, GameoverComponent } from \"../components/gui\";\nimport { combineLatest, Subscription } from \"rxjs\";\nimport { PrebuiltGui } from \"@rpgjs/common\";\n\ninterface GuiOptions {\n  name?: string;\n  id?: string;\n  component?: any;\n  display?: boolean;\n  data?: any;\n  /**\n   * Auto display the GUI when added to the system\n   * @default false\n   */\n  autoDisplay?: boolean;\n  /**\n   * Function that returns an array of Signal dependencies\n   * The GUI will only display when all dependencies are resolved (!= undefined)\n   * @returns Array of Signal dependencies\n   */\n  dependencies?: () => Signal[];\n  /**\n   * Attach the GUI to sprites instead of displaying globally\n   * When true, the GUI will be rendered in character.ce for each sprite\n   * @default false\n   */\n  attachToSprite?: boolean;\n  /**\n   * Vue v4 compatibility flag. Prefer attachToSprite in v5 projects.\n   */\n  rpgAttachToSprite?: boolean;\n}\n\nexport interface GuiInstance {\n  name: string;\n  component: any;\n  display: WritableSignal<boolean>;\n  data: WritableSignal<any>;\n  autoDisplay: boolean;\n  dependencies?: Signal[];\n  subscription?: Subscription;\n  attachToSprite?: boolean;\n}\n\ntype GuiState = {\n  name: string;\n  component: any;\n  display: boolean;\n  data: any;\n  attachToSprite: boolean;\n};\n\ntype VueGuiBridge = {\n  updateGuiState?: (state: GuiState) => void;\n  initializeGuiStates?: (states: GuiState[]) => void;\n};\n\ninterface GuiAction {\n  guiId: string;\n  name: string;\n  data: any;\n  clientActionId: string;\n}\n\ntype OptimisticReducer = (data: any, action: GuiAction) => any;\n\nconst throwError = (id: string) => {\n  throw `The GUI named ${id} is non-existent. Please add the component in the gui property of the decorator @RpgClient`;\n};\n\nconst updateItemQuantity = (items: any[], id: string) => {\n  const index = items.findIndex((item) => item?.id === id);\n  if (index === -1) return items;\n  const item = items[index];\n  if (item?.usable === false) return items;\n  if (item?.consumable === false) return items;\n  const quantity = typeof item?.quantity === \"number\" ? item.quantity : 1;\n  const nextQuantity = Math.max(0, quantity - 1);\n  if (nextQuantity === quantity) return items;\n  if (nextQuantity <= 0) {\n    return items.filter((_, idx) => idx !== index);\n  }\n  const nextItems = items.slice();\n  nextItems[index] = { ...item, quantity: nextQuantity };\n  return nextItems;\n};\n\nconst updateEquippedFlag = (items: any[], id: string, equip: boolean) => {\n  const index = items.findIndex((item) => item?.id === id);\n  if (index === -1) return items;\n  const item = items[index];\n  if (item?.equipped === equip) return items;\n  const nextItems = items.slice();\n  nextItems[index] = { ...item, equipped: equip };\n  return nextItems;\n};\n\nconst mainMenuOptimisticReducer: OptimisticReducer = (data, action) => {\n  if (!data || typeof data !== \"object\") return data;\n  if (action.name === \"useItem\") {\n    if (!Array.isArray(data.items)) return data;\n    const id = action.data?.id;\n    if (!id) return data;\n    const nextItems = updateItemQuantity(data.items, id);\n    if (nextItems === data.items) return data;\n    return { ...data, items: nextItems };\n  }\n  if (action.name === \"equipItem\") {\n    const id = action.data?.id;\n    if (!id || typeof action.data?.equip !== \"boolean\") return data;\n    const equip = action.data.equip;\n    let nextItems = data.items;\n    let nextEquips = data.equips;\n    if (Array.isArray(data.items)) {\n      nextItems = updateEquippedFlag(data.items, id, equip);\n    }\n    if (Array.isArray(data.equips)) {\n      nextEquips = updateEquippedFlag(data.equips, id, equip);\n    }\n    if (nextItems === data.items && nextEquips === data.equips) return data;\n    return {\n      ...data,\n      ...(nextItems !== data.items ? { items: nextItems } : {}),\n      ...(nextEquips !== data.equips ? { equips: nextEquips } : {})\n    };\n  }\n  return data;\n};\n\nexport class RpgGui {\n  private webSocket: AbstractWebsocket;\n  gui = signal<Record<string, GuiInstance>>({});\n  extraGuis: GuiInstance[] = [];\n  private vueGuiInstance: VueGuiBridge | null = null;\n  private optimisticReducers = new Map<string, OptimisticReducer[]>();\n  private pendingActions = new Map<string, GuiAction[]>();\n  /**\n   * Signal tracking which player IDs should display attached GUIs\n   * Key: player ID, Value: boolean (true = show, false = hide)\n   */\n  attachedGuiDisplayState = signal<Record<string, boolean>>({});\n\n  constructor(private context: Context) {\n    this.webSocket = inject(context, WebSocketToken);\n    this.add({\n      name: \"rpg-dialog\",\n      component: DialogboxComponent,\n    });\n    this.add({\n      name: PrebuiltGui.MainMenu,\n      component: MainMenuComponent,\n    });\n    this.add({\n      name: PrebuiltGui.Shop,\n      component: ShopComponent,\n    });\n    this.add({\n      name: PrebuiltGui.Notification,\n      component: NotificationComponent,\n      autoDisplay: true,\n    });\n    this.add({\n      name: PrebuiltGui.Save,\n      component: SaveLoadComponent,\n    });\n    this.add({\n      name: PrebuiltGui.TitleScreen,\n      component: TitleScreenComponent,\n    });\n    this.add({\n      name: PrebuiltGui.Gameover,\n      component: GameoverComponent,\n    });\n\n    this.registerOptimisticReducer(PrebuiltGui.MainMenu, mainMenuOptimisticReducer);\n  }\n\n  async _initialize() {\n    this.webSocket.on(\"gui.open\", (data: { guiId: string; data: any }) => {\n      this.clearPendingActions(data.guiId);\n      this.display(data.guiId, data.data);\n    });\n\n    this.webSocket.on(\"gui.exit\", (guiId: string) => {\n      this.hide(guiId);\n    });\n\n    this.webSocket.on(\"gui.update\", (payload: { guiId: string; data: any; clientActionId?: string }) => {\n      this.applyServerUpdate(payload.guiId, payload.data, payload.clientActionId);\n    });\n\n    /**\n     * Listen for tooltip display state changes from server\n     * This is triggered by showAttachedGui/hideAttachedGui on the server\n     */\n    this.webSocket.on(\"gui.tooltip\", (data: { players: string[]; display: boolean }) => {\n      const currentState = { ...this.attachedGuiDisplayState() };\n      data.players.forEach((playerId) => {\n        currentState[playerId] = data.display;\n      });\n      this.attachedGuiDisplayState.set(currentState);\n    });\n  }\n\n  /**\n   * Set the VueGui instance reference for Vue component management\n   * This is called by VueGui when it's initialized\n   * \n   * @param vueGuiInstance - The VueGui instance\n   */\n  _setVueGuiInstance(vueGuiInstance: any) {\n    this.vueGuiInstance = vueGuiInstance;\n    this._initializeVueComponents();\n  }\n\n  /**\n   * Notify VueGui about GUI state changes\n   * This synchronizes the Vue component display state\n   * \n   * @param guiId - The GUI component ID\n   * @param display - Display state\n   * @param data - Component data\n   */\n  private _notifyVueGui(guiId: string, display: boolean, data: any = {}) {\n    const extraGui = this.extraGuis.find(gui => gui.name === guiId);\n    if (!extraGui) return;\n    this.vueGuiInstance?.updateGuiState?.(this.toGuiState(extraGui, display, data));\n  }\n\n  /**\n   * Initialize Vue components in the VueGui instance\n   * This should be called after VueGui is mounted\n   */\n  _initializeVueComponents() {\n    this.vueGuiInstance?.initializeGuiStates?.(\n      this.extraGuis.map(gui => this.toGuiState(gui))\n    );\n  }\n\n  guiInteraction(guiId: string, name: string, data: any) {\n    const clientActionId = globalThis.crypto?.randomUUID?.() || `${Date.now()}-${Math.random()}`;\n    const actionData = { ...(data || {}), clientActionId };\n    this.applyOptimisticAction({\n      guiId,\n      name,\n      data: actionData,\n      clientActionId\n    });\n    this.webSocket.emit(\"gui.interaction\", {\n      guiId,\n      name,\n      data: actionData,\n    });\n  }\n\n  guiClose(guiId: string, data?: any) {\n    this.webSocket.emit(\"gui.exit\", {\n      guiId,\n      data,\n    });\n  }\n\n  /**\n   * Add a GUI component to the system\n   * \n   * By default, only CanvasEngine components (.ce files) are accepted.\n   * Vue components should be handled by the @rpgjs/vue package.\n   * \n   * @param gui - GUI configuration options\n   * @param gui.name - Name or ID of the GUI component\n   * @param gui.id - Alternative ID if name is not provided\n   * @param gui.component - The component to render (must be a CanvasEngine component)\n   * @param gui.display - Initial display state (default: false)\n   * @param gui.data - Initial data for the component\n   * @param gui.autoDisplay - Auto display when added (default: false)\n   * @param gui.dependencies - Function returning Signal dependencies\n   * @param gui.attachToSprite - Attach GUI to sprites instead of global display (default: false)\n   * \n   * @example\n   * ```ts\n   * gui.add({\n   *   name: 'inventory',\n   *   component: InventoryComponent, // Must be a .ce component\n   *   autoDisplay: true,\n   *   dependencies: () => [playerSignal, inventorySignal]\n   * });\n   * \n   * // Attach to sprites\n   * gui.add({\n   *   name: 'tooltip',\n   *   component: TooltipComponent,\n   *   attachToSprite: true\n   * });\n   * ```\n   */\n  add(gui: GuiOptions | any) {\n    const component = this.resolveComponent(gui);\n    const guiId = this.resolveGuiId(gui, component);\n    if (!guiId) {\n      throw new Error(\"GUI must have a name or id\");\n    }\n    const attachToSprite = this.resolveAttachToSprite(gui, component);\n    const guiInstance: GuiInstance = {\n      name: guiId,\n      component,\n      display: signal<boolean>(gui.display || false),\n      data: signal<any>(gui.data || {}),\n      autoDisplay: gui.autoDisplay || false,\n      dependencies: gui.dependencies ? gui.dependencies() : [],\n      attachToSprite,\n    };\n\n    if (this.isVueComponentInstance(guiInstance)) {\n      this.removeCanvasGui(guiId);\n      const existingIndex = this.extraGuis.findIndex(existing => existing.name === guiId);\n      if (existingIndex >= 0) {\n        this.extraGuis[existingIndex].subscription?.unsubscribe();\n        this.extraGuis[existingIndex] = guiInstance;\n      } else {\n        this.extraGuis.push(guiInstance);\n      }\n\n      this._initializeVueComponents();\n      \n      if (guiInstance.autoDisplay) {\n        this.display(guiId, gui.data);\n      } else {\n        this._notifyVueGui(guiId, guiInstance.display(), guiInstance.data());\n      }\n      return;\n    }\n\n    this.removeVueGui(guiId);\n    this.gui()[guiId] = guiInstance;\n    this._initializeVueComponents();\n\n    // Auto display if enabled and it's a CanvasEngine component\n    if (guiInstance.autoDisplay && typeof gui.component === 'function') {\n      this.display(guiId, gui.data);\n    }\n  }\n\n  registerOptimisticReducer(guiId: string, reducer: OptimisticReducer) {\n    const existing = this.optimisticReducers.get(guiId) || [];\n    this.optimisticReducers.set(guiId, existing.concat(reducer));\n  }\n\n  /**\n   * Get all attached GUI components (attachToSprite: true)\n   * \n   * Returns all GUI instances that are configured to be attached to sprites.\n   * These GUIs should be rendered in character.ce instead of canvas.ce.\n   * \n   * @returns Array of GUI instances with attachToSprite: true\n   * \n   * @example\n   * ```ts\n   * const attachedGuis = gui.getAttachedGuis();\n   * // Use in character.ce to render tooltips\n   * ```\n   */\n  getAttachedGuis(): GuiInstance[] {\n    return Object.values(this.gui()).filter(gui => gui.attachToSprite === true);\n  }\n\n  getVueGuis(): GuiInstance[] {\n    return [...this.extraGuis];\n  }\n\n  getAttachedVueGuis(): GuiInstance[] {\n    return this.extraGuis.filter(gui => gui.attachToSprite === true);\n  }\n\n  /**\n   * Check if a player should display attached GUIs\n   * \n   * @param playerId - The player ID to check\n   * @returns true if attached GUIs should be displayed for this player\n   */\n  shouldDisplayAttachedGui(playerId: string): boolean {\n    return this.attachedGuiDisplayState()[playerId] === true;\n  }\n\n  get(id: string): GuiInstance | undefined {\n    // Check CanvasEngine GUIs first\n    const canvasGui = this.gui()[id];\n    if (canvasGui) {\n      return canvasGui;\n    }\n    \n    // Check Vue GUIs in extraGuis\n    return this.extraGuis.find(gui => gui.name === id);\n  }\n\n  exists(id: string): boolean {\n    return !!this.get(id);\n  }\n\n  getAll(): Record<string, GuiInstance> {\n    const allGuis = { ...this.gui() };\n    \n    // Add extraGuis to the result\n    this.extraGuis.forEach(gui => {\n      allGuis[gui.name] = gui;\n    });\n    \n    return allGuis;\n  }\n\n  /**\n   * Display a GUI component\n   * \n   * Displays the GUI immediately if no dependencies are configured,\n   * or waits for all dependencies to be resolved if dependencies are present.\n   * Automatically manages subscriptions to prevent memory leaks.\n   * Works with both CanvasEngine components and Vue components.\n   * \n   * @param id - The GUI component ID\n   * @param data - Data to pass to the component\n   * @param dependencies - Optional runtime dependencies (overrides config dependencies)\n   * \n   * @example\n   * ```ts\n   * // Display immediately\n   * gui.display('inventory', { items: [] });\n   * \n   * // Display with runtime dependencies\n   * gui.display('shop', { shopId: 1 }, [playerSignal, shopSignal]);\n   * ```\n   */\n  display(id: string, data = {}, dependencies: Signal[] = []) {\n    if (!this.exists(id)) {\n      throw throwError(id);\n    }\n\n    const guiInstance = this.get(id)!;\n    \n    // Check if it's a Vue component (in extraGuis)\n    const isVueComponent = this.extraGuis.some(gui => gui.name === id);\n    \n    if (isVueComponent) {\n      // Handle Vue component display\n      this._handleVueComponentDisplay(id, data, dependencies, guiInstance);\n    } else {\n      guiInstance.data.set(data);\n      guiInstance.display.set(true);\n    }\n  }\n\n  isDisplaying(id: string): boolean {\n    const guiInstance = this.get(id);\n    if (!guiInstance) return false;\n    return guiInstance.display();\n  }\n\n  /**\n   * Handle Vue component display logic\n   * \n   * @param id - GUI component ID\n   * @param data - Component data\n   * @param dependencies - Runtime dependencies\n   * @param guiInstance - GUI instance\n   */\n  private _handleVueComponentDisplay(id: string, data: any, dependencies: Signal[], guiInstance: GuiInstance) {\n    // Unsubscribe from previous subscription if exists\n    if (guiInstance.subscription) {\n      guiInstance.subscription.unsubscribe();\n      guiInstance.subscription = undefined;\n    }\n\n    // Use runtime dependencies or config dependencies\n    const deps = dependencies.length > 0 \n      ? dependencies \n      : (guiInstance.dependencies ?? []);\n\n    if (deps.length > 0) {\n      // Subscribe to dependencies\n      guiInstance.subscription = combineLatest(\n        deps.map(dependency => dependency.observable)\n      ).subscribe((values) => {\n        if (values.every(value => value !== undefined)) {\n          guiInstance.data.set(data);\n          guiInstance.display.set(true);\n          this._notifyVueGui(id, true, data);\n        }\n      });\n      return;\n    }\n\n    // No dependencies, display immediately\n    guiInstance.data.set(data);\n    guiInstance.display.set(true);\n    this._notifyVueGui(id, true, data);\n  }\n\n  /**\n   * Hide a GUI component\n   * \n   * Hides the GUI and cleans up any active subscriptions.\n   * Works with both CanvasEngine components and Vue components.\n   * \n   * @param id - The GUI component ID\n   * \n   * @example\n   * ```ts\n   * gui.hide('inventory');\n   * ```\n   */\n  hide(id: string) {\n    if (!this.exists(id)) {\n      throw throwError(id);\n    }\n\n    const guiInstance = this.get(id)!;\n    \n    // Unsubscribe if there's an active subscription\n    if (guiInstance.subscription) {\n      guiInstance.subscription.unsubscribe();\n      guiInstance.subscription = undefined;\n    }\n\n    guiInstance.display.set(false)\n    \n    // Check if it's a Vue component and notify VueGui\n    const isVueComponent = this.extraGuis.some(gui => gui.name === id);\n    if (isVueComponent) {\n      this._notifyVueGui(id, false);\n    }\n  }\n\n  private isVueComponent(id: string) {\n    return this.extraGuis.some(gui => gui.name === id);\n  }\n\n  private isVueComponentInstance(gui: GuiInstance) {\n    return typeof gui.component !== \"function\";\n  }\n\n  private removeCanvasGui(guiId: string) {\n    const current = this.gui();\n    if (!(guiId in current)) return;\n    const next = { ...current };\n    delete next[guiId];\n    this.gui.set(next);\n  }\n\n  private removeVueGui(guiId: string) {\n    const removed = this.extraGuis.filter(existing => existing.name === guiId);\n    removed.forEach(gui => gui.subscription?.unsubscribe());\n    if (removed.length > 0) {\n      this.extraGuis = this.extraGuis.filter(existing => existing.name !== guiId);\n    }\n  }\n\n  private resolveComponent(gui: GuiOptions | any) {\n    return gui?.component ?? gui;\n  }\n\n  private resolveGuiId(gui: GuiOptions | any, component: any) {\n    return gui?.name || gui?.id || component?.name || component?.__name;\n  }\n\n  private resolveAttachToSprite(gui: GuiOptions | any, component: any) {\n    return !!(gui?.attachToSprite || gui?.rpgAttachToSprite || component?.attachToSprite || component?.rpgAttachToSprite);\n  }\n\n  private toGuiState(gui: GuiInstance, display = gui.display(), data = gui.data()): GuiState {\n    return {\n      name: gui.name,\n      component: gui.component,\n      display,\n      data,\n      attachToSprite: gui.attachToSprite || false,\n    };\n  }\n\n  private clearPendingActions(guiId: string) {\n    this.pendingActions.delete(guiId);\n  }\n\n  private applyReducers(guiId: string, data: any, actions: GuiAction[]) {\n    const reducers = this.optimisticReducers.get(guiId);\n    if (!reducers || reducers.length === 0) return data;\n    let next = data;\n    for (const action of actions) {\n      for (const reducer of reducers) {\n        const updated = reducer(next, action);\n        if (updated !== undefined && updated !== null && updated !== next) {\n          next = updated;\n        }\n      }\n    }\n    return next;\n  }\n\n  private applyOptimisticAction(action: GuiAction) {\n    const guiInstance = this.get(action.guiId);\n    if (!guiInstance) return;\n    const reducers = this.optimisticReducers.get(action.guiId);\n    if (!reducers || reducers.length === 0) return;\n    const currentData = guiInstance.data();\n    const nextData = this.applyReducers(action.guiId, currentData, [action]);\n    if (nextData === currentData) return;\n    guiInstance.data.set(nextData);\n    const pending = this.pendingActions.get(action.guiId) || [];\n    pending.push(action);\n    this.pendingActions.set(action.guiId, pending);\n    if (this.isVueComponent(action.guiId)) {\n      this._notifyVueGui(action.guiId, guiInstance.display(), nextData);\n    }\n  }\n\n  private applyServerUpdate(guiId: string, data: any, clientActionId?: string) {\n    const guiInstance = this.get(guiId);\n    if (!guiInstance) return;\n    let pending = this.pendingActions.get(guiId) || [];\n    if (clientActionId) {\n      pending = pending.filter(action => action.clientActionId !== clientActionId);\n    } else {\n      pending = [];\n    }\n    let nextData = data;\n    if (pending.length) {\n      nextData = this.applyReducers(guiId, nextData, pending);\n    }\n    guiInstance.data.set(nextData);\n    this.pendingActions.set(guiId, pending);\n    if (this.isVueComponent(guiId)) {\n      this._notifyVueGui(guiId, guiInstance.display(), nextData);\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/Gui/Gui.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Gui/NotificationManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationManager.js","names":[],"sources":["../../src/Gui/NotificationManager.ts"],"sourcesContent":["import { signal, animatedSignal } from \"canvasengine\";\n\nexport type NotificationType = \"info\" | \"warn\" | \"error\";\n\nexport interface NotificationPayload {\n  message: string;\n  type?: NotificationType;\n  icon?: string;\n  time?: number;\n  sound?: string;\n}\n\nexport interface NotificationItem extends NotificationPayload {\n  id: number;\n  opacity: any;\n  offset: any;\n  layoutY: any;\n  removing: boolean;\n}\n\nconst DEFAULT_DURATION = 220;\n\nexport class NotificationManager {\n  stack = signal<NotificationItem[]>([]);\n  private _counter = 0;\n\n  add(payload: NotificationPayload, engine?: { playSound?: (id: string) => void }) {\n    const id = ++this._counter;\n    const opacity = animatedSignal(0, { duration: DEFAULT_DURATION });\n    const offset = animatedSignal(12, { duration: DEFAULT_DURATION });\n    const layoutY = animatedSignal(0, { duration: DEFAULT_DURATION });\n    const item: NotificationItem = {\n      id,\n      message: payload.message,\n      type: payload.type || \"info\",\n      icon: payload.icon,\n      time: payload.time,\n      sound: payload.sound,\n      opacity,\n      offset,\n      layoutY,\n      removing: false,\n    };\n    this.stack.update((list) => [...list, item]);\n    opacity.set(1);\n    offset.set(0);\n\n    if (payload.sound && engine?.playSound) {\n      engine.playSound(payload.sound);\n    }\n\n    const delay = typeof payload.time === \"number\" ? payload.time : 2000;\n    setTimeout(() => {\n      this.remove(id);\n    }, delay);\n  }\n\n  remove(id: number) {\n    const list = this.stack();\n    const item = list.find((it) => it.id === id);\n    if (!item || item.removing) return;\n    item.removing = true;\n    item.opacity.set(0);\n    item.offset.set(-8);\n    setTimeout(() => {\n      this.stack.update((items) => items.filter((it) => it.id !== id));\n    }, DEFAULT_DURATION);\n  }\n}\n"],"mappings":";;AAoBA,IAAM,mBAAmB;AAEzB,IAAa,sBAAb,MAAiC;;eACvB,OAA2B,EAAE,CAAC;kBACnB;;CAEnB,IAAI,SAA8B,QAA+C;EAC/E,MAAM,KAAK,EAAE,KAAK;EAClB,MAAM,UAAU,eAAe,GAAG,EAAE,UAAU,kBAAkB,CAAC;EACjE,MAAM,SAAS,eAAe,IAAI,EAAE,UAAU,kBAAkB,CAAC;EACjE,MAAM,UAAU,eAAe,GAAG,EAAE,UAAU,kBAAkB,CAAC;EACjE,MAAM,OAAyB;GAC7B;GACA,SAAS,QAAQ;GACjB,MAAM,QAAQ,QAAQ;GACtB,MAAM,QAAQ;GACd,MAAM,QAAQ;GACd,OAAO,QAAQ;GACf;GACA;GACA;GACA,UAAU;GACX;AACD,OAAK,MAAM,QAAQ,SAAS,CAAC,GAAG,MAAM,KAAK,CAAC;AAC5C,UAAQ,IAAI,EAAE;AACd,SAAO,IAAI,EAAE;AAEb,MAAI,QAAQ,SAAS,QAAQ,UAC3B,QAAO,UAAU,QAAQ,MAAM;EAGjC,MAAM,QAAQ,OAAO,QAAQ,SAAS,WAAW,QAAQ,OAAO;AAChE,mBAAiB;AACf,QAAK,OAAO,GAAG;KACd,MAAM;;CAGX,OAAO,IAAY;EAEjB,MAAM,OADO,KAAK,OAAO,CACP,MAAM,OAAO,GAAG,OAAO,GAAG;AAC5C,MAAI,CAAC,QAAQ,KAAK,SAAU;AAC5B,OAAK,WAAW;AAChB,OAAK,QAAQ,IAAI,EAAE;AACnB,OAAK,OAAO,IAAI,GAAG;AACnB,mBAAiB;AACf,QAAK,MAAM,QAAQ,UAAU,MAAM,QAAQ,OAAO,GAAG,OAAO,GAAG,CAAC;KAC/D,iBAAiB"}
+{"version":3,"file":"NotificationManager.js","names":[],"sources":["../../src/Gui/NotificationManager.ts"],"sourcesContent":["import { signal, animatedSignal } from \"canvasengine\";\n\nexport type NotificationType = \"info\" | \"warn\" | \"error\";\n\nexport interface NotificationPayload {\n  message: string;\n  type?: NotificationType;\n  icon?: string;\n  time?: number;\n  sound?: string;\n}\n\nexport interface NotificationItem extends NotificationPayload {\n  id: number;\n  opacity: any;\n  offset: any;\n  layoutY: any;\n  removing: boolean;\n}\n\nconst DEFAULT_DURATION = 220;\n\nexport class NotificationManager {\n  stack = signal<NotificationItem[]>([]);\n  private _counter = 0;\n\n  add(payload: NotificationPayload, engine?: { playSound?: (id: string) => void }) {\n    const id = ++this._counter;\n    const opacity = animatedSignal(0, { duration: DEFAULT_DURATION });\n    const offset = animatedSignal(12, { duration: DEFAULT_DURATION });\n    const layoutY = animatedSignal(0, { duration: DEFAULT_DURATION });\n    const item: NotificationItem = {\n      id,\n      message: payload.message,\n      type: payload.type || \"info\",\n      icon: payload.icon,\n      time: payload.time,\n      sound: payload.sound,\n      opacity,\n      offset,\n      layoutY,\n      removing: false,\n    };\n    this.stack.update((list) => [...list, item]);\n    opacity.set(1);\n    offset.set(0);\n\n    if (payload.sound && engine?.playSound) {\n      engine.playSound(payload.sound);\n    }\n\n    const delay = typeof payload.time === \"number\" ? payload.time : 2000;\n    setTimeout(() => {\n      this.remove(id);\n    }, delay);\n  }\n\n  remove(id: number) {\n    const list = this.stack();\n    const item = list.find((it) => it.id === id);\n    if (!item || item.removing) return;\n    item.removing = true;\n    item.opacity.set(0);\n    item.offset.set(-8);\n    setTimeout(() => {\n      this.stack.update((items) => items.filter((it) => it.id !== id));\n    }, DEFAULT_DURATION);\n  }\n}\n"],"mappings":";;AAoBA,IAAM,mBAAmB;AAEzB,IAAa,sBAAb,MAAiC;;eACvB,OAA2B,CAAC,CAAC;kBAClB;;CAEnB,IAAI,SAA8B,QAA+C;EAC/E,MAAM,KAAK,EAAE,KAAK;EAClB,MAAM,UAAU,eAAe,GAAG,EAAE,UAAU,iBAAiB,CAAC;EAChE,MAAM,SAAS,eAAe,IAAI,EAAE,UAAU,iBAAiB,CAAC;EAChE,MAAM,UAAU,eAAe,GAAG,EAAE,UAAU,iBAAiB,CAAC;EAChE,MAAM,OAAyB;GAC7B;GACA,SAAS,QAAQ;GACjB,MAAM,QAAQ,QAAQ;GACtB,MAAM,QAAQ;GACd,MAAM,QAAQ;GACd,OAAO,QAAQ;GACf;GACA;GACA;GACA,UAAU;EACZ;EACA,KAAK,MAAM,QAAQ,SAAS,CAAC,GAAG,MAAM,IAAI,CAAC;EAC3C,QAAQ,IAAI,CAAC;EACb,OAAO,IAAI,CAAC;EAEZ,IAAI,QAAQ,SAAS,QAAQ,WAC3B,OAAO,UAAU,QAAQ,KAAK;EAGhC,MAAM,QAAQ,OAAO,QAAQ,SAAS,WAAW,QAAQ,OAAO;EAChE,iBAAiB;GACf,KAAK,OAAO,EAAE;EAChB,GAAG,KAAK;CACV;CAEA,OAAO,IAAY;EAEjB,MAAM,OADO,KAAK,MACL,EAAK,MAAM,OAAO,GAAG,OAAO,EAAE;EAC3C,IAAI,CAAC,QAAQ,KAAK,UAAU;EAC5B,KAAK,WAAW;EAChB,KAAK,QAAQ,IAAI,CAAC;EAClB,KAAK,OAAO,IAAI,EAAE;EAClB,iBAAiB;GACf,KAAK,MAAM,QAAQ,UAAU,MAAM,QAAQ,OAAO,GAAG,OAAO,EAAE,CAAC;EACjE,GAAG,gBAAgB;CACrB;AACF"}

package/dist/Resource.js

@@ -61,7 +61,7 @@ var RpgResource = class RpgResource {
 		RpgResource._spritesheets.clear();
 		RpgResource.engine.spritesheets.forEach((spritesheet, id) => {
 			const imageLink = spritesheet?.image || spritesheet?.imageSource || void 0;
-			if (imageLink) RpgResource._spritesheets.set(id, imageLink);
+			if (imageLink) RpgResource._spritesheets.set(String(id), imageLink);
 		});
 		RpgResource._sounds.clear();
 		RpgResource.engine.sounds.forEach((sound, id) => {

package/dist/Resource.js.map

@@ -1 +1 @@
-{"version":3,"file":"Resource.js","names":[],"sources":["../src/Resource.ts"],"sourcesContent":["import { RpgClientEngine } from './RpgClientEngine';\n\n/**\n * RpgResource class\n * \n * Provides a unified API to access resource file links (images and sounds) in the game.\n * Resources are stored as Maps of resource IDs to file paths/URLs.\n * \n * ## Design\n * \n * RpgResource acts as a facade over the engine's resource storage, providing\n * easy access to resource file links. It maintains Maps that are synchronized\n * with the engine's internal storage, but only stores the file paths/URLs,\n * not the full resource objects.\n * \n * @example\n * ```ts\n * import { RpgResource } from '@rpgjs/client'\n * \n * // Get spritesheet image link\n * const imageLink = RpgResource.spritesheets.get('hero')\n * \n * // Get sound file link\n * const soundLink = RpgResource.sounds.get('town-music')\n * \n * // Set a new resource link\n * RpgResource.spritesheets.set('new-sprite', './assets/new-sprite.png')\n * ```\n */\nexport class RpgResource {\n  private static engine: RpgClientEngine | null = null;\n  private static _spritesheets: Map<string, string> = new Map();\n  private static _sounds: Map<string, string> = new Map();\n\n  /**\n   * Initialize RpgResource with the engine instance\n   * \n   * This is called automatically by the engine during initialization.\n   * It synchronizes the resource Maps with the engine's internal storage.\n   * \n   * @param engine - The RpgClientEngine instance\n   */\n  static init(engine: RpgClientEngine): void {\n    RpgResource.engine = engine;\n    RpgResource.syncResources();\n  }\n\n  /**\n   * Synchronize resource Maps with the engine's internal storage\n   * \n   * Extracts file links from spritesheets and sounds stored in the engine\n   * and updates the Maps accordingly.\n   * \n   * @private\n   */\n  private static syncResources(): void {\n    if (!RpgResource.engine) {\n      return;\n    }\n\n    // Sync spritesheets\n    RpgResource._spritesheets.clear();\n    RpgResource.engine.spritesheets.forEach((spritesheet, id) => {\n      // Extract image path from spritesheet\n      const imageLink = spritesheet?.image || spritesheet?.imageSource || undefined;\n      if (imageLink) {\n        RpgResource._spritesheets.set(id, imageLink);\n      }\n    });\n\n    // Sync sounds\n    RpgResource._sounds.clear();\n    RpgResource.engine.sounds.forEach((sound, id) => {\n      // Extract src path from sound\n      let soundLink: string | undefined;\n      \n      // If it's a Howler instance, try to get src from _src or src property\n      if (sound && typeof sound === 'object') {\n        if (sound._src && Array.isArray(sound._src) && sound._src.length > 0) {\n          soundLink = sound._src[0];\n        } else if (sound.src && typeof sound.src === 'string') {\n          soundLink = sound.src;\n        } else if (sound.src && Array.isArray(sound.src) && sound.src.length > 0) {\n          soundLink = sound.src[0];\n        }\n      }\n      \n      if (soundLink) {\n        RpgResource._sounds.set(id, soundLink);\n      }\n    });\n  }\n\n  /**\n   * Get/Set image links for spritesheets\n   * \n   * Map of spritesheet IDs to their image file paths/URLs.\n   * This Map is synchronized with the engine's spritesheet storage.\n   * \n   * @type {Map<string, string>}\n   * \n   * @example\n   * ```ts\n   * // Get an image link\n   * const imageLink = RpgResource.spritesheets.get('hero')\n   * \n   * // Set a new image link\n   * RpgResource.spritesheets.set('new-sprite', './assets/new-sprite.png')\n   * \n   * // Check if a spritesheet exists\n   * if (RpgResource.spritesheets.has('monster')) {\n   *   const link = RpgResource.spritesheets.get('monster')\n   * }\n   * ```\n   */\n  static get spritesheets(): Map<string, string> {\n    // Sync before returning to ensure we have the latest data\n    RpgResource.syncResources();\n    return RpgResource._spritesheets;\n  }\n\n  /**\n   * Get/Set sound file links\n   * \n   * Map of sound IDs to their audio file paths/URLs.\n   * This Map is synchronized with the engine's sound storage.\n   * \n   * @type {Map<string, string>}\n   * \n   * @example\n   * ```ts\n   * // Get a sound link\n   * const soundLink = RpgResource.sounds.get('town-music')\n   * \n   * // Set a new sound link\n   * RpgResource.sounds.set('new-sound', './assets/new-sound.ogg')\n   * \n   * // Iterate over all sounds\n   * RpgResource.sounds.forEach((link, id) => {\n   *   console.log(`Sound ${id}: ${link}`)\n   * })\n   * ```\n   */\n  static get sounds(): Map<string, string> {\n    // Sync before returning to ensure we have the latest data\n    RpgResource.syncResources();\n    return RpgResource._sounds;\n  }\n}\n\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,IAAa,cAAb,MAAa,YAAY;;gBACyB;;;uCACI,IAAI,KAAK;;;iCACf,IAAI,KAAK;;;;;;;;;;CAUvD,OAAO,KAAK,QAA+B;AACzC,cAAY,SAAS;AACrB,cAAY,eAAe;;;;;;;;;;CAW7B,OAAe,gBAAsB;AACnC,MAAI,CAAC,YAAY,OACf;AAIF,cAAY,cAAc,OAAO;AACjC,cAAY,OAAO,aAAa,SAAS,aAAa,OAAO;GAE3D,MAAM,YAAY,aAAa,SAAS,aAAa,eAAe,KAAA;AACpE,OAAI,UACF,aAAY,cAAc,IAAI,IAAI,UAAU;IAE9C;AAGF,cAAY,QAAQ,OAAO;AAC3B,cAAY,OAAO,OAAO,SAAS,OAAO,OAAO;GAE/C,IAAI;AAGJ,OAAI,SAAS,OAAO,UAAU;QACxB,MAAM,QAAQ,MAAM,QAAQ,MAAM,KAAK,IAAI,MAAM,KAAK,SAAS,EACjE,aAAY,MAAM,KAAK;aACd,MAAM,OAAO,OAAO,MAAM,QAAQ,SAC3C,aAAY,MAAM;aACT,MAAM,OAAO,MAAM,QAAQ,MAAM,IAAI,IAAI,MAAM,IAAI,SAAS,EACrE,aAAY,MAAM,IAAI;;AAI1B,OAAI,UACF,aAAY,QAAQ,IAAI,IAAI,UAAU;IAExC;;;;;;;;;;;;;;;;;;;;;;;;CAyBJ,WAAW,eAAoC;AAE7C,cAAY,eAAe;AAC3B,SAAO,YAAY;;;;;;;;;;;;;;;;;;;;;;;;CAyBrB,WAAW,SAA8B;AAEvC,cAAY,eAAe;AAC3B,SAAO,YAAY"}
+{"version":3,"file":"Resource.js","names":[],"sources":["../src/Resource.ts"],"sourcesContent":["import { RpgClientEngine } from './RpgClientEngine';\n\n/**\n * RpgResource class\n * \n * Provides a unified API to access resource file links (images and sounds) in the game.\n * Resources are stored as Maps of resource IDs to file paths/URLs.\n * \n * ## Design\n * \n * RpgResource acts as a facade over the engine's resource storage, providing\n * easy access to resource file links. It maintains Maps that are synchronized\n * with the engine's internal storage, but only stores the file paths/URLs,\n * not the full resource objects.\n * \n * @example\n * ```ts\n * import { RpgResource } from '@rpgjs/client'\n * \n * // Get spritesheet image link\n * const imageLink = RpgResource.spritesheets.get('hero')\n * \n * // Get sound file link\n * const soundLink = RpgResource.sounds.get('town-music')\n * \n * // Set a new resource link\n * RpgResource.spritesheets.set('new-sprite', './assets/new-sprite.png')\n * ```\n */\nexport class RpgResource {\n  private static engine: RpgClientEngine | null = null;\n  private static _spritesheets: Map<string, string> = new Map();\n  private static _sounds: Map<string, string> = new Map();\n\n  /**\n   * Initialize RpgResource with the engine instance\n   * \n   * This is called automatically by the engine during initialization.\n   * It synchronizes the resource Maps with the engine's internal storage.\n   * \n   * @param engine - The RpgClientEngine instance\n   */\n  static init(engine: RpgClientEngine): void {\n    RpgResource.engine = engine;\n    RpgResource.syncResources();\n  }\n\n  /**\n   * Synchronize resource Maps with the engine's internal storage\n   * \n   * Extracts file links from spritesheets and sounds stored in the engine\n   * and updates the Maps accordingly.\n   * \n   * @private\n   */\n  private static syncResources(): void {\n    if (!RpgResource.engine) {\n      return;\n    }\n\n    // Sync spritesheets\n    RpgResource._spritesheets.clear();\n    RpgResource.engine.spritesheets.forEach((spritesheet, id) => {\n      // Extract image path from spritesheet\n      const imageLink = spritesheet?.image || spritesheet?.imageSource || undefined;\n      if (imageLink) {\n        RpgResource._spritesheets.set(String(id), imageLink);\n      }\n    });\n\n    // Sync sounds\n    RpgResource._sounds.clear();\n    RpgResource.engine.sounds.forEach((sound, id) => {\n      // Extract src path from sound\n      let soundLink: string | undefined;\n      \n      // If it's a Howler instance, try to get src from _src or src property\n      if (sound && typeof sound === 'object') {\n        if (sound._src && Array.isArray(sound._src) && sound._src.length > 0) {\n          soundLink = sound._src[0];\n        } else if (sound.src && typeof sound.src === 'string') {\n          soundLink = sound.src;\n        } else if (sound.src && Array.isArray(sound.src) && sound.src.length > 0) {\n          soundLink = sound.src[0];\n        }\n      }\n      \n      if (soundLink) {\n        RpgResource._sounds.set(id, soundLink);\n      }\n    });\n  }\n\n  /**\n   * Get/Set image links for spritesheets\n   * \n   * Map of spritesheet IDs to their image file paths/URLs.\n   * This Map is synchronized with the engine's spritesheet storage.\n   * \n   * @type {Map<string, string>}\n   * \n   * @example\n   * ```ts\n   * // Get an image link\n   * const imageLink = RpgResource.spritesheets.get('hero')\n   * \n   * // Set a new image link\n   * RpgResource.spritesheets.set('new-sprite', './assets/new-sprite.png')\n   * \n   * // Check if a spritesheet exists\n   * if (RpgResource.spritesheets.has('monster')) {\n   *   const link = RpgResource.spritesheets.get('monster')\n   * }\n   * ```\n   */\n  static get spritesheets(): Map<string, string> {\n    // Sync before returning to ensure we have the latest data\n    RpgResource.syncResources();\n    return RpgResource._spritesheets;\n  }\n\n  /**\n   * Get/Set sound file links\n   * \n   * Map of sound IDs to their audio file paths/URLs.\n   * This Map is synchronized with the engine's sound storage.\n   * \n   * @type {Map<string, string>}\n   * \n   * @example\n   * ```ts\n   * // Get a sound link\n   * const soundLink = RpgResource.sounds.get('town-music')\n   * \n   * // Set a new sound link\n   * RpgResource.sounds.set('new-sound', './assets/new-sound.ogg')\n   * \n   * // Iterate over all sounds\n   * RpgResource.sounds.forEach((link, id) => {\n   *   console.log(`Sound ${id}: ${link}`)\n   * })\n   * ```\n   */\n  static get sounds(): Map<string, string> {\n    // Sync before returning to ensure we have the latest data\n    RpgResource.syncResources();\n    return RpgResource._sounds;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,IAAa,cAAb,MAAa,YAAY;;gBACyB;;;uCACI,IAAI,IAAI;;;iCACd,IAAI,IAAI;;;;;;;;;;CAUtD,OAAO,KAAK,QAA+B;EACzC,YAAY,SAAS;EACrB,YAAY,cAAc;CAC5B;;;;;;;;;CAUA,OAAe,gBAAsB;EACnC,IAAI,CAAC,YAAY,QACf;EAIF,YAAY,cAAc,MAAM;EAChC,YAAY,OAAO,aAAa,SAAS,aAAa,OAAO;GAE3D,MAAM,YAAY,aAAa,SAAS,aAAa,eAAe,KAAA;GACpE,IAAI,WACF,YAAY,cAAc,IAAI,OAAO,EAAE,GAAG,SAAS;EAEvD,CAAC;EAGD,YAAY,QAAQ,MAAM;EAC1B,YAAY,OAAO,OAAO,SAAS,OAAO,OAAO;GAE/C,IAAI;GAGJ,IAAI,SAAS,OAAO,UAAU;QACxB,MAAM,QAAQ,MAAM,QAAQ,MAAM,IAAI,KAAK,MAAM,KAAK,SAAS,GACjE,YAAY,MAAM,KAAK;SAClB,IAAI,MAAM,OAAO,OAAO,MAAM,QAAQ,UAC3C,YAAY,MAAM;SACb,IAAI,MAAM,OAAO,MAAM,QAAQ,MAAM,GAAG,KAAK,MAAM,IAAI,SAAS,GACrE,YAAY,MAAM,IAAI;GAAA;GAI1B,IAAI,WACF,YAAY,QAAQ,IAAI,IAAI,SAAS;EAEzC,CAAC;CACH;;;;;;;;;;;;;;;;;;;;;;;CAwBA,WAAW,eAAoC;EAE7C,YAAY,cAAc;EAC1B,OAAO,YAAY;CACrB;;;;;;;;;;;;;;;;;;;;;;;CAwBA,WAAW,SAA8B;EAEvC,YAAY,cAAc;EAC1B,OAAO,YAAY;CACrB;AACF"}

package/dist/RpgClient.d.ts

@@ -2,9 +2,27 @@ import { ComponentFunction, Signal } from 'canvasengine';
 import { RpgClientEngine } from './RpgClientEngine';
 import { Loader, Container } from 'pixi.js';
 import { RpgClientObject } from './Game/Object';
-import { MapPhysicsEntityContext, MapPhysicsInitContext } from '@rpgjs/common';
+import { MapPhysicsEntityContext, MapPhysicsInitContext, RpgActionName } from '@rpgjs/common';
+import { ClientProjectileSpawn, RenderedProjectileProps } from './Game/ProjectileManager';
 type RpgComponent = RpgClientObject;
 type SceneMap = Container;
+export type SpriteComponentConfig = ComponentFunction | {
+    component: ComponentFunction;
+    props?: Record<string, any> | ((object: RpgClientObject) => Record<string, any>);
+    data?: Record<string, any> | ((object: RpgClientObject) => Record<string, any>);
+    dependencies?: (object: RpgClientObject) => any[];
+};
+export interface RpgSpriteBeforeRemoveContext {
+    reason?: string;
+    data?: any;
+    transition?: {
+        animation?: string;
+        graphic?: string | string[];
+        duration?: number;
+        effect?: string;
+    };
+    timeoutMs?: number;
+}
 export interface RpgClientEngineHooks {
     /**
      * When the engine is started. If you send false, you prevent the client from connecting to the server
@@ -23,15 +41,18 @@ export interface RpgClientEngineHooks {
     /**
      * Recover keys from the pressed keyboard
      *
-     * @prop { (engine: RpgClientEngine, obj: { input: string, playerId: number }) => any } [onInput]
+     * @prop { (engine: RpgClientEngine, obj: { input: string | number, action?: string | number, data?: any, playerId: number }) => any } [onInput]
      * @memberof RpgEngineHooks
      */
     onInput?: (engine: RpgClientEngine, obj: {
-        input: string;
+        input: RpgActionName;
+        action?: RpgActionName;
+        data?: any;
         playerId: number;
     }) => any;
     /**
-     * Called when the user is connected to the server
+     * Called when the user is connected to the server. In MMORPG mode, this
+     * runs after the server sends the RPGJS connection acceptance packet.
      *
      * @prop { (engine: RpgClientEngine, socket: any) => any } [onConnected]
      * @memberof RpgEngineHooks
@@ -45,7 +66,8 @@ export interface RpgClientEngineHooks {
      */
     onDisconnect?: (engine: RpgClientEngine, reason: any, socket: any) => any;
     /**
-     * Called when there was a connection error
+     * Called when there was a connection error. In MMORPG mode, this also runs
+     * when server-side auth refuses the connection.
      *
      * @prop { (engine: RpgClientEngine, err: any, socket: any) => any } [onConnectError]
      * @memberof RpgEngineHooks
@@ -74,7 +96,7 @@ export interface RpgSpriteHooks {
      * }
      * ```
      */
-    componentsBehind?: ComponentFunction[];
+    componentsBehind?: SpriteComponentConfig[];
     /**
      * Array of components to render in front of the sprite
      * These components will be displayed with a higher z-index than the sprite itself
@@ -88,7 +110,27 @@ export interface RpgSpriteHooks {
      * }
      * ```
      */
-    componentsInFront?: ComponentFunction[];
+    componentsInFront?: SpriteComponentConfig[];
+    /**
+     * Reusable sprite components addressable by server-side component definitions.
+     *
+     * The server sends only the component id and serializable props. The client
+     * registry maps that id to the CanvasEngine component that renders it.
+     *
+     * @prop {Record<string, ComponentFunction>} [components]
+     * @memberof RpgSpriteHooks
+     * @example
+     * ```ts
+     * import GuildBadge from './components/guild-badge.ce'
+     *
+     * const sprite: RpgSpriteHooks = {
+     *   components: {
+     *     guildBadge: GuildBadge
+     *   }
+     * }
+     * ```
+     */
+    components?: Record<string, ComponentFunction>;
     /**
      * As soon as the sprite is initialized
      *
@@ -103,6 +145,17 @@ export interface RpgSpriteHooks {
      * @memberof RpgSpriteHooks
      */
     onDestroy?: (sprite: RpgComponent) => any;
+    /**
+     * Called when a sprite removal is requested, before it disappears from the scene.
+     *
+     * Return a promise to keep the sprite visible while an animation, effect, or
+     * sound transition is running. The server still owns gameplay removal and
+     * uses the timeout carried by the remove request as a safety limit.
+     *
+     * @prop { (sprite: RpgSprite, context: RpgSpriteBeforeRemoveContext) => any } [onBeforeRemove]
+     * @memberof RpgSpriteHooks
+     */
+    onBeforeRemove?: (sprite: RpgComponent, context: RpgSpriteBeforeRemoveContext) => any;
     /**
      * As soon as a data is changed on the server side (the name for example), you are able to know the new data but also the old data.
      *
@@ -174,6 +227,13 @@ export interface RpgSceneHooks<Scene> {
     onDraw?: (scene: Scene, t: number) => any;
 }
 export interface RpgSceneMapHooks extends RpgSceneHooks<SceneMap> {
+    /**
+     * Root CanvasEngine component used to render the RPG scene map.
+     *
+     * Use the exported `SceneMap` component inside your custom component to
+     * keep the default map rendering and compose additional scene children.
+     */
+    component?: ComponentFunction;
     /**
      * The map and resources are being loaded
      *
@@ -213,6 +273,24 @@ export interface RpgSceneMapHooks extends RpgSceneHooks<SceneMap> {
      */
     onPhysicsReset?: (scene: SceneMap) => any;
 }
+export interface RpgProjectileHooks {
+    /**
+     * CanvasEngine components used to render server-authoritative projectiles.
+     */
+    components?: Record<string, ComponentFunction>;
+    /**
+     * Called when a projectile spawn batch is received from the server.
+     */
+    onSpawn?: (projectile: ClientProjectileSpawn) => any;
+    /**
+     * Called when the server confirms a projectile impact.
+     */
+    onImpact?: (projectile: RenderedProjectileProps | null) => any;
+    /**
+     * Called when the server destroys a projectile.
+     */
+    onDestroy?: (projectile: RenderedProjectileProps | null) => any;
+}
 export interface RpgClient {
     /**
      * Add hooks to the player or engine. All modules can listen to the hook
@@ -457,6 +535,13 @@ export interface RpgClient {
          * ```
          */
         attachToSprite?: boolean;
+        /**
+         * Vue v4 compatibility alias for `attachToSprite`.
+         *
+         * Prefer `attachToSprite` in v5 projects. This is read by `@rpgjs/vue`
+         * for Vue GUI components migrated from the v4 GUI API.
+         */
+        rpgAttachToSprite?: boolean;
     } | any)[];
     /**
      * Array containing the list of sounds
@@ -533,30 +618,33 @@ export interface RpgClient {
      * */
     sprite?: RpgSpriteHooks;
     /**
-     * Reference the scenes of the game. Here you can put your own class that inherits RpgSceneMap
+     * Reference the scenes of the game.
      *
      * ```ts
      * import { RpgSceneMapHooks, RpgClient, defineModule } from '@rpgjs/client'
+     * import MyScene from './my-scene.ce'
      *
      * export const sceneMap: RpgSceneMapHooks = {
-     *
+     *     component: MyScene
      * }
      *
      * defineModule<RpgClient>({
-     *      scenes: {
-     *          // If you put the RpgSceneMap scene, Thhe key is called mandatory `map`
-     *          map: sceneMap
-     *      }
+     *      sceneMap
      * })
      * ```
      *
-     * @prop { [sceneName: string]: RpgSceneMapHooks } [scenes]
+     * @prop {RpgSceneMapHooks} [sceneMap]
      * @memberof RpgClient
      * */
+    sceneMap?: RpgSceneMapHooks;
+    /**
+     * Legacy scene map hook container.
+     *
+     * Prefer `sceneMap` for new code.
+     */
     scenes?: {
         map: RpgSceneMapHooks;
     };
-    sceneMap?: RpgSceneMapHooks;
     /**
      * Array containing the list of component animations
      * Each element defines a temporary component to display for animations like hits, effects, etc.
@@ -587,5 +675,12 @@ export interface RpgClient {
         id: string;
         component: ComponentFunction;
     }[];
+    /**
+     * Client-side projectile rendering configuration.
+     *
+     * Register a CanvasEngine component per projectile type. The server sends
+     * compact spawn/impact/destroy events and the client predicts x/y locally.
+     */
+    projectiles?: RpgProjectileHooks;
 }
 export {};

package/dist/RpgClientEngine.d.ts

@@ -1,9 +1,21 @@
+import { Trigger } from 'canvasengine';
 import { AbstractWebsocket } from './services/AbstractSocket';
-import { Direction } from '@rpgjs/common';
+import { Direction, RpgActionInput, RpgActionName } from '@rpgjs/common';
 import { RpgClientMap } from './Game/Map';
 import { AnimationManager } from './Game/AnimationManager';
 import { Observable } from 'rxjs';
+import { ProjectileManager } from './Game/ProjectileManager';
+import { ClientPointerContext } from './services/pointerContext';
 import * as PIXI from "pixi.js";
+type ConfigurableTrigger<T> = Omit<Trigger<T>, "start"> & {
+    start(config?: T): Promise<void>;
+};
+type MapShakeOptions = {
+    intensity?: number;
+    duration?: number;
+    frequency?: number;
+    direction?: string;
+};
 export declare class RpgClientEngine<T = any> {
     context: any;
     private guiService;
@@ -14,12 +26,15 @@ export declare class RpgClientEngine<T = any> {
     private selector;
     globalConfig: T;
     sceneComponent: any;
+    sceneMapComponent: any;
     stopProcessingInput: boolean;
     width: import('canvasengine').WritableSignal<string>;
     height: import('canvasengine').WritableSignal<string>;
-    spritesheets: Map<string, any>;
+    spritesheets: Map<string | number, any>;
     sounds: Map<string, any>;
     componentAnimations: any[];
+    projectiles: ProjectileManager;
+    pointer: ClientPointerContext;
     private spritesheetResolver?;
     private soundResolver?;
     particleSettings: {
@@ -32,10 +47,11 @@ export declare class RpgClientEngine<T = any> {
     playerIdSignal: import('canvasengine').WritableSignal<string | null>;
     spriteComponentsBehind: import('canvasengine').WritableArraySignal<any[]>;
     spriteComponentsInFront: import('canvasengine').WritableArraySignal<any[]>;
+    spriteComponents: Map<string, any>;
     /** ID of the sprite that the camera should follow. null means follow the current player */
     cameraFollowTargetId: import('canvasengine').WritableSignal<string | null>;
     /** Trigger for map shake animation */
-    mapShakeTrigger: import('canvasengine').Trigger<any>;
+    mapShakeTrigger: ConfigurableTrigger<MapShakeOptions>;
     controlsReady: import('canvasengine').WritableSignal<undefined>;
     gamePause: import('canvasengine').WritableSignal<boolean>;
     private predictionEnabled;
@@ -45,6 +61,8 @@ export declare class RpgClientEngine<T = any> {
     private pendingPredictionFrames;
     private lastClientPhysicsStepAt;
     private frameOffset;
+    private latestServerTick?;
+    private latestServerTickAt;
     private rtt;
     private pingInterval;
     private readonly PING_INTERVAL_MS;
@@ -61,6 +79,9 @@ export declare class RpgClientEngine<T = any> {
     private sceneResetQueued;
     private tickSubscriptions;
     private resizeHandler?;
+    private pointerMoveHandler?;
+    private pointerCanvas?;
+    private pendingSyncPackets;
     private notificationManager;
     constructor(context: any);
     /**
@@ -98,9 +119,15 @@ export declare class RpgClientEngine<T = any> {
      */
     setKeyboardControls(controlInstance: any): void;
     start(): Promise<void>;
+    private resolveSceneMapComponent;
+    private setupPointerTracking;
+    private findViewportInstance;
     private prepareSyncPayload;
     private normalizeAckWithSyncState;
     private initListeners;
+    private callConnectError;
+    private flushPendingSyncPackets;
+    private applySyncPacket;
     /**
      * Start periodic ping/pong for client-server synchronization
      *
@@ -175,7 +202,7 @@ export declare class RpgClientEngine<T = any> {
      * });
      * ```
      */
-    setSpritesheetResolver(resolver: (id: string) => any | Promise<any>): void;
+    setSpritesheetResolver(resolver: (id: string | number) => any | Promise<any>): void;
     /**
      * Get a spritesheet by ID, using resolver if not found in cache
      *
@@ -183,7 +210,7 @@ export declare class RpgClientEngine<T = any> {
      * If not found and a resolver is set, it calls the resolver to create the spritesheet.
      * The resolved spritesheet is automatically cached for future use.
      *
-     * @param id - The spritesheet ID to retrieve
+     * @param id - The spritesheet ID or legacy tile ID to retrieve
      * @returns The spritesheet if found or created, or undefined if not found and no resolver
      * @returns Promise<any> if the resolver is asynchronous
      *
@@ -196,7 +223,7 @@ export declare class RpgClientEngine<T = any> {
      * const spritesheet = await engine.getSpriteSheet('dynamic-sprite');
      * ```
      */
-    getSpriteSheet(id: string): any | Promise<any>;
+    getSpriteSheet(id: string | number): any | Promise<any>;
     /**
      * Add a sound to the engine
      *
@@ -451,6 +478,32 @@ export declare class RpgClientEngine<T = any> {
         props: (object: any) => any;
         dependencies?: (object: any) => any[];
     }): any;
+    /**
+     * Register a reusable sprite component that can be addressed by the server.
+     *
+     * Server-side component definitions only carry the component id and
+     * serializable props. The client registry maps that id to the CanvasEngine
+     * component that performs the actual rendering.
+     *
+     * @param id - Stable component id used by server component definitions
+     * @param component - CanvasEngine component to render for this id
+     * @returns The registered component
+     *
+     * @example
+     * ```ts
+     * engine.registerSpriteComponent('guildBadge', GuildBadgeComponent);
+     * ```
+     */
+    registerSpriteComponent(id: string, component: any): any;
+    /**
+     * Get a reusable sprite component by id.
+     *
+     * @param id - Component id registered on the client
+     * @returns The CanvasEngine component, or undefined when missing
+     */
+    getSpriteComponent(id: string): any;
+    registerProjectileComponent(type: string, component: any): any;
+    getProjectileComponent(type: string): any;
     /**
      * Add a component animation to the engine
      *
@@ -520,20 +573,26 @@ export declare class RpgClientEngine<T = any> {
      *   duration: 1000,
      *   onFinish: () => console.log('Fade complete')
      * });
+     *
+     * // Wait until the transition component calls onFinish
+     * await engine.startTransition('fade', { duration: 1000 });
      * ```
      */
-    startTransition(id: string, props?: any): void;
+    startTransition(id: string, props?: any): Promise<void>;
     processInput({ input }: {
         input: Direction;
     }): Promise<void>;
-    processAction({ action }: {
-        action: number;
-    }): void;
+    processAction(action: RpgActionName, data?: any): void;
+    processAction(action: RpgActionInput): void;
     get PIXI(): typeof PIXI;
     get socket(): AbstractWebsocket;
     get playerId(): string | null;
     get scene(): RpgClientMap;
     private getPhysicsTick;
+    private getPhysicsTickDurationMs;
+    private updateServerTickEstimate;
+    private estimateServerTick;
+    private predictProjectileImpact;
     private ensureCurrentPlayerBody;
     private stepClientPhysicsTick;
     private flushPendingPredictedStates;
@@ -584,6 +643,22 @@ export declare class RpgClientEngine<T = any> {
      * ```
      */
     clearClientPredictionStates(): void;
+    /**
+     * Stop local movement immediately and discard pending predicted movement.
+     *
+     * Use this before a blocking action such as an A-RPG attack, dialog, dash
+     * startup, or any client-side state where already buffered movement inputs
+     * must not be replayed after server reconciliation.
+     *
+     * @param player - Player object to stop. Defaults to the current player.
+     * @returns `true` when a player was found and interrupted.
+     *
+     * @example
+     * ```ts
+     * engine.interruptCurrentPlayerMovement();
+     * ```
+     */
+    interruptCurrentPlayerMovement(player?: any): boolean;
     /**
      * Trigger a flash animation on a sprite
      *
@@ -681,3 +756,4 @@ export declare class RpgClientEngine<T = any> {
      */
     clear(): void;
 }
+export {};