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

package/dist/components/character.ce.js

@@ -8,139 +8,19 @@ import { combineLatest, filter, lastValueFrom, map, pairwise, startWith } from "
 //#region src/components/character.ce
 function component($$props) {
 	useProps($$props);
-	const defineProps = useDefineProps($$props);
-	var __assign = this && this.__assign || function() {
-		__assign = Object.assign || function(t) {
-			for (var s, i = 1, n = arguments.length; i < n; i++) {
-				s = arguments[i];
-				for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-			}
-			return t;
-		};
-		return __assign.apply(this, arguments);
-	};
-	var __awaiter = this && this.__awaiter || function(thisArg, _arguments, P, generator) {
-		function adopt(value) {
-			return value instanceof P ? value : new P(function(resolve) {
-				resolve(value);
-			});
-		}
-		return new (P || (P = Promise))(function(resolve, reject) {
-			function fulfilled(value) {
-				try {
-					step(generator.next(value));
-				} catch (e) {
-					reject(e);
-				}
-			}
-			function rejected(value) {
-				try {
-					step(generator["throw"](value));
-				} catch (e) {
-					reject(e);
-				}
-			}
-			function step(result) {
-				result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-			}
-			step((generator = generator.apply(thisArg, _arguments || [])).next());
-		});
-	};
-	var __generator = this && this.__generator || function(thisArg, body) {
-		var _ = {
-			label: 0,
-			sent: function() {
-				if (t[0] & 1) throw t[1];
-				return t[1];
-			},
-			trys: [],
-			ops: []
-		}, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-		return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() {
-			return this;
-		}), g;
-		function verb(n) {
-			return function(v) {
-				return step([n, v]);
-			};
-		}
-		function step(op) {
-			if (f) throw new TypeError("Generator is already executing.");
-			while (g && (g = 0, op[0] && (_ = 0)), _) try {
-				if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-				if (y = 0, t) op = [op[0] & 2, t.value];
-				switch (op[0]) {
-					case 0:
-					case 1:
-						t = op;
-						break;
-					case 4:
-						_.label++;
-						return {
-							value: op[1],
-							done: false
-						};
-					case 5:
-						_.label++;
-						y = op[1];
-						op = [0];
-						continue;
-					case 7:
-						op = _.ops.pop();
-						_.trys.pop();
-						continue;
-					default:
-						if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
-							_ = 0;
-							continue;
-						}
-						if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
-							_.label = op[1];
-							break;
-						}
-						if (op[0] === 6 && _.label < t[1]) {
-							_.label = t[1];
-							t = op;
-							break;
-						}
-						if (t && _.label < t[2]) {
-							_.label = t[2];
-							_.ops.push(op);
-							break;
-						}
-						if (t[2]) _.ops.pop();
-						_.trys.pop();
-						continue;
-				}
-				op = body.call(thisArg, _);
-			} catch (e) {
-				op = [6, e];
-				y = 0;
-			} finally {
-				f = t = 0;
-			}
-			if (op[0] & 5) throw op[1];
-			return {
-				value: op[0] ? op[1] : void 0,
-				done: true
-			};
-		}
-	};
-	var _a = defineProps(), object = _a.object, id = _a.id;
-	var client = inject(RpgClientEngine);
-	var hooks = inject(ModulesToken);
-	var guiService = inject(RpgGui);
+	const { object, id } = useDefineProps($$props)();
+	const client = inject(RpgClientEngine);
+	const hooks = inject(ModulesToken);
+	const guiService = inject(RpgGui);
 	client.spritesheets;
-	var playerId = client.playerId;
-	var componentsBehind = client.spriteComponentsBehind;
-	var componentsInFront = client.spriteComponentsInFront;
-	var isMe = computed(function() {
-		return id() === playerId;
-	});
-	var normalizeComponent = function(comp) {
-		var componentRef;
-		var propsValue;
-		var dependenciesFn;
+	const playerId = client.playerId;
+	const componentsBehind = client.spriteComponentsBehind;
+	const componentsInFront = client.spriteComponentsInFront;
+	const isMe = computed(() => id() === playerId);
+	const normalizeComponent = (comp) => {
+		let componentRef;
+		let propsValue;
+		let dependenciesFn;
 		if (typeof comp === "function" || comp && typeof comp === "object" && !comp.component) {
 			componentRef = comp;
 			propsValue = void 0;
@@ -160,36 +40,33 @@ function component($$props) {
 			dependencies: dependenciesFn ? dependenciesFn(object) : []
 		};
 	};
-	var normalizeComponents = function(components) {
-		return components.map(function(comp) {
-			return normalizeComponent(comp);
-		});
+	const normalizeComponents = (components) => {
+		return components.map((comp) => normalizeComponent(comp));
 	};
-	var normalizedComponentsBehind = computed(function() {
+	const normalizedComponentsBehind = computed(() => {
 		return normalizeComponents(componentsBehind());
 	});
-	var normalizedComponentsInFront = computed(function() {
+	const normalizedComponentsInFront = computed(() => {
 		return normalizeComponents(componentsInFront());
 	});
-	var shouldFollowCamera = computed(function() {
-		var cameraTargetId = client.cameraFollowTargetId();
+	const shouldFollowCamera = computed(() => {
+		const cameraTargetId = client.cameraFollowTargetId();
 		if (cameraTargetId !== null) return id() === cameraTargetId;
 		return isMe();
 	});
-	var attachedGuis = computed(function() {
+	const attachedGuis = computed(() => {
 		return guiService.getAttachedGuis();
 	});
-	var shouldDisplayAttachedGui = computed(function() {
+	const shouldDisplayAttachedGui = computed(() => {
 		return guiService.shouldDisplayAttachedGui(id());
-	}), x = object.x, y = object.y, tint = object.tint, direction = object.direction, animationName = object.animationName, animationCurrentIndex = object.animationCurrentIndex, emitParticleTrigger = object.emitParticleTrigger, particleName = object.particleName;
-	object.graphics;
-	var hitbox = object.hitbox, isConnected = object.isConnected, graphicsSignals = object.graphicsSignals, flashTrigger = object.flashTrigger;
-	var flashType = signal("alpha");
-	var flashDuration = signal(300);
-	var flashCycles = signal(1);
-	var flashAlpha = signal(.3);
-	var flashTint = signal(16777215);
-	on(flashTrigger, function(data) {
+	});
+	const { x, y, tint, direction, animationName, animationCurrentIndex, emitParticleTrigger, particleName, graphics, hitbox, isConnected, graphicsSignals, flashTrigger } = object;
+	const flashType = signal("alpha");
+	const flashDuration = signal(300);
+	const flashCycles = signal(1);
+	const flashAlpha = signal(.3);
+	const flashTint = signal(16777215);
+	on(flashTrigger, (data) => {
 		if (data && typeof data === "object") {
 			if (data.type !== void 0) flashType.set(data.type);
 			if (data.duration !== void 0) flashDuration.set(data.duration);
@@ -198,109 +75,97 @@ function component($$props) {
 			if (data.tint !== void 0) flashTint.set(data.tint);
 		}
 	});
-	var flashConfig = computed(function() {
-		return {
-			trigger: flashTrigger,
-			type: flashType(),
-			duration: flashDuration(),
-			cycles: flashCycles(),
-			alpha: flashAlpha(),
-			tint: flashTint()
-		};
-	});
-	var particleSettings = client.particleSettings;
-	var canControls = function() {
-		return isMe() && object.canMove();
-	};
-	var keyboardControls = client.globalConfig.keyboardControls;
-	var visible = computed(function() {
+	const flashConfig = computed(() => ({
+		trigger: flashTrigger,
+		type: flashType(),
+		duration: flashDuration(),
+		cycles: flashCycles(),
+		alpha: flashAlpha(),
+		tint: flashTint()
+	}));
+	const particleSettings = client.particleSettings;
+	const canControls = () => isMe() && object.canMove();
+	const keyboardControls = client.globalConfig.keyboardControls;
+	const visible = computed(() => {
 		if (object.isEvent()) return true;
 		return isConnected();
 	});
-	var controls = signal({
+	const controls = signal({
 		down: {
 			repeat: true,
 			bind: keyboardControls.down,
-			keyDown: function() {
+			keyDown() {
 				if (canControls()) client.processInput({ input: Direction.Down });
 			}
 		},
 		up: {
 			repeat: true,
 			bind: keyboardControls.up,
-			keyDown: function() {
+			keyDown() {
 				if (canControls()) client.processInput({ input: Direction.Up });
 			}
 		},
 		left: {
 			repeat: true,
 			bind: keyboardControls.left,
-			keyDown: function() {
+			keyDown() {
 				if (canControls()) client.processInput({ input: Direction.Left });
 			}
 		},
 		right: {
 			repeat: true,
 			bind: keyboardControls.right,
-			keyDown: function() {
+			keyDown() {
 				if (canControls()) client.processInput({ input: Direction.Right });
 			}
 		},
 		action: {
 			bind: keyboardControls.action,
-			keyDown: function() {
+			keyDown() {
 				if (canControls()) client.processAction({ action: "action" });
 			}
 		},
 		escape: {
 			bind: keyboardControls.escape,
-			keyDown: function() {
+			keyDown() {
 				if (canControls()) client.processAction({ action: "escape" });
 			}
 		},
 		gamepad: { enabled: true }
 	});
-	var smoothX = animatedSignal(x(), { duration: isMe() ? 0 : 0 });
-	var smoothY = animatedSignal(y(), { duration: isMe() ? 0 : 0 });
-	var z = computed(function() {
+	const smoothX = animatedSignal(x(), { duration: isMe() ? 0 : 0 });
+	const smoothY = animatedSignal(y(), { duration: isMe() ? 0 : 0 });
+	const z = computed(() => {
 		return object.y() + object.z();
 	});
-	var realAnimationName = signal(animationName());
-	var xSubscription = x.observable.subscribe(function(value) {
+	const realAnimationName = signal(animationName());
+	const xSubscription = x.observable.subscribe((value) => {
 		smoothX.set(value);
 	});
-	var ySubscription = y.observable.subscribe(function(value) {
+	const ySubscription = y.observable.subscribe((value) => {
 		smoothY.set(value);
 	});
-	var sheet = function(graphicObject) {
+	const sheet = (graphicObject) => {
 		return {
 			definition: graphicObject,
 			playing: realAnimationName(),
 			params: { direction: direction() },
-			onFinish: function() {
-				animationCurrentIndex.update(function(index) {
-					return index + 1;
-				});
+			onFinish() {
+				animationCurrentIndex.update((index) => index + 1);
 			}
 		};
 	};
-	var movementAnimations = ["walk", "stand"];
-	var epsilon = 0;
-	var stateX$ = smoothX.animatedState.observable;
-	var stateY$ = smoothY.animatedState.observable;
-	var animationName$ = animationName.observable;
-	var moving$ = combineLatest([stateX$, stateY$]).pipe(map(function(_a) {
-		var sx = _a[0], sy = _a[1];
-		var xFinished = Math.abs(sx.value.current - sx.value.end) <= epsilon;
-		var yFinished = Math.abs(sy.value.current - sy.value.end) <= epsilon;
+	const movementAnimations = ["walk", "stand"];
+	const epsilon = 0;
+	const stateX$ = smoothX.animatedState.observable;
+	const stateY$ = smoothY.animatedState.observable;
+	const animationName$ = animationName.observable;
+	const moving$ = combineLatest([stateX$, stateY$]).pipe(map(([sx, sy]) => {
+		const xFinished = Math.abs(sx.value.current - sx.value.end) <= epsilon;
+		const yFinished = Math.abs(sy.value.current - sy.value.end) <= epsilon;
 		return !xFinished || !yFinished;
 	}), startWith(false));
-	var animationMovementSubscription = combineLatest([animationName$.pipe(startWith(animationName()), pairwise(), filter(function(_a) {
-		return _a[0] !== _a[1];
-	})), moving$]).subscribe(function(_a) {
-		var _b = _a[0];
-		_b[0];
-		var curr = _b[1], isMoving = _a[1];
+	const animationMovementSubscription = combineLatest([animationName$.pipe(startWith(animationName()), pairwise(), filter(([prev, curr]) => prev !== curr)), moving$]).subscribe(([[prev, curr], isMoving]) => {
 		if (curr == "stand" && !isMoving) realAnimationName.set(curr);
 		else if (curr == "walk" && isMoving) realAnimationName.set(curr);
 		else if (!movementAnimations.includes(curr)) realAnimationName.set(curr);
@@ -310,37 +175,25 @@ function component($$props) {
 			}
 		}
 	});
-	var onBeforeDestroy = function() {
-		return __awaiter(void 0, void 0, void 0, function() {
-			return __generator(this, function(_a) {
-				switch (_a.label) {
-					case 0:
-						animationMovementSubscription.unsubscribe();
-						xSubscription.unsubscribe();
-						ySubscription.unsubscribe();
-						return [4, lastValueFrom(hooks.callHooks("client-sprite-onDestroy", object))];
-					case 1:
-						_a.sent();
-						return [4, lastValueFrom(hooks.callHooks("client-sceneMap-onRemoveSprite", client.sceneMap, object))];
-					case 2:
-						_a.sent();
-						return [2];
-				}
-			});
-		});
+	const onBeforeDestroy = async () => {
+		animationMovementSubscription.unsubscribe();
+		xSubscription.unsubscribe();
+		ySubscription.unsubscribe();
+		await lastValueFrom(hooks.callHooks("client-sprite-onDestroy", object));
+		await lastValueFrom(hooks.callHooks("client-sceneMap-onRemoveSprite", client.sceneMap, object));
 	};
-	mount(function(element) {
+	mount((element) => {
 		hooks.callHooks("client-sprite-onAdd", object).subscribe();
 		hooks.callHooks("client-sceneMap-onAddSprite", client.sceneMap, object).subscribe();
 		if (isMe()) client.setKeyboardControls(element.directives.controls);
 	});
-	var onAttachedGuiFinish = function(gui, data) {
+	const onAttachedGuiFinish = (gui, data) => {
 		guiService.guiClose(gui.name, data);
 	};
-	var onAttachedGuiInteraction = function(gui, name, data) {
+	const onAttachedGuiInteraction = (gui, name, data) => {
 		guiService.guiInteraction(gui.name, name, data);
 	};
-	tick(function() {
+	tick(() => {
 		hooks.callHooks("client-sprite-onUpdate").subscribe();
 	});
 	return h(Container, {

package/dist/components/character.ce.js.map

@@ -1 +1 @@
-{"version":3,"file":"character.ce.js","names":[],"sources":["../../src/components/character.ce"],"sourcesContent":["<Container x={smoothX} y={smoothY} zIndex={z} viewportFollow={shouldFollowCamera} controls onBeforeDestroy  visible>\n  @for (compConfig of normalizedComponentsBehind) {\n    <Container>\n      <compConfig.component object ...compConfig.props />\n    </Container>\n  } \n  <Particle emit={emitParticleTrigger} settings={particleSettings} zIndex={1000} name={particleName} />\n  <Container>\n    @for (graphicObj of graphicsSignals) {\n      <Sprite \n        sheet={sheet(graphicObj)} \n        direction \n        tint \n        hitbox\n        flash={flashConfig}\n      />\n    }\n  </Container>\n  @for (compConfig of normalizedComponentsInFront) {\n    <Container dependencies={compConfig.dependencies}>\n      <compConfig.component object ...compConfig.props />\n    </Container>\n  }\n  @for (attachedGui of attachedGuis) {\n    @if (shouldDisplayAttachedGui) {\n      <Container>\n        <attachedGui.component ...attachedGui.data() dependencies={attachedGui.dependencies} object={object} onFinish={(data) => {\n          onAttachedGuiFinish(attachedGui, data)\n        }} onInteraction={(name, data) => {\n          onAttachedGuiInteraction(attachedGui, name, data)\n        }} />\n      </Container>\n    }\n  }\n</Container>\n\n<script>\n  import { signal, effect, mount, computed, tick, animatedSignal, on } from \"canvasengine\";\n\n  import { lastValueFrom, combineLatest, pairwise, filter, map, startWith } from \"rxjs\";\n  import { Particle } from \"@canvasengine/presets\";\n  import { GameEngineToken, ModulesToken } from \"@rpgjs/common\";\n  import { RpgClientEngine } from \"../RpgClientEngine\";\n  import { inject } from \"../core/inject\";  \n  import { Direction } from \"@rpgjs/common\";\n  import Hit from \"./effects/hit.ce\";\n  import PlayerComponents from \"./player-components.ce\";\n  import { RpgGui } from \"../Gui/Gui\";\n\n  const { object, id } = defineProps();\n\n  const client = inject(RpgClientEngine);\n  const hooks = inject(ModulesToken);\n  const guiService = inject(RpgGui);\n\n  const spritesheets = client.spritesheets;\n  const playerId = client.playerId;\n  const componentsBehind = client.spriteComponentsBehind;\n  const componentsInFront = client.spriteComponentsInFront;\n  const isMe = computed(() => id() === playerId);\n\n  /**\n   * Normalize a single sprite component configuration\n   * \n   * Handles both direct component references and configuration objects with optional props and dependencies.\n   * Extracts the component reference and creates a computed function that returns the props.\n   * \n   * ## Design\n   * \n   * Supports two formats:\n   * 1. Direct component: `ShadowComponent`\n   * 2. Configuration object: `{ component: LightHalo, props: {...}, dependencies: (object) => [...] }`\n   * \n   * The normalization process:\n   * - Extracts the actual component from either format\n   * - Extracts dependencies function if provided\n   * - Creates a computed function that returns props (static object or dynamic function result)\n   * - Returns a normalized object with `component`, `props`, and `dependencies`\n   * \n   * @param comp - Component reference or configuration object\n   * @returns Normalized component configuration with component, props, and dependencies\n   * \n   * @example\n   * ```ts\n   * // Direct component\n   * normalizeComponent(ShadowComponent)\n   * // => { component: ShadowComponent, props: {}, dependencies: undefined }\n   * \n   * // With static props\n   * normalizeComponent({ component: LightHalo, props: { radius: 30 } })\n   * // => { component: LightHalo, props: { radius: 30 }, dependencies: undefined }\n   * \n   * // With dynamic props and dependencies\n   * normalizeComponent({ \n   *   component: HealthBar, \n   *   props: (object) => ({ hp: object.hp(), maxHp: object.param.maxHp() }),\n   *   dependencies: (object) => [object.hp, object.param.maxHp]\n   * })\n   * // => { component: HealthBar, props: {...}, dependencies: (object) => [...] }\n   * ```\n   */\n  const normalizeComponent = (comp) => {\n    let componentRef;\n    let propsValue;\n    let dependenciesFn;\n    \n    // If it's a direct component reference\n    if (typeof comp === 'function' || (comp && typeof comp === 'object' && !comp.component)) {\n      componentRef = comp;\n      propsValue = undefined;\n      dependenciesFn = undefined;\n    }\n    // If it's a configuration object with component and props\n    else if (comp && typeof comp === 'object' && comp.component) {\n      componentRef = comp.component;\n      // Support both \"data\" (legacy) and \"props\" (new) for backward compatibility\n      propsValue = comp.props !== undefined ? comp.props : comp.data;\n      dependenciesFn = comp.dependencies;\n    }\n    // Fallback: treat as direct component\n    else {\n      componentRef = comp;\n      propsValue = undefined;\n      dependenciesFn = undefined;\n    }\n    \n    // Return props directly (object or function), not as computed\n    // The computed will be created in the template when needed\n    return {\n      component: componentRef,\n      props: typeof propsValue === 'function' ? propsValue(object) : propsValue || {},\n      dependencies: dependenciesFn ? dependenciesFn(object) : []\n    };\n  };\n\n  /**\n   * Normalize an array of sprite components\n   * \n   * Applies normalization to each component in the array using `normalizeComponent`.\n   * \n   * @param components - Array of component references or configuration objects\n   * @returns Array of normalized component configurations\n   */\n  const normalizeComponents = (components) => {\n    return components.map((comp) => normalizeComponent(comp));\n  };\n\n\n  /**\n   * Normalized components to render behind sprites\n   * Handles both direct component references and configuration objects with optional props and dependencies\n   * \n   * Supports multiple formats:\n   * 1. Direct component: `ShadowComponent`\n   * 2. Configuration object: `{ component: LightHalo, props: {...} }`\n   * 3. With dynamic props: `{ component: LightHalo, props: (object) => {...} }`\n   * 4. With dependencies: `{ component: HealthBar, dependencies: (object) => [object.hp, object.param.maxHp] }`\n   * \n   * Components with dependencies will only be displayed when all dependencies are resolved (!= undefined).\n   * The object is passed to the dependencies function to allow sprite-specific dependency resolution.\n   * \n   * @example\n   * ```ts\n   * // Direct component\n   * componentsBehind: [ShadowComponent]\n   * \n   * // With static props\n   * componentsBehind: [{ component: LightHalo, props: { radius: 30 } }]\n   * \n   * // With dynamic props and dependencies\n   * componentsBehind: [{ \n   *   component: HealthBar, \n   *   props: (object) => ({ hp: object.hp(), maxHp: object.param.maxHp() }),\n   *   dependencies: (object) => [object.hp, object.param.maxHp]\n   * }]\n   * ```\n   */\n  const normalizedComponentsBehind = computed(() => {\n    return normalizeComponents(componentsBehind());\n  });\n\n  /**\n   * Normalized components to render in front of sprites\n   * Handles both direct component references and configuration objects with optional props and dependencies\n   * \n   * See `normalizedComponentsBehind` for format details.\n   * Components with dependencies will only be displayed when all dependencies are resolved.\n   */\n  const normalizedComponentsInFront = computed(() => {\n    return normalizeComponents(componentsInFront());\n  });\n  \n  /**\n   * Determine if the camera should follow this sprite\n   * \n   * The camera follows this sprite if:\n   * - It's explicitly set as the camera follow target, OR\n   * - It's the current player and no explicit target is set (default behavior)\n   */\n  const shouldFollowCamera = computed(() => {\n    const cameraTargetId = client.cameraFollowTargetId();\n    // If a target is explicitly set, only follow if this sprite is the target\n    if (cameraTargetId !== null) {\n      return id() === cameraTargetId;\n    }\n    // Otherwise, follow the current player (default behavior)\n    return isMe();\n  });\n\n  /**\n   * Get all attached GUI components that should be rendered on sprites\n   * These are GUIs with attachToSprite: true\n   */\n  const attachedGuis = computed(() => {\n    return guiService.getAttachedGuis();\n  });\n\n  /**\n   * Check if attached GUIs should be displayed for this sprite\n   * This is controlled by showAttachedGui/hideAttachedGui on the server\n   */\n  const shouldDisplayAttachedGui = computed(() => {\n    return guiService.shouldDisplayAttachedGui(id());\n  });\n\n  const { \n    x, \n    y, \n    tint, \n    direction, \n    animationName, \n    animationCurrentIndex,\n    emitParticleTrigger, \n    particleName, \n    graphics, \n    hitbox,\n    isConnected,\n    graphicsSignals,\n    flashTrigger\n  } = object;\n\n  /**\n   * Flash configuration signals for dynamic options\n   * These signals are updated when the flash trigger is activated with options\n   */\n  const flashType = signal<'alpha' | 'tint' | 'both'>('alpha');\n  const flashDuration = signal(300);\n  const flashCycles = signal(1);\n  const flashAlpha = signal(0.3);\n  const flashTint = signal(0xffffff);\n\n  /**\n   * Listen to flash trigger to update configuration dynamically\n   * When flash is triggered with options, update the signals\n   */\n  on(flashTrigger, (data) => {\n    if (data && typeof data === 'object') {\n      if (data.type !== undefined) flashType.set(data.type);\n      if (data.duration !== undefined) flashDuration.set(data.duration);\n      if (data.cycles !== undefined) flashCycles.set(data.cycles);\n      if (data.alpha !== undefined) flashAlpha.set(data.alpha);\n      if (data.tint !== undefined) flashTint.set(data.tint);\n    }\n  });\n\n  /**\n   * Flash configuration for the sprite\n   * \n   * This configuration is used by the flash directive to create visual feedback effects.\n   * The flash trigger is exposed through the object, allowing both server events and\n   * client-side code to trigger flash animations. Options can be passed dynamically\n   * through the trigger, which updates the reactive signals.\n   */\n  const flashConfig = computed(() => ({\n    trigger: flashTrigger,\n    type: flashType(),\n    duration: flashDuration(),\n    cycles: flashCycles(),\n    alpha: flashAlpha(),\n    tint: flashTint(),\n  }));\n\n  const particleSettings = client.particleSettings;\n\n  const canControls = () => isMe() && object.canMove()\n  const keyboardControls = client.globalConfig.keyboardControls;\n\n  const visible = computed(() => {\n    if (object.isEvent()) {\n      return true\n    }\n    return isConnected()\n  });\n\n  const controls = signal({\n    down: {\n      repeat: true,\n      bind: keyboardControls.down,\n      keyDown() {\n        if (canControls()) client.processInput({ input: Direction.Down })\n      },\n    },\n    up: {\n      repeat: true,\n      bind: keyboardControls.up,\n      keyDown() {\n        if (canControls()) client.processInput({ input: Direction.Up })\n      },\n    },\n    left: {\n      repeat: true,\n      bind: keyboardControls.left,\n      keyDown() {\n        if (canControls()) client.processInput({ input: Direction.Left })\n      },\n    },\n    right: {\n      repeat: true,\n      bind: keyboardControls.right,\n      keyDown() {\n        if (canControls()) client.processInput({ input: Direction.Right })\n      },\n    },\n    action: {\n      bind: keyboardControls.action,\n      keyDown() {\n        if (canControls()) {\n          client.processAction({ action: 'action' })\n        }\n      },\n    },\n    escape: {\n      bind: keyboardControls.escape,\n      keyDown() {\n        if (canControls()) {\n          client.processAction({ action: 'escape' })\n        }\n      },\n    },\n    gamepad: {\n      enabled: true\n    }\n  });\n\n  const smoothX = animatedSignal(x(), {\n    duration: isMe() ? 0 : 0\n  });\n\n  const smoothY = animatedSignal(y(), {\n    duration: isMe() ? 0 : 0,\n  });\n\n  const z = computed(() => {\n    return object.y() + object.z()\n  });\n\n  const realAnimationName = signal(animationName());\n\n  const xSubscription = x.observable.subscribe((value) => {\n    smoothX.set(value);\n  });\n\n  const ySubscription = y.observable.subscribe((value) => {\n    smoothY.set(value);\n  });\n  \n  const sheet = (graphicObject) => {\n    return {\n      definition: graphicObject,\n      playing: realAnimationName(),\n      params: {\n        direction: direction()\n      },\n      onFinish() {\n        animationCurrentIndex.update(index => index + 1)\n      }\n    };\n  }\n\n  // Combine animation change detection with movement state from smoothX/smoothY\n  const movementAnimations = ['walk', 'stand'];\n  const epsilon = 0; // movement threshold to consider the easing still running\n\n  const stateX$ = smoothX.animatedState.observable;\n  const stateY$ = smoothY.animatedState.observable;\n  const animationName$ = animationName.observable;\n\n  const moving$ = combineLatest([stateX$, stateY$]).pipe(\n    map(([sx, sy]) => {\n      const xFinished = Math.abs(sx.value.current - sx.value.end) <= epsilon;\n      const yFinished = Math.abs(sy.value.current - sy.value.end) <= epsilon;\n      return !xFinished || !yFinished; // moving if X or Y is not finished\n    }),\n    startWith(false)\n  );\n\n  const animationChange$ = animationName$.pipe(\n    startWith(animationName()),\n    pairwise(),\n    filter(([prev, curr]) => prev !== curr)\n  );\n\n  const animationMovementSubscription = combineLatest([animationChange$, moving$]).subscribe(([[prev, curr], isMoving]) => {\n    if (curr == 'stand' && !isMoving) {\n      realAnimationName.set(curr);\n    }\n    else if (curr == 'walk' && isMoving) {\n      realAnimationName.set(curr);\n    }\n    else if (!movementAnimations.includes(curr)) {\n      realAnimationName.set(curr);\n    }\n    if (!isMoving && object.animationIsPlaying && object.animationIsPlaying()) {\n      if (movementAnimations.includes(curr)) {\n        if (typeof object.resetAnimationState === 'function') {\n          object.resetAnimationState();\n        }\n      }\n    }\n  });\n\n  /**\n   * Cleanup subscriptions and call hooks before sprite destruction.\n   *\n   * # Design\n   * - Prevent memory leaks by unsubscribing from all local subscriptions created in this component.\n   * - Execute destruction hooks to notify modules and scene map of sprite removal.\n   *\n   * @example\n   * await onBeforeDestroy();\n   */\n  const onBeforeDestroy = async () => {\n    animationMovementSubscription.unsubscribe();\n    xSubscription.unsubscribe();\n    ySubscription.unsubscribe();\n    await lastValueFrom(hooks.callHooks(\"client-sprite-onDestroy\", object)) \n    await lastValueFrom(hooks.callHooks(\"client-sceneMap-onRemoveSprite\", client.sceneMap, object))\n  }\n\n  mount((element) => {\n    hooks.callHooks(\"client-sprite-onAdd\", object).subscribe()\n    hooks.callHooks(\"client-sceneMap-onAddSprite\", client.sceneMap, object).subscribe()\n    if (isMe()) client.setKeyboardControls(element.directives.controls)\n  })\n\n  /**\n   * Handle attached GUI finish event\n   * \n   * @param gui - The GUI instance\n   * @param data - Data passed from the GUI component\n   */\n  const onAttachedGuiFinish = (gui, data) => {\n    guiService.guiClose(gui.name, data);\n  };\n\n  /**\n   * Handle attached GUI interaction event\n   * \n   * @param gui - The GUI instance\n   * @param name - Interaction name\n   * @param data - Interaction data\n   */\n  const onAttachedGuiInteraction = (gui, name, data) => {\n    guiService.guiInteraction(gui.name, name, data);\n  };\n\n  tick(() => {\n    hooks.callHooks(\"client-sprite-onUpdate\").subscribe()\n  })\n</script>"],"mappings":"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"}
+{"version":3,"file":"character.ce.js","names":[],"sources":["../../src/components/character.ce"],"sourcesContent":["<Container x={smoothX} y={smoothY} zIndex={z} viewportFollow={shouldFollowCamera} controls onBeforeDestroy  visible>\n  @for (compConfig of normalizedComponentsBehind) {\n    <Container>\n      <compConfig.component object ...compConfig.props />\n    </Container>\n  } \n  <Particle emit={emitParticleTrigger} settings={particleSettings} zIndex={1000} name={particleName} />\n  <Container>\n    @for (graphicObj of graphicsSignals) {\n      <Sprite \n        sheet={sheet(graphicObj)} \n        direction \n        tint \n        hitbox\n        flash={flashConfig}\n      />\n    }\n  </Container>\n  @for (compConfig of normalizedComponentsInFront) {\n    <Container dependencies={compConfig.dependencies}>\n      <compConfig.component object ...compConfig.props />\n    </Container>\n  }\n  @for (attachedGui of attachedGuis) {\n    @if (shouldDisplayAttachedGui) {\n      <Container>\n        <attachedGui.component ...attachedGui.data() dependencies={attachedGui.dependencies} object={object} onFinish={(data) => {\n          onAttachedGuiFinish(attachedGui, data)\n        }} onInteraction={(name, data) => {\n          onAttachedGuiInteraction(attachedGui, name, data)\n        }} />\n      </Container>\n    }\n  }\n</Container>\n\n<script>\n  import { signal, effect, mount, computed, tick, animatedSignal, on } from \"canvasengine\";\n\n  import { lastValueFrom, combineLatest, pairwise, filter, map, startWith } from \"rxjs\";\n  import { Particle } from \"@canvasengine/presets\";\n  import { GameEngineToken, ModulesToken } from \"@rpgjs/common\";\n  import { RpgClientEngine } from \"../RpgClientEngine\";\n  import { inject } from \"../core/inject\";  \n  import { Direction } from \"@rpgjs/common\";\n  import Hit from \"./effects/hit.ce\";\n  import PlayerComponents from \"./player-components.ce\";\n  import { RpgGui } from \"../Gui/Gui\";\n\n  const { object, id } = defineProps();\n\n  const client = inject(RpgClientEngine);\n  const hooks = inject(ModulesToken);\n  const guiService = inject(RpgGui);\n\n  const spritesheets = client.spritesheets;\n  const playerId = client.playerId;\n  const componentsBehind = client.spriteComponentsBehind;\n  const componentsInFront = client.spriteComponentsInFront;\n  const isMe = computed(() => id() === playerId);\n\n  /**\n   * Normalize a single sprite component configuration\n   * \n   * Handles both direct component references and configuration objects with optional props and dependencies.\n   * Extracts the component reference and creates a computed function that returns the props.\n   * \n   * ## Design\n   * \n   * Supports two formats:\n   * 1. Direct component: `ShadowComponent`\n   * 2. Configuration object: `{ component: LightHalo, props: {...}, dependencies: (object) => [...] }`\n   * \n   * The normalization process:\n   * - Extracts the actual component from either format\n   * - Extracts dependencies function if provided\n   * - Creates a computed function that returns props (static object or dynamic function result)\n   * - Returns a normalized object with `component`, `props`, and `dependencies`\n   * \n   * @param comp - Component reference or configuration object\n   * @returns Normalized component configuration with component, props, and dependencies\n   * \n   * @example\n   * ```ts\n   * // Direct component\n   * normalizeComponent(ShadowComponent)\n   * // => { component: ShadowComponent, props: {}, dependencies: undefined }\n   * \n   * // With static props\n   * normalizeComponent({ component: LightHalo, props: { radius: 30 } })\n   * // => { component: LightHalo, props: { radius: 30 }, dependencies: undefined }\n   * \n   * // With dynamic props and dependencies\n   * normalizeComponent({ \n   *   component: HealthBar, \n   *   props: (object) => ({ hp: object.hp(), maxHp: object.param.maxHp() }),\n   *   dependencies: (object) => [object.hp, object.param.maxHp]\n   * })\n   * // => { component: HealthBar, props: {...}, dependencies: (object) => [...] }\n   * ```\n   */\n  const normalizeComponent = (comp) => {\n    let componentRef;\n    let propsValue;\n    let dependenciesFn;\n    \n    // If it's a direct component reference\n    if (typeof comp === 'function' || (comp && typeof comp === 'object' && !comp.component)) {\n      componentRef = comp;\n      propsValue = undefined;\n      dependenciesFn = undefined;\n    }\n    // If it's a configuration object with component and props\n    else if (comp && typeof comp === 'object' && comp.component) {\n      componentRef = comp.component;\n      // Support both \"data\" (legacy) and \"props\" (new) for backward compatibility\n      propsValue = comp.props !== undefined ? comp.props : comp.data;\n      dependenciesFn = comp.dependencies;\n    }\n    // Fallback: treat as direct component\n    else {\n      componentRef = comp;\n      propsValue = undefined;\n      dependenciesFn = undefined;\n    }\n    \n    // Return props directly (object or function), not as computed\n    // The computed will be created in the template when needed\n    return {\n      component: componentRef,\n      props: typeof propsValue === 'function' ? propsValue(object) : propsValue || {},\n      dependencies: dependenciesFn ? dependenciesFn(object) : []\n    };\n  };\n\n  /**\n   * Normalize an array of sprite components\n   * \n   * Applies normalization to each component in the array using `normalizeComponent`.\n   * \n   * @param components - Array of component references or configuration objects\n   * @returns Array of normalized component configurations\n   */\n  const normalizeComponents = (components) => {\n    return components.map((comp) => normalizeComponent(comp));\n  };\n\n\n  /**\n   * Normalized components to render behind sprites\n   * Handles both direct component references and configuration objects with optional props and dependencies\n   * \n   * Supports multiple formats:\n   * 1. Direct component: `ShadowComponent`\n   * 2. Configuration object: `{ component: LightHalo, props: {...} }`\n   * 3. With dynamic props: `{ component: LightHalo, props: (object) => {...} }`\n   * 4. With dependencies: `{ component: HealthBar, dependencies: (object) => [object.hp, object.param.maxHp] }`\n   * \n   * Components with dependencies will only be displayed when all dependencies are resolved (!= undefined).\n   * The object is passed to the dependencies function to allow sprite-specific dependency resolution.\n   * \n   * @example\n   * ```ts\n   * // Direct component\n   * componentsBehind: [ShadowComponent]\n   * \n   * // With static props\n   * componentsBehind: [{ component: LightHalo, props: { radius: 30 } }]\n   * \n   * // With dynamic props and dependencies\n   * componentsBehind: [{ \n   *   component: HealthBar, \n   *   props: (object) => ({ hp: object.hp(), maxHp: object.param.maxHp() }),\n   *   dependencies: (object) => [object.hp, object.param.maxHp]\n   * }]\n   * ```\n   */\n  const normalizedComponentsBehind = computed(() => {\n    return normalizeComponents(componentsBehind());\n  });\n\n  /**\n   * Normalized components to render in front of sprites\n   * Handles both direct component references and configuration objects with optional props and dependencies\n   * \n   * See `normalizedComponentsBehind` for format details.\n   * Components with dependencies will only be displayed when all dependencies are resolved.\n   */\n  const normalizedComponentsInFront = computed(() => {\n    return normalizeComponents(componentsInFront());\n  });\n  \n  /**\n   * Determine if the camera should follow this sprite\n   * \n   * The camera follows this sprite if:\n   * - It's explicitly set as the camera follow target, OR\n   * - It's the current player and no explicit target is set (default behavior)\n   */\n  const shouldFollowCamera = computed(() => {\n    const cameraTargetId = client.cameraFollowTargetId();\n    // If a target is explicitly set, only follow if this sprite is the target\n    if (cameraTargetId !== null) {\n      return id() === cameraTargetId;\n    }\n    // Otherwise, follow the current player (default behavior)\n    return isMe();\n  });\n\n  /**\n   * Get all attached GUI components that should be rendered on sprites\n   * These are GUIs with attachToSprite: true\n   */\n  const attachedGuis = computed(() => {\n    return guiService.getAttachedGuis();\n  });\n\n  /**\n   * Check if attached GUIs should be displayed for this sprite\n   * This is controlled by showAttachedGui/hideAttachedGui on the server\n   */\n  const shouldDisplayAttachedGui = computed(() => {\n    return guiService.shouldDisplayAttachedGui(id());\n  });\n\n  const { \n    x, \n    y, \n    tint, \n    direction, \n    animationName, \n    animationCurrentIndex,\n    emitParticleTrigger, \n    particleName, \n    graphics, \n    hitbox,\n    isConnected,\n    graphicsSignals,\n    flashTrigger\n  } = object;\n\n  /**\n   * Flash configuration signals for dynamic options\n   * These signals are updated when the flash trigger is activated with options\n   */\n  const flashType = signal<'alpha' | 'tint' | 'both'>('alpha');\n  const flashDuration = signal(300);\n  const flashCycles = signal(1);\n  const flashAlpha = signal(0.3);\n  const flashTint = signal(0xffffff);\n\n  /**\n   * Listen to flash trigger to update configuration dynamically\n   * When flash is triggered with options, update the signals\n   */\n  on(flashTrigger, (data) => {\n    if (data && typeof data === 'object') {\n      if (data.type !== undefined) flashType.set(data.type);\n      if (data.duration !== undefined) flashDuration.set(data.duration);\n      if (data.cycles !== undefined) flashCycles.set(data.cycles);\n      if (data.alpha !== undefined) flashAlpha.set(data.alpha);\n      if (data.tint !== undefined) flashTint.set(data.tint);\n    }\n  });\n\n  /**\n   * Flash configuration for the sprite\n   * \n   * This configuration is used by the flash directive to create visual feedback effects.\n   * The flash trigger is exposed through the object, allowing both server events and\n   * client-side code to trigger flash animations. Options can be passed dynamically\n   * through the trigger, which updates the reactive signals.\n   */\n  const flashConfig = computed(() => ({\n    trigger: flashTrigger,\n    type: flashType(),\n    duration: flashDuration(),\n    cycles: flashCycles(),\n    alpha: flashAlpha(),\n    tint: flashTint(),\n  }));\n\n  const particleSettings = client.particleSettings;\n\n  const canControls = () => isMe() && object.canMove()\n  const keyboardControls = client.globalConfig.keyboardControls;\n\n  const visible = computed(() => {\n    if (object.isEvent()) {\n      return true\n    }\n    return isConnected()\n  });\n\n  const controls = signal({\n    down: {\n      repeat: true,\n      bind: keyboardControls.down,\n      keyDown() {\n        if (canControls()) client.processInput({ input: Direction.Down })\n      },\n    },\n    up: {\n      repeat: true,\n      bind: keyboardControls.up,\n      keyDown() {\n        if (canControls()) client.processInput({ input: Direction.Up })\n      },\n    },\n    left: {\n      repeat: true,\n      bind: keyboardControls.left,\n      keyDown() {\n        if (canControls()) client.processInput({ input: Direction.Left })\n      },\n    },\n    right: {\n      repeat: true,\n      bind: keyboardControls.right,\n      keyDown() {\n        if (canControls()) client.processInput({ input: Direction.Right })\n      },\n    },\n    action: {\n      bind: keyboardControls.action,\n      keyDown() {\n        if (canControls()) {\n          client.processAction({ action: 'action' })\n        }\n      },\n    },\n    escape: {\n      bind: keyboardControls.escape,\n      keyDown() {\n        if (canControls()) {\n          client.processAction({ action: 'escape' })\n        }\n      },\n    },\n    gamepad: {\n      enabled: true\n    }\n  });\n\n  const smoothX = animatedSignal(x(), {\n    duration: isMe() ? 0 : 0\n  });\n\n  const smoothY = animatedSignal(y(), {\n    duration: isMe() ? 0 : 0,\n  });\n\n  const z = computed(() => {\n    return object.y() + object.z()\n  });\n\n  const realAnimationName = signal(animationName());\n\n  const xSubscription = x.observable.subscribe((value) => {\n    smoothX.set(value);\n  });\n\n  const ySubscription = y.observable.subscribe((value) => {\n    smoothY.set(value);\n  });\n  \n  const sheet = (graphicObject) => {\n    return {\n      definition: graphicObject,\n      playing: realAnimationName(),\n      params: {\n        direction: direction()\n      },\n      onFinish() {\n        animationCurrentIndex.update(index => index + 1)\n      }\n    };\n  }\n\n  // Combine animation change detection with movement state from smoothX/smoothY\n  const movementAnimations = ['walk', 'stand'];\n  const epsilon = 0; // movement threshold to consider the easing still running\n\n  const stateX$ = smoothX.animatedState.observable;\n  const stateY$ = smoothY.animatedState.observable;\n  const animationName$ = animationName.observable;\n\n  const moving$ = combineLatest([stateX$, stateY$]).pipe(\n    map(([sx, sy]) => {\n      const xFinished = Math.abs(sx.value.current - sx.value.end) <= epsilon;\n      const yFinished = Math.abs(sy.value.current - sy.value.end) <= epsilon;\n      return !xFinished || !yFinished; // moving if X or Y is not finished\n    }),\n    startWith(false)\n  );\n\n  const animationChange$ = animationName$.pipe(\n    startWith(animationName()),\n    pairwise(),\n    filter(([prev, curr]) => prev !== curr)\n  );\n\n  const animationMovementSubscription = combineLatest([animationChange$, moving$]).subscribe(([[prev, curr], isMoving]) => {\n    if (curr == 'stand' && !isMoving) {\n      realAnimationName.set(curr);\n    }\n    else if (curr == 'walk' && isMoving) {\n      realAnimationName.set(curr);\n    }\n    else if (!movementAnimations.includes(curr)) {\n      realAnimationName.set(curr);\n    }\n    if (!isMoving && object.animationIsPlaying && object.animationIsPlaying()) {\n      if (movementAnimations.includes(curr)) {\n        if (typeof object.resetAnimationState === 'function') {\n          object.resetAnimationState();\n        }\n      }\n    }\n  });\n\n  /**\n   * Cleanup subscriptions and call hooks before sprite destruction.\n   *\n   * # Design\n   * - Prevent memory leaks by unsubscribing from all local subscriptions created in this component.\n   * - Execute destruction hooks to notify modules and scene map of sprite removal.\n   *\n   * @example\n   * await onBeforeDestroy();\n   */\n  const onBeforeDestroy = async () => {\n    animationMovementSubscription.unsubscribe();\n    xSubscription.unsubscribe();\n    ySubscription.unsubscribe();\n    await lastValueFrom(hooks.callHooks(\"client-sprite-onDestroy\", object)) \n    await lastValueFrom(hooks.callHooks(\"client-sceneMap-onRemoveSprite\", client.sceneMap, object))\n  }\n\n  mount((element) => {\n    hooks.callHooks(\"client-sprite-onAdd\", object).subscribe()\n    hooks.callHooks(\"client-sceneMap-onAddSprite\", client.sceneMap, object).subscribe()\n    if (isMe()) client.setKeyboardControls(element.directives.controls)\n  })\n\n  /**\n   * Handle attached GUI finish event\n   * \n   * @param gui - The GUI instance\n   * @param data - Data passed from the GUI component\n   */\n  const onAttachedGuiFinish = (gui, data) => {\n    guiService.guiClose(gui.name, data);\n  };\n\n  /**\n   * Handle attached GUI interaction event\n   * \n   * @param gui - The GUI instance\n   * @param name - Interaction name\n   * @param data - Interaction data\n   */\n  const onAttachedGuiInteraction = (gui, name, data) => {\n    guiService.guiInteraction(gui.name, name, data);\n  };\n\n  tick(() => {\n    hooks.callHooks(\"client-sprite-onUpdate\").subscribe()\n  })\n</script>"],"mappings":"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"}

package/dist/components/dynamics/text.ce.js

@@ -3,48 +3,37 @@ import { Text, computed, h, useDefineProps, useProps } from "canvasengine";
 //#region src/components/dynamics/text.ce
 function component($$props) {
 	useProps($$props);
-	const defineProps = useDefineProps($$props);
-	var __assign = this && this.__assign || function() {
-		__assign = Object.assign || function(t) {
-			for (var s, i = 1, n = arguments.length; i < n; i++) {
-				s = arguments[i];
-				for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-			}
-			return t;
-		};
-		return __assign.apply(this, arguments);
-	};
-	var object = defineProps().object;
-	var component = object._component;
-	var parseNumericStyleValue = function(value, object) {
+	const { object } = useDefineProps($$props)();
+	const component = object._component;
+	const parseNumericStyleValue = (value, object) => {
 		if (value === void 0 || value === null) return;
 		if (typeof value === "number") return value;
 		if (typeof value === "string") if (value.includes("{")) {
-			var parsed_1 = parseDynamicValue(value, object);
-			return computed(function() {
-				var str = parsed_1();
-				var num = parseFloat(str);
+			const parsed = parseDynamicValue(value, object);
+			return computed(() => {
+				const str = parsed();
+				const num = parseFloat(str);
 				return isNaN(num) ? 0 : num;
 			});
 		} else {
-			var num = parseFloat(value);
+			const num = parseFloat(value);
 			return isNaN(num) ? void 0 : num;
 		}
 		return value;
 	};
-	var getComponentStyle = function(component) {
+	const getComponentStyle = (component) => {
 		if (!component.style) return {};
-		var style = component.style;
-		var result = {};
+		const style = component.style;
+		const result = {};
 		if (style.fill !== void 0) if (typeof style.fill === "string" && style.fill.includes("{")) result.color = parseDynamicValue(style.fill, object);
 		else result.color = style.fill;
 		if (style.fontSize !== void 0) {
-			var fontSizeValue = parseNumericStyleValue(style.fontSize, object);
+			const fontSizeValue = parseNumericStyleValue(style.fontSize, object);
 			if (fontSizeValue !== void 0) result.size = fontSizeValue;
 		}
 		if (style.fontFamily !== void 0) if (typeof style.fontFamily === "string" && style.fontFamily.includes("{")) result.fontFamily = parseDynamicValue(style.fontFamily, object);
 		else result.fontFamily = style.fontFamily;
-		var textStyle = {};
+		const textStyle = {};
 		if (style.fontStyle !== void 0) if (typeof style.fontStyle === "string" && style.fontStyle.includes("{")) textStyle.fontStyle = parseDynamicValue(style.fontStyle, object);
 		else textStyle.fontStyle = style.fontStyle;
 		if (style.fontWeight !== void 0) if (typeof style.fontWeight === "string" && style.fontWeight.includes("{")) textStyle.fontWeight = parseDynamicValue(style.fontWeight, object);
@@ -53,7 +42,7 @@ function component($$props) {
 		if (style.stroke !== void 0) if (typeof style.stroke === "string" && style.stroke.includes("{")) textStyle.stroke = parseDynamicValue(style.stroke, object);
 		else textStyle.stroke = style.stroke;
 		if (style.opacity !== void 0) {
-			var opacityValue = parseNumericStyleValue(style.opacity, object);
+			const opacityValue = parseNumericStyleValue(style.opacity, object);
 			if (opacityValue !== void 0) textStyle.opacity = opacityValue;
 		}
 		if (style.wordWrap !== void 0) textStyle.wordWrap = style.wordWrap;

package/dist/components/dynamics/text.ce.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.ce.js","names":[],"sources":["../../../src/components/dynamics/text.ce"],"sourcesContent":["<Text text={parseDynamicValue(component.value, object)} ...getComponentStyle(component) />\n\n<script>\nimport { computed } from \"canvasengine\";\nimport { parseDynamicValue } from \"./parse-value\";\n\nconst { object } = defineProps();\nconst component = object._component;\n\n/**\n * Parses a numeric style value that can be a number or a string\n * \n * If the value is a string, it may contain dynamic references like {hp}\n * which need to be parsed using parseDynamicValue. If it's a number,\n * it's returned as-is wrapped in a computed.\n * \n * @param value - Numeric value (number or string)\n * @param object - Object to resolve dynamic references from\n * @returns Computed signal with the numeric value\n */\nconst parseNumericStyleValue = (value, object) => {\n    if (value === undefined || value === null) {\n        return undefined;\n    }\n    \n    if (typeof value === 'number') {\n        return value;\n    }\n    \n    if (typeof value === 'string') {\n        // Check if it contains dynamic references\n        if (value.includes('{')) {\n            // Parse dynamic value and convert to number\n            const parsed = parseDynamicValue(value, object);\n            return computed(() => {\n                const str = parsed();\n                const num = parseFloat(str);\n                return isNaN(num) ? 0 : num;\n            });\n        } else {\n            // Simple string number, convert directly\n            const num = parseFloat(value);\n            return isNaN(num) ? undefined : num;\n        }\n    }\n    \n    return value;\n};\n\n/**\n * Maps component style properties to Canvas Engine Text component props\n * \n * Converts TextComponentOptions from the server to the format expected\n * by the Canvas Engine Text component. Supports all text styling properties\n * including fill, fontSize, fontFamily, fontStyle, fontWeight, stroke,\n * opacity, wordWrap, and align. Also supports dynamic values (number | string)\n * for numeric properties like fontSize and opacity.\n * \n * @param component - Component definition with style property\n * @returns Object with Text component props\n * \n * @example\n * ```ts\n * // Component with style\n * const component = {\n *   style: {\n *     fill: '#000000',\n *     fontSize: 20,\n *     fontFamily: 'Arial',\n *     fontWeight: 'bold'\n *   }\n * };\n * \n * const props = getComponentStyle(component);\n * // Returns: { color: '#000000', size: 20, fontFamily: 'Arial', style: { fontWeight: 'bold' } }\n * \n * // Component with dynamic fontSize\n * const component2 = {\n *   style: {\n *     fill: '#000000',\n *     fontSize: '{hp}', // Will be resolved from object.hp\n *     opacity: '0.8'\n *   }\n * };\n * ```\n */\nconst getComponentStyle = (component) => {\n    if (!component.style) {\n        return {};\n    }\n\n    const style = component.style;\n    const result = {};\n\n    // Map fill to color (shortcut property)\n    // fill can be a string (hex color) or a dynamic string\n    if (style.fill !== undefined) {\n        if (typeof style.fill === 'string' && style.fill.includes('{')) {\n            result.color = parseDynamicValue(style.fill, object);\n        } else {\n            result.color = style.fill;\n        }\n    }\n\n    // Map fontSize to size (shortcut property)\n    // fontSize can be number or string (with dynamic references)\n    if (style.fontSize !== undefined) {\n        const fontSizeValue = parseNumericStyleValue(style.fontSize, object);\n        if (fontSizeValue !== undefined) {\n            result.size = fontSizeValue;\n        }\n    }\n\n    // Map fontFamily (shortcut property)\n    if (style.fontFamily !== undefined) {\n        if (typeof style.fontFamily === 'string' && style.fontFamily.includes('{')) {\n            result.fontFamily = parseDynamicValue(style.fontFamily, object);\n        } else {\n            result.fontFamily = style.fontFamily;\n        }\n    }\n\n    // Build style object for PixiJS Text properties\n    const textStyle = {};\n\n    // Font style properties\n    if (style.fontStyle !== undefined) {\n        if (typeof style.fontStyle === 'string' && style.fontStyle.includes('{')) {\n            textStyle.fontStyle = parseDynamicValue(style.fontStyle, object);\n        } else {\n            textStyle.fontStyle = style.fontStyle;\n        }\n    }\n\n    if (style.fontWeight !== undefined) {\n        if (typeof style.fontWeight === 'string' && style.fontWeight.includes('{')) {\n            textStyle.fontWeight = parseDynamicValue(style.fontWeight, object);\n        } else if (typeof style.fontWeight === 'number') {\n            textStyle.fontWeight = style.fontWeight;\n        } else {\n            textStyle.fontWeight = style.fontWeight;\n        }\n    }\n\n    // Stroke properties\n    if (style.stroke !== undefined) {\n        if (typeof style.stroke === 'string' && style.stroke.includes('{')) {\n            textStyle.stroke = parseDynamicValue(style.stroke, object);\n        } else {\n            textStyle.stroke = style.stroke;\n        }\n    }\n\n    // Opacity (can be number or string)\n    if (style.opacity !== undefined) {\n        const opacityValue = parseNumericStyleValue(style.opacity, object);\n        if (opacityValue !== undefined) {\n            textStyle.opacity = opacityValue;\n        }\n    }\n\n    // Word wrap\n    if (style.wordWrap !== undefined) {\n        textStyle.wordWrap = style.wordWrap;\n    }\n\n    // Text alignment\n    if (style.align !== undefined) {\n        if (typeof style.align === 'string' && style.align.includes('{')) {\n            textStyle.align = parseDynamicValue(style.align, object);\n        } else {\n            textStyle.align = style.align;\n        }\n    }\n\n    // Only add style prop if there are style properties\n    if (Object.keys(textStyle).length > 0) {\n        result.style = textStyle;\n    }\n\n    return result;\n}\n</script>"],"mappings":"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"}
+{"version":3,"file":"text.ce.js","names":[],"sources":["../../../src/components/dynamics/text.ce"],"sourcesContent":["<Text text={parseDynamicValue(component.value, object)} ...getComponentStyle(component) />\n\n<script>\nimport { computed } from \"canvasengine\";\nimport { parseDynamicValue } from \"./parse-value\";\n\nconst { object } = defineProps();\nconst component = object._component;\n\n/**\n * Parses a numeric style value that can be a number or a string\n * \n * If the value is a string, it may contain dynamic references like {hp}\n * which need to be parsed using parseDynamicValue. If it's a number,\n * it's returned as-is wrapped in a computed.\n * \n * @param value - Numeric value (number or string)\n * @param object - Object to resolve dynamic references from\n * @returns Computed signal with the numeric value\n */\nconst parseNumericStyleValue = (value, object) => {\n    if (value === undefined || value === null) {\n        return undefined;\n    }\n    \n    if (typeof value === 'number') {\n        return value;\n    }\n    \n    if (typeof value === 'string') {\n        // Check if it contains dynamic references\n        if (value.includes('{')) {\n            // Parse dynamic value and convert to number\n            const parsed = parseDynamicValue(value, object);\n            return computed(() => {\n                const str = parsed();\n                const num = parseFloat(str);\n                return isNaN(num) ? 0 : num;\n            });\n        } else {\n            // Simple string number, convert directly\n            const num = parseFloat(value);\n            return isNaN(num) ? undefined : num;\n        }\n    }\n    \n    return value;\n};\n\n/**\n * Maps component style properties to Canvas Engine Text component props\n * \n * Converts TextComponentOptions from the server to the format expected\n * by the Canvas Engine Text component. Supports all text styling properties\n * including fill, fontSize, fontFamily, fontStyle, fontWeight, stroke,\n * opacity, wordWrap, and align. Also supports dynamic values (number | string)\n * for numeric properties like fontSize and opacity.\n * \n * @param component - Component definition with style property\n * @returns Object with Text component props\n * \n * @example\n * ```ts\n * // Component with style\n * const component = {\n *   style: {\n *     fill: '#000000',\n *     fontSize: 20,\n *     fontFamily: 'Arial',\n *     fontWeight: 'bold'\n *   }\n * };\n * \n * const props = getComponentStyle(component);\n * // Returns: { color: '#000000', size: 20, fontFamily: 'Arial', style: { fontWeight: 'bold' } }\n * \n * // Component with dynamic fontSize\n * const component2 = {\n *   style: {\n *     fill: '#000000',\n *     fontSize: '{hp}', // Will be resolved from object.hp\n *     opacity: '0.8'\n *   }\n * };\n * ```\n */\nconst getComponentStyle = (component) => {\n    if (!component.style) {\n        return {};\n    }\n\n    const style = component.style;\n    const result = {};\n\n    // Map fill to color (shortcut property)\n    // fill can be a string (hex color) or a dynamic string\n    if (style.fill !== undefined) {\n        if (typeof style.fill === 'string' && style.fill.includes('{')) {\n            result.color = parseDynamicValue(style.fill, object);\n        } else {\n            result.color = style.fill;\n        }\n    }\n\n    // Map fontSize to size (shortcut property)\n    // fontSize can be number or string (with dynamic references)\n    if (style.fontSize !== undefined) {\n        const fontSizeValue = parseNumericStyleValue(style.fontSize, object);\n        if (fontSizeValue !== undefined) {\n            result.size = fontSizeValue;\n        }\n    }\n\n    // Map fontFamily (shortcut property)\n    if (style.fontFamily !== undefined) {\n        if (typeof style.fontFamily === 'string' && style.fontFamily.includes('{')) {\n            result.fontFamily = parseDynamicValue(style.fontFamily, object);\n        } else {\n            result.fontFamily = style.fontFamily;\n        }\n    }\n\n    // Build style object for PixiJS Text properties\n    const textStyle = {};\n\n    // Font style properties\n    if (style.fontStyle !== undefined) {\n        if (typeof style.fontStyle === 'string' && style.fontStyle.includes('{')) {\n            textStyle.fontStyle = parseDynamicValue(style.fontStyle, object);\n        } else {\n            textStyle.fontStyle = style.fontStyle;\n        }\n    }\n\n    if (style.fontWeight !== undefined) {\n        if (typeof style.fontWeight === 'string' && style.fontWeight.includes('{')) {\n            textStyle.fontWeight = parseDynamicValue(style.fontWeight, object);\n        } else if (typeof style.fontWeight === 'number') {\n            textStyle.fontWeight = style.fontWeight;\n        } else {\n            textStyle.fontWeight = style.fontWeight;\n        }\n    }\n\n    // Stroke properties\n    if (style.stroke !== undefined) {\n        if (typeof style.stroke === 'string' && style.stroke.includes('{')) {\n            textStyle.stroke = parseDynamicValue(style.stroke, object);\n        } else {\n            textStyle.stroke = style.stroke;\n        }\n    }\n\n    // Opacity (can be number or string)\n    if (style.opacity !== undefined) {\n        const opacityValue = parseNumericStyleValue(style.opacity, object);\n        if (opacityValue !== undefined) {\n            textStyle.opacity = opacityValue;\n        }\n    }\n\n    // Word wrap\n    if (style.wordWrap !== undefined) {\n        textStyle.wordWrap = style.wordWrap;\n    }\n\n    // Text alignment\n    if (style.align !== undefined) {\n        if (typeof style.align === 'string' && style.align.includes('{')) {\n            textStyle.align = parseDynamicValue(style.align, object);\n        } else {\n            textStyle.align = style.align;\n        }\n    }\n\n    // Only add style prop if there are style properties\n    if (Object.keys(textStyle).length > 0) {\n        result.style = textStyle;\n    }\n\n    return result;\n}\n</script>"],"mappings":";;;AAOM,SAAmB,UAAU,SAAA;;CAGhC,MAAS,EAAA,WADV,eAAA,QACmC,EAAG;CACxC,MAAE,YAAA,OAAA;CACF,MAAM,0BAA0B,OAAI,WAAQ;AACzC,MAAK,UAAS,KAAA,KAAU,UAAM,KACzB;AAEJ,MAAA,OAAW,UAAU,SACrB,QAAM;AAER,MAAA,OAAA,UAAA,SAEM,KAAA,MAAU,SAAS,IAAI,EAAA;GAE3B,MAAA,SAAA,kBAAA,OAAA,OAAA;AACD,UAAA,eAAA;IACY,MAAO,MAAI,QAAS;IACpB,MAAK,MAAA,WAAA,IAAA;AAChB,WAAA,MAAA,IAAA,GAAA,IAAA;KACD;SAEQ;GAEC,MAAG,MAAM,WAAc,MAAI;AAC3B,UAAM,MAAO,IAAE,GAAA,KAAA,IAAiB;;AAGxC,SAAO;;CAEX,MAAM,qBAAQ,cAAA;AACV,MAAI,CAAC,UAAM,MACP,QAAO,EAAA;EAEX,MAAM,QAAQ,UAAU;EACxB,MAAI,SAAA,EAAA;AAGJ,MAAA,MAAO,SAAK,KAAA,EACf,KAAA,OAAA,MAAA,SAAA,YAAA,MAAA,KAAA,SAAA,IAAA,CAAA,QAAA,QAAA,kBAAA,MAAA,MAAA,OAAA;MAIC,QAAA,QAAA,MAAA;AAKC,MAAI,MAAO,aAAY,KAAA,GAAK;GAC7B,MAAA,gBAAA,uBAAA,MAAA,UAAA,OAAA;AACE,OAAM,kBAAY,KAAA,EACV,QAAO,OAAK;;AAIpB,MAAE,MAAA,eAAe,KAAA,EACb,KAAC,OAAU,MAAE,eAAA,YAAA,MAAA,WAAA,SAAA,IAAA,CACT,QAAA,aAAA,kBAAA,MAAA,YAAA,OAAA;MAGL,QAAY,aAAO,MAAA;EAIxB,MAAA,YAAA,EAAA;AAEE,MAAE,MAAQ,cAAY,KAAA,EACxB,KAAA,OAAA,MAAA,cAAA,YAAA,MAAA,UAAA,SAAA,IAAA,CACI,WAAe,YAAQ,kBAAA,MAAA,WAAA,OAAA;MAGjB,WAAU,YAAA,MAAA;AAGlB,MAAC,MAAA,eAAA,KAAA,EACD,KAAA,OAAA,MAAA,eAAA,YAAA,MAAA,WAAA,SAAA,IAAA,CACC,WAAA,aAAA,kBAAA,MAAA,YAAA,OAAA;WAEC,OAAkB,MAAG,eAAc,SAChC,WAAU,aAAO,MAAA;;AAOtB,MAAG,MAAI,WAAc,KAAA,EAClB,KAAK,OAAO,MAAE,WAAY,YAAY,MAAQ,OAAA,SAAA,IAAA,CAC7C,WAAc,SAAC,kBAAW,MAAA,QAAA,OAAA;MAGxB,WAAK,SAAA,MAAA;;GAKR,MAAI,eAAkB,uBAAiB,MAAA,SAAA,OAAA;AACvC,OAAA,iBAAsB,KAAA,EACrB,WAAc,UAAK;;AAIvB,MAAI,MAAA,aAAA,KAAA,EACJ,WAAA,WAAA,MAAA;AAGA,MAAI,MAAM,UAAU,KAAA,EAChB,KAAI,OAAO,MAAM,UAAU,YAAY,MAAK,MAAM,SAAU,IAAC,CACzD,WAAO,QAAW,kBAAE,MAAkB,OAAM,OAAY;MAG5D,WAAA,QAAA,MAAA;AAIJ,MAAA,OAAM,KAAU,UAAI,CAAA,SAAA,EAAA,QAAA,QAAA;AAGpB,SAAI;;AAGA,QADI,EAAU,MAAA;EAAA,MAAY,eAAiB,kBAAkB,UAAO,OAAA,OAAA,CAAA;EAAA,GAAA,kBAAA,UAAA;EAAA,CAC7D"}

package/dist/components/gui/box.ce.js

@@ -5,13 +5,10 @@ import { Container, Rect, computed, h, useDefineProps, useProps } from "canvasen
 //#region src/components/gui/box.ce
 function component($$props) {
 	useProps($$props);
-	var _a = useDefineProps($$props)(), width = _a.width, height = _a.height, children = _a.children, color = _a.color, top = _a.top, left = _a.left;
-	var engine = inject(RpgClientEngine);
-	var child = children[0];
-	var _color = computed(function() {
-		var _a;
-		return ((_a = engine.globalConfig.gui) === null || _a === void 0 ? void 0 : _a.windowColor) || (color === null || color === void 0 ? void 0 : color()) || "#1a1a2e";
-	});
+	const { width, height, children, color, top, left } = useDefineProps($$props)();
+	const engine = inject(RpgClientEngine);
+	const child = children[0];
+	const _color = computed(() => engine.globalConfig.gui?.windowColor || color?.() || "#1a1a2e");
 	return h(Container, {
 		positionType: "absolute",
 		top,