@rpgjs/client 5.0.0-alpha.43 → 5.0.0-alpha.44

package/dist/Gui/Gui.js

@@ -1,478 +1,445 @@
-import { inject } from '../node_modules/.pnpm/@signe_di@2.8.3/node_modules/@signe/di/dist/index.js';
-import { signal } from 'canvasengine';
-import { WebSocketToken } from '../services/AbstractSocket.js';
-import component from '../components/gui/dialogbox/index.ce.js';
-import '@canvasengine/presets';
-import { combineLatest } from 'rxjs';
-import { PrebuiltGui } from '@rpgjs/common';
-import '../Sound.js';
-import '../Resource.js';
-import '../node_modules/.pnpm/@signe_sync@2.8.3/node_modules/@signe/sync/dist/index.js';
-import '../Game/Map.js';
-import 'pixi.js';
-import '../node_modules/.pnpm/@signe_room@2.8.3/node_modules/@signe/room/dist/index.js';
-import '../node_modules/.pnpm/@signe_sync@2.8.3/node_modules/@signe/sync/dist/client/index.js';
-import component$2 from '../components/gui/shop/shop.ce.js';
-import component$4 from '../components/gui/save-load.ce.js';
-import component$1 from '../components/gui/menu/main-menu.ce.js';
-import component$3 from '../components/gui/notification/notification.ce.js';
-import component$5 from '../components/gui/title-screen.ce.js';
-import component$6 from '../components/gui/gameover.ce.js';
-
-const throwError = (id) => {
-  throw `The GUI named ${id} is non-existent. Please add the component in the gui property of the decorator @RpgClient`;
+import { inject } from "../node_modules/.pnpm/@signe_di@2.8.3/node_modules/@signe/di/dist/index.js";
+import { WebSocketToken } from "../services/AbstractSocket.js";
+import component from "../components/gui/dialogbox/index.ce.js";
+import component$1 from "../components/gui/shop/shop.ce.js";
+import component$2 from "../components/gui/save-load.ce.js";
+import component$3 from "../components/gui/menu/main-menu.ce.js";
+import component$4 from "../components/gui/notification/notification.ce.js";
+import component$5 from "../components/gui/title-screen.ce.js";
+import component$6 from "../components/gui/gameover.ce.js";
+import "../components/gui/index.js";
+import { signal } from "canvasengine";
+import { PrebuiltGui } from "@rpgjs/common";
+import { combineLatest } from "rxjs";
+//#region src/Gui/Gui.ts
+var throwError = (id) => {
+	throw `The GUI named ${id} is non-existent. Please add the component in the gui property of the decorator @RpgClient`;
 };
-const updateItemQuantity = (items, id) => {
-  const index = items.findIndex((item2) => item2?.id === id);
-  if (index === -1) return items;
-  const item = items[index];
-  if (item?.usable === false) return items;
-  if (item?.consumable === false) return items;
-  const quantity = typeof item?.quantity === "number" ? item.quantity : 1;
-  const nextQuantity = Math.max(0, quantity - 1);
-  if (nextQuantity === quantity) return items;
-  if (nextQuantity <= 0) {
-    return items.filter((_, idx) => idx !== index);
-  }
-  const nextItems = items.slice();
-  nextItems[index] = { ...item, quantity: nextQuantity };
-  return nextItems;
+var updateItemQuantity = (items, id) => {
+	const index = items.findIndex((item) => item?.id === id);
+	if (index === -1) return items;
+	const item = items[index];
+	if (item?.usable === false) return items;
+	if (item?.consumable === false) return items;
+	const quantity = typeof item?.quantity === "number" ? item.quantity : 1;
+	const nextQuantity = Math.max(0, quantity - 1);
+	if (nextQuantity === quantity) return items;
+	if (nextQuantity <= 0) return items.filter((_, idx) => idx !== index);
+	const nextItems = items.slice();
+	nextItems[index] = {
+		...item,
+		quantity: nextQuantity
+	};
+	return nextItems;
 };
-const updateEquippedFlag = (items, id, equip) => {
-  const index = items.findIndex((item2) => item2?.id === id);
-  if (index === -1) return items;
-  const item = items[index];
-  if (item?.equipped === equip) return items;
-  const nextItems = items.slice();
-  nextItems[index] = { ...item, equipped: equip };
-  return nextItems;
+var updateEquippedFlag = (items, id, equip) => {
+	const index = items.findIndex((item) => item?.id === id);
+	if (index === -1) return items;
+	const item = items[index];
+	if (item?.equipped === equip) return items;
+	const nextItems = items.slice();
+	nextItems[index] = {
+		...item,
+		equipped: equip
+	};
+	return nextItems;
 };
-const mainMenuOptimisticReducer = (data, action) => {
-  if (!data || typeof data !== "object") return data;
-  if (action.name === "useItem") {
-    if (!Array.isArray(data.items)) return data;
-    const id = action.data?.id;
-    if (!id) return data;
-    const nextItems = updateItemQuantity(data.items, id);
-    if (nextItems === data.items) return data;
-    return { ...data, items: nextItems };
-  }
-  if (action.name === "equipItem") {
-    const id = action.data?.id;
-    if (!id || typeof action.data?.equip !== "boolean") return data;
-    const equip = action.data.equip;
-    let nextItems = data.items;
-    let nextEquips = data.equips;
-    if (Array.isArray(data.items)) {
-      nextItems = updateEquippedFlag(data.items, id, equip);
-    }
-    if (Array.isArray(data.equips)) {
-      nextEquips = updateEquippedFlag(data.equips, id, equip);
-    }
-    if (nextItems === data.items && nextEquips === data.equips) return data;
-    return {
-      ...data,
-      ...nextItems !== data.items ? { items: nextItems } : {},
-      ...nextEquips !== data.equips ? { equips: nextEquips } : {}
-    };
-  }
-  return data;
+var mainMenuOptimisticReducer = (data, action) => {
+	if (!data || typeof data !== "object") return data;
+	if (action.name === "useItem") {
+		if (!Array.isArray(data.items)) return data;
+		const id = action.data?.id;
+		if (!id) return data;
+		const nextItems = updateItemQuantity(data.items, id);
+		if (nextItems === data.items) return data;
+		return {
+			...data,
+			items: nextItems
+		};
+	}
+	if (action.name === "equipItem") {
+		const id = action.data?.id;
+		if (!id || typeof action.data?.equip !== "boolean") return data;
+		const equip = action.data.equip;
+		let nextItems = data.items;
+		let nextEquips = data.equips;
+		if (Array.isArray(data.items)) nextItems = updateEquippedFlag(data.items, id, equip);
+		if (Array.isArray(data.equips)) nextEquips = updateEquippedFlag(data.equips, id, equip);
+		if (nextItems === data.items && nextEquips === data.equips) return data;
+		return {
+			...data,
+			...nextItems !== data.items ? { items: nextItems } : {},
+			...nextEquips !== data.equips ? { equips: nextEquips } : {}
+		};
+	}
+	return data;
 };
-class RpgGui {
-  constructor(context) {
-    this.context = context;
-    this.gui = signal({});
-    this.extraGuis = [];
-    this.vueGuiInstance = null;
-    // Reference to VueGui instance
-    this.optimisticReducers = /* @__PURE__ */ new Map();
-    this.pendingActions = /* @__PURE__ */ new Map();
-    /**
-     * Signal tracking which player IDs should display attached GUIs
-     * Key: player ID, Value: boolean (true = show, false = hide)
-     */
-    this.attachedGuiDisplayState = signal({});
-    this.webSocket = inject(context, WebSocketToken);
-    this.add({
-      name: "rpg-dialog",
-      component: component
-    });
-    this.add({
-      name: PrebuiltGui.MainMenu,
-      component: component$1
-    });
-    this.add({
-      name: PrebuiltGui.Shop,
-      component: component$2
-    });
-    this.add({
-      name: PrebuiltGui.Notification,
-      component: component$3,
-      autoDisplay: true
-    });
-    this.add({
-      name: PrebuiltGui.Save,
-      component: component$4
-    });
-    this.add({
-      name: PrebuiltGui.TitleScreen,
-      component: component$5
-    });
-    this.add({
-      name: PrebuiltGui.Gameover,
-      component: component$6
-    });
-    this.registerOptimisticReducer(PrebuiltGui.MainMenu, mainMenuOptimisticReducer);
-  }
-  async _initialize() {
-    this.webSocket.on("gui.open", (data) => {
-      this.clearPendingActions(data.guiId);
-      this.display(data.guiId, data.data);
-    });
-    this.webSocket.on("gui.exit", (guiId) => {
-      this.hide(guiId);
-    });
-    this.webSocket.on("gui.update", (payload) => {
-      this.applyServerUpdate(payload.guiId, payload.data, payload.clientActionId);
-    });
-    this.webSocket.on("gui.tooltip", (data) => {
-      const currentState = { ...this.attachedGuiDisplayState() };
-      data.players.forEach((playerId) => {
-        currentState[playerId] = data.display;
-      });
-      this.attachedGuiDisplayState.set(currentState);
-    });
-  }
-  /**
-   * Set the VueGui instance reference for Vue component management
-   * This is called by VueGui when it's initialized
-   * 
-   * @param vueGuiInstance - The VueGui instance
-   */
-  _setVueGuiInstance(vueGuiInstance) {
-    this.vueGuiInstance = vueGuiInstance;
-  }
-  /**
-   * Notify VueGui about GUI state changes
-   * This synchronizes the Vue component display state
-   * 
-   * @param guiId - The GUI component ID
-   * @param display - Display state
-   * @param data - Component data
-   */
-  _notifyVueGui(guiId, display, data = {}) {
-    if (this.vueGuiInstance && this.vueGuiInstance.vm) {
-      const extraGui = this.extraGuis.find((gui) => gui.name === guiId);
-      if (extraGui) {
-        this.vueGuiInstance.vm.gui[guiId] = {
-          name: guiId,
-          display,
-          data,
-          attachToSprite: extraGui.attachToSprite || false
-        };
-        this.vueGuiInstance.vm.gui = Object.assign({}, this.vueGuiInstance.vm.gui);
-      }
-    }
-  }
-  /**
-   * Initialize Vue components in the VueGui instance
-   * This should be called after VueGui is mounted
-   */
-  _initializeVueComponents() {
-    if (this.vueGuiInstance && this.vueGuiInstance.vm) {
-      this.extraGuis.forEach((gui) => {
-        this.vueGuiInstance.vm.gui[gui.name] = {
-          name: gui.name,
-          display: gui.display(),
-          data: gui.data(),
-          attachToSprite: gui.attachToSprite || false
-        };
-      });
-      this.vueGuiInstance.vm.gui = Object.assign({}, this.vueGuiInstance.vm.gui);
-    }
-  }
-  guiInteraction(guiId, name, data) {
-    const clientActionId = globalThis.crypto?.randomUUID?.() || `${Date.now()}-${Math.random()}`;
-    const actionData = { ...data || {}, clientActionId };
-    this.applyOptimisticAction({
-      guiId,
-      name,
-      data: actionData,
-      clientActionId
-    });
-    this.webSocket.emit("gui.interaction", {
-      guiId,
-      name,
-      data: actionData
-    });
-  }
-  guiClose(guiId, data) {
-    this.webSocket.emit("gui.exit", {
-      guiId,
-      data
-    });
-  }
-  /**
-   * Add a GUI component to the system
-   * 
-   * By default, only CanvasEngine components (.ce files) are accepted.
-   * Vue components should be handled by the @rpgjs/vue package.
-   * 
-   * @param gui - GUI configuration options
-   * @param gui.name - Name or ID of the GUI component
-   * @param gui.id - Alternative ID if name is not provided
-   * @param gui.component - The component to render (must be a CanvasEngine component)
-   * @param gui.display - Initial display state (default: false)
-   * @param gui.data - Initial data for the component
-   * @param gui.autoDisplay - Auto display when added (default: false)
-   * @param gui.dependencies - Function returning Signal dependencies
-   * @param gui.attachToSprite - Attach GUI to sprites instead of global display (default: false)
-   * 
-   * @example
-   * ```ts
-   * gui.add({
-   *   name: 'inventory',
-   *   component: InventoryComponent, // Must be a .ce component
-   *   autoDisplay: true,
-   *   dependencies: () => [playerSignal, inventorySignal]
-   * });
-   * 
-   * // Attach to sprites
-   * gui.add({
-   *   name: 'tooltip',
-   *   component: TooltipComponent,
-   *   attachToSprite: true
-   * });
-   * ```
-   */
-  add(gui) {
-    const guiId = gui.name || gui.id;
-    if (!guiId) {
-      throw new Error("GUI must have a name or id");
-    }
-    const guiInstance = {
-      name: guiId,
-      component: gui.component,
-      display: signal(gui.display || false),
-      data: signal(gui.data || {}),
-      autoDisplay: gui.autoDisplay || false,
-      dependencies: gui.dependencies ? gui.dependencies() : [],
-      attachToSprite: gui.attachToSprite || false
-    };
-    if (typeof gui.component !== "function") {
-      guiInstance.component = gui;
-      this.extraGuis.push(guiInstance);
-      if (guiInstance.autoDisplay) {
-        this._notifyVueGui(guiId, true, gui.data || {});
-      }
-      return;
-    }
-    this.gui()[guiId] = guiInstance;
-    if (guiInstance.autoDisplay && typeof gui.component === "function") {
-      this.display(guiId, gui.data);
-    }
-  }
-  registerOptimisticReducer(guiId, reducer) {
-    const existing = this.optimisticReducers.get(guiId) || [];
-    this.optimisticReducers.set(guiId, existing.concat(reducer));
-  }
-  /**
-   * Get all attached GUI components (attachToSprite: true)
-   * 
-   * Returns all GUI instances that are configured to be attached to sprites.
-   * These GUIs should be rendered in character.ce instead of canvas.ce.
-   * 
-   * @returns Array of GUI instances with attachToSprite: true
-   * 
-   * @example
-   * ```ts
-   * const attachedGuis = gui.getAttachedGuis();
-   * // Use in character.ce to render tooltips
-   * ```
-   */
-  getAttachedGuis() {
-    const allGuis = this.getAll();
-    return Object.values(allGuis).filter((gui) => gui.attachToSprite === true);
-  }
-  /**
-   * Check if a player should display attached GUIs
-   * 
-   * @param playerId - The player ID to check
-   * @returns true if attached GUIs should be displayed for this player
-   */
-  shouldDisplayAttachedGui(playerId) {
-    return this.attachedGuiDisplayState()[playerId] === true;
-  }
-  get(id) {
-    const canvasGui = this.gui()[id];
-    if (canvasGui) {
-      return canvasGui;
-    }
-    return this.extraGuis.find((gui) => gui.name === id);
-  }
-  exists(id) {
-    return !!this.get(id);
-  }
-  getAll() {
-    const allGuis = { ...this.gui() };
-    this.extraGuis.forEach((gui) => {
-      allGuis[gui.name] = gui;
-    });
-    return allGuis;
-  }
-  /**
-   * Display a GUI component
-   * 
-   * Displays the GUI immediately if no dependencies are configured,
-   * or waits for all dependencies to be resolved if dependencies are present.
-   * Automatically manages subscriptions to prevent memory leaks.
-   * Works with both CanvasEngine components and Vue components.
-   * 
-   * @param id - The GUI component ID
-   * @param data - Data to pass to the component
-   * @param dependencies - Optional runtime dependencies (overrides config dependencies)
-   * 
-   * @example
-   * ```ts
-   * // Display immediately
-   * gui.display('inventory', { items: [] });
-   * 
-   * // Display with runtime dependencies
-   * gui.display('shop', { shopId: 1 }, [playerSignal, shopSignal]);
-   * ```
-   */
-  display(id, data = {}, dependencies = []) {
-    if (!this.exists(id)) {
-      throw throwError(id);
-    }
-    const guiInstance = this.get(id);
-    const isVueComponent = this.extraGuis.some((gui) => gui.name === id);
-    if (isVueComponent) {
-      this._handleVueComponentDisplay(id, data, dependencies, guiInstance);
-    } else {
-      guiInstance.data.set(data);
-      guiInstance.display.set(true);
-    }
-  }
-  isDisplaying(id) {
-    const guiInstance = this.get(id);
-    if (!guiInstance) return false;
-    return guiInstance.display();
-  }
-  /**
-   * Handle Vue component display logic
-   * 
-   * @param id - GUI component ID
-   * @param data - Component data
-   * @param dependencies - Runtime dependencies
-   * @param guiInstance - GUI instance
-   */
-  _handleVueComponentDisplay(id, data, dependencies, guiInstance) {
-    if (guiInstance.subscription) {
-      guiInstance.subscription.unsubscribe();
-      guiInstance.subscription = void 0;
-    }
-    const deps = dependencies.length > 0 ? dependencies : guiInstance.dependencies ? guiInstance.dependencies() : [];
-    if (deps.length > 0) {
-      guiInstance.subscription = combineLatest(
-        deps.map((dependency) => dependency.observable)
-      ).subscribe((values) => {
-        if (values.every((value) => value !== void 0)) {
-          guiInstance.data.set(data);
-          guiInstance.display.set(true);
-          this._notifyVueGui(id, true, data);
-        }
-      });
-      return;
-    }
-    guiInstance.data.set(data);
-    guiInstance.display.set(true);
-    this._notifyVueGui(id, true, data);
-  }
-  /**
-   * Hide a GUI component
-   * 
-   * Hides the GUI and cleans up any active subscriptions.
-   * Works with both CanvasEngine components and Vue components.
-   * 
-   * @param id - The GUI component ID
-   * 
-   * @example
-   * ```ts
-   * gui.hide('inventory');
-   * ```
-   */
-  hide(id) {
-    if (!this.exists(id)) {
-      throw throwError(id);
-    }
-    const guiInstance = this.get(id);
-    if (guiInstance.subscription) {
-      guiInstance.subscription.unsubscribe();
-      guiInstance.subscription = void 0;
-    }
-    guiInstance.display.set(false);
-    const isVueComponent = this.extraGuis.some((gui) => gui.name === id);
-    if (isVueComponent) {
-      this._notifyVueGui(id, false);
-    }
-  }
-  isVueComponent(id) {
-    return this.extraGuis.some((gui) => gui.name === id);
-  }
-  clearPendingActions(guiId) {
-    this.pendingActions.delete(guiId);
-  }
-  applyReducers(guiId, data, actions) {
-    const reducers = this.optimisticReducers.get(guiId);
-    if (!reducers || reducers.length === 0) return data;
-    let next = data;
-    for (const action of actions) {
-      for (const reducer of reducers) {
-        const updated = reducer(next, action);
-        if (updated !== void 0 && updated !== null && updated !== next) {
-          next = updated;
-        }
-      }
-    }
-    return next;
-  }
-  applyOptimisticAction(action) {
-    const guiInstance = this.get(action.guiId);
-    if (!guiInstance) return;
-    const reducers = this.optimisticReducers.get(action.guiId);
-    if (!reducers || reducers.length === 0) return;
-    const currentData = guiInstance.data();
-    const nextData = this.applyReducers(action.guiId, currentData, [action]);
-    if (nextData === currentData) return;
-    guiInstance.data.set(nextData);
-    const pending = this.pendingActions.get(action.guiId) || [];
-    pending.push(action);
-    this.pendingActions.set(action.guiId, pending);
-    if (this.isVueComponent(action.guiId)) {
-      this._notifyVueGui(action.guiId, guiInstance.display(), nextData);
-    }
-  }
-  applyServerUpdate(guiId, data, clientActionId) {
-    const guiInstance = this.get(guiId);
-    if (!guiInstance) return;
-    let pending = this.pendingActions.get(guiId) || [];
-    if (clientActionId) {
-      pending = pending.filter((action) => action.clientActionId !== clientActionId);
-    } else {
-      pending = [];
-    }
-    let nextData = data;
-    if (pending.length) {
-      nextData = this.applyReducers(guiId, nextData, pending);
-    }
-    guiInstance.data.set(nextData);
-    this.pendingActions.set(guiId, pending);
-    if (this.isVueComponent(guiId)) {
-      this._notifyVueGui(guiId, guiInstance.display(), nextData);
-    }
-  }
-}
-
+var RpgGui = class {
+	constructor(context) {
+		this.context = context;
+		this.gui = signal({});
+		this.extraGuis = [];
+		this.vueGuiInstance = null;
+		this.optimisticReducers = /* @__PURE__ */ new Map();
+		this.pendingActions = /* @__PURE__ */ new Map();
+		this.attachedGuiDisplayState = signal({});
+		this.webSocket = inject(context, WebSocketToken);
+		this.add({
+			name: "rpg-dialog",
+			component
+		});
+		this.add({
+			name: PrebuiltGui.MainMenu,
+			component: component$3
+		});
+		this.add({
+			name: PrebuiltGui.Shop,
+			component: component$1
+		});
+		this.add({
+			name: PrebuiltGui.Notification,
+			component: component$4,
+			autoDisplay: true
+		});
+		this.add({
+			name: PrebuiltGui.Save,
+			component: component$2
+		});
+		this.add({
+			name: PrebuiltGui.TitleScreen,
+			component: component$5
+		});
+		this.add({
+			name: PrebuiltGui.Gameover,
+			component: component$6
+		});
+		this.registerOptimisticReducer(PrebuiltGui.MainMenu, mainMenuOptimisticReducer);
+	}
+	async _initialize() {
+		this.webSocket.on("gui.open", (data) => {
+			this.clearPendingActions(data.guiId);
+			this.display(data.guiId, data.data);
+		});
+		this.webSocket.on("gui.exit", (guiId) => {
+			this.hide(guiId);
+		});
+		this.webSocket.on("gui.update", (payload) => {
+			this.applyServerUpdate(payload.guiId, payload.data, payload.clientActionId);
+		});
+		/**
+		* Listen for tooltip display state changes from server
+		* This is triggered by showAttachedGui/hideAttachedGui on the server
+		*/
+		this.webSocket.on("gui.tooltip", (data) => {
+			const currentState = { ...this.attachedGuiDisplayState() };
+			data.players.forEach((playerId) => {
+				currentState[playerId] = data.display;
+			});
+			this.attachedGuiDisplayState.set(currentState);
+		});
+	}
+	/**
+	* Set the VueGui instance reference for Vue component management
+	* This is called by VueGui when it's initialized
+	* 
+	* @param vueGuiInstance - The VueGui instance
+	*/
+	_setVueGuiInstance(vueGuiInstance) {
+		this.vueGuiInstance = vueGuiInstance;
+	}
+	/**
+	* Notify VueGui about GUI state changes
+	* This synchronizes the Vue component display state
+	* 
+	* @param guiId - The GUI component ID
+	* @param display - Display state
+	* @param data - Component data
+	*/
+	_notifyVueGui(guiId, display, data = {}) {
+		if (this.vueGuiInstance && this.vueGuiInstance.vm) {
+			const extraGui = this.extraGuis.find((gui) => gui.name === guiId);
+			if (extraGui) {
+				this.vueGuiInstance.vm.gui[guiId] = {
+					name: guiId,
+					display,
+					data,
+					attachToSprite: extraGui.attachToSprite || false
+				};
+				this.vueGuiInstance.vm.gui = Object.assign({}, this.vueGuiInstance.vm.gui);
+			}
+		}
+	}
+	/**
+	* Initialize Vue components in the VueGui instance
+	* This should be called after VueGui is mounted
+	*/
+	_initializeVueComponents() {
+		if (this.vueGuiInstance && this.vueGuiInstance.vm) {
+			this.extraGuis.forEach((gui) => {
+				this.vueGuiInstance.vm.gui[gui.name] = {
+					name: gui.name,
+					display: gui.display(),
+					data: gui.data(),
+					attachToSprite: gui.attachToSprite || false
+				};
+			});
+			this.vueGuiInstance.vm.gui = Object.assign({}, this.vueGuiInstance.vm.gui);
+		}
+	}
+	guiInteraction(guiId, name, data) {
+		const clientActionId = globalThis.crypto?.randomUUID?.() || `${Date.now()}-${Math.random()}`;
+		const actionData = {
+			...data || {},
+			clientActionId
+		};
+		this.applyOptimisticAction({
+			guiId,
+			name,
+			data: actionData,
+			clientActionId
+		});
+		this.webSocket.emit("gui.interaction", {
+			guiId,
+			name,
+			data: actionData
+		});
+	}
+	guiClose(guiId, data) {
+		this.webSocket.emit("gui.exit", {
+			guiId,
+			data
+		});
+	}
+	/**
+	* Add a GUI component to the system
+	* 
+	* By default, only CanvasEngine components (.ce files) are accepted.
+	* Vue components should be handled by the @rpgjs/vue package.
+	* 
+	* @param gui - GUI configuration options
+	* @param gui.name - Name or ID of the GUI component
+	* @param gui.id - Alternative ID if name is not provided
+	* @param gui.component - The component to render (must be a CanvasEngine component)
+	* @param gui.display - Initial display state (default: false)
+	* @param gui.data - Initial data for the component
+	* @param gui.autoDisplay - Auto display when added (default: false)
+	* @param gui.dependencies - Function returning Signal dependencies
+	* @param gui.attachToSprite - Attach GUI to sprites instead of global display (default: false)
+	* 
+	* @example
+	* ```ts
+	* gui.add({
+	*   name: 'inventory',
+	*   component: InventoryComponent, // Must be a .ce component
+	*   autoDisplay: true,
+	*   dependencies: () => [playerSignal, inventorySignal]
+	* });
+	* 
+	* // Attach to sprites
+	* gui.add({
+	*   name: 'tooltip',
+	*   component: TooltipComponent,
+	*   attachToSprite: true
+	* });
+	* ```
+	*/
+	add(gui) {
+		const guiId = gui.name || gui.id;
+		if (!guiId) throw new Error("GUI must have a name or id");
+		const guiInstance = {
+			name: guiId,
+			component: gui.component,
+			display: signal(gui.display || false),
+			data: signal(gui.data || {}),
+			autoDisplay: gui.autoDisplay || false,
+			dependencies: gui.dependencies ? gui.dependencies() : [],
+			attachToSprite: gui.attachToSprite || false
+		};
+		if (typeof gui.component !== "function") {
+			guiInstance.component = gui;
+			this.extraGuis.push(guiInstance);
+			if (guiInstance.autoDisplay) this._notifyVueGui(guiId, true, gui.data || {});
+			return;
+		}
+		this.gui()[guiId] = guiInstance;
+		if (guiInstance.autoDisplay && typeof gui.component === "function") this.display(guiId, gui.data);
+	}
+	registerOptimisticReducer(guiId, reducer) {
+		const existing = this.optimisticReducers.get(guiId) || [];
+		this.optimisticReducers.set(guiId, existing.concat(reducer));
+	}
+	/**
+	* Get all attached GUI components (attachToSprite: true)
+	* 
+	* Returns all GUI instances that are configured to be attached to sprites.
+	* These GUIs should be rendered in character.ce instead of canvas.ce.
+	* 
+	* @returns Array of GUI instances with attachToSprite: true
+	* 
+	* @example
+	* ```ts
+	* const attachedGuis = gui.getAttachedGuis();
+	* // Use in character.ce to render tooltips
+	* ```
+	*/
+	getAttachedGuis() {
+		const allGuis = this.getAll();
+		return Object.values(allGuis).filter((gui) => gui.attachToSprite === true);
+	}
+	/**
+	* Check if a player should display attached GUIs
+	* 
+	* @param playerId - The player ID to check
+	* @returns true if attached GUIs should be displayed for this player
+	*/
+	shouldDisplayAttachedGui(playerId) {
+		return this.attachedGuiDisplayState()[playerId] === true;
+	}
+	get(id) {
+		const canvasGui = this.gui()[id];
+		if (canvasGui) return canvasGui;
+		return this.extraGuis.find((gui) => gui.name === id);
+	}
+	exists(id) {
+		return !!this.get(id);
+	}
+	getAll() {
+		const allGuis = { ...this.gui() };
+		this.extraGuis.forEach((gui) => {
+			allGuis[gui.name] = gui;
+		});
+		return allGuis;
+	}
+	/**
+	* Display a GUI component
+	* 
+	* Displays the GUI immediately if no dependencies are configured,
+	* or waits for all dependencies to be resolved if dependencies are present.
+	* Automatically manages subscriptions to prevent memory leaks.
+	* Works with both CanvasEngine components and Vue components.
+	* 
+	* @param id - The GUI component ID
+	* @param data - Data to pass to the component
+	* @param dependencies - Optional runtime dependencies (overrides config dependencies)
+	* 
+	* @example
+	* ```ts
+	* // Display immediately
+	* gui.display('inventory', { items: [] });
+	* 
+	* // Display with runtime dependencies
+	* gui.display('shop', { shopId: 1 }, [playerSignal, shopSignal]);
+	* ```
+	*/
+	display(id, data = {}, dependencies = []) {
+		if (!this.exists(id)) throw throwError(id);
+		const guiInstance = this.get(id);
+		if (this.extraGuis.some((gui) => gui.name === id)) this._handleVueComponentDisplay(id, data, dependencies, guiInstance);
+		else {
+			guiInstance.data.set(data);
+			guiInstance.display.set(true);
+		}
+	}
+	isDisplaying(id) {
+		const guiInstance = this.get(id);
+		if (!guiInstance) return false;
+		return guiInstance.display();
+	}
+	/**
+	* Handle Vue component display logic
+	* 
+	* @param id - GUI component ID
+	* @param data - Component data
+	* @param dependencies - Runtime dependencies
+	* @param guiInstance - GUI instance
+	*/
+	_handleVueComponentDisplay(id, data, dependencies, guiInstance) {
+		if (guiInstance.subscription) {
+			guiInstance.subscription.unsubscribe();
+			guiInstance.subscription = void 0;
+		}
+		const deps = dependencies.length > 0 ? dependencies : guiInstance.dependencies ? guiInstance.dependencies() : [];
+		if (deps.length > 0) {
+			guiInstance.subscription = combineLatest(deps.map((dependency) => dependency.observable)).subscribe((values) => {
+				if (values.every((value) => value !== void 0)) {
+					guiInstance.data.set(data);
+					guiInstance.display.set(true);
+					this._notifyVueGui(id, true, data);
+				}
+			});
+			return;
+		}
+		guiInstance.data.set(data);
+		guiInstance.display.set(true);
+		this._notifyVueGui(id, true, data);
+	}
+	/**
+	* Hide a GUI component
+	* 
+	* Hides the GUI and cleans up any active subscriptions.
+	* Works with both CanvasEngine components and Vue components.
+	* 
+	* @param id - The GUI component ID
+	* 
+	* @example
+	* ```ts
+	* gui.hide('inventory');
+	* ```
+	*/
+	hide(id) {
+		if (!this.exists(id)) throw throwError(id);
+		const guiInstance = this.get(id);
+		if (guiInstance.subscription) {
+			guiInstance.subscription.unsubscribe();
+			guiInstance.subscription = void 0;
+		}
+		guiInstance.display.set(false);
+		if (this.extraGuis.some((gui) => gui.name === id)) this._notifyVueGui(id, false);
+	}
+	isVueComponent(id) {
+		return this.extraGuis.some((gui) => gui.name === id);
+	}
+	clearPendingActions(guiId) {
+		this.pendingActions.delete(guiId);
+	}
+	applyReducers(guiId, data, actions) {
+		const reducers = this.optimisticReducers.get(guiId);
+		if (!reducers || reducers.length === 0) return data;
+		let next = data;
+		for (const action of actions) for (const reducer of reducers) {
+			const updated = reducer(next, action);
+			if (updated !== void 0 && updated !== null && updated !== next) next = updated;
+		}
+		return next;
+	}
+	applyOptimisticAction(action) {
+		const guiInstance = this.get(action.guiId);
+		if (!guiInstance) return;
+		const reducers = this.optimisticReducers.get(action.guiId);
+		if (!reducers || reducers.length === 0) return;
+		const currentData = guiInstance.data();
+		const nextData = this.applyReducers(action.guiId, currentData, [action]);
+		if (nextData === currentData) return;
+		guiInstance.data.set(nextData);
+		const pending = this.pendingActions.get(action.guiId) || [];
+		pending.push(action);
+		this.pendingActions.set(action.guiId, pending);
+		if (this.isVueComponent(action.guiId)) this._notifyVueGui(action.guiId, guiInstance.display(), nextData);
+	}
+	applyServerUpdate(guiId, data, clientActionId) {
+		const guiInstance = this.get(guiId);
+		if (!guiInstance) return;
+		let pending = this.pendingActions.get(guiId) || [];
+		if (clientActionId) pending = pending.filter((action) => action.clientActionId !== clientActionId);
+		else pending = [];
+		let nextData = data;
+		if (pending.length) nextData = this.applyReducers(guiId, nextData, pending);
+		guiInstance.data.set(nextData);
+		this.pendingActions.set(guiId, pending);
+		if (this.isVueComponent(guiId)) this._notifyVueGui(guiId, guiInstance.display(), nextData);
+	}
+};
+//#endregion
 export { RpgGui };
-//# sourceMappingURL=Gui.js.map
+
+//# sourceMappingURL=Gui.js.map