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

package/dist/components/character.ce.js

@@ -1,146 +1,40 @@
 import { inject } from "../core/inject.js";
+import { getKeyboardControlBind, resolveKeyboardActionInput } from "../services/actionInput.js";
+import { getCanMoveValue } from "../utils/readPropValue.js";
 import { RpgGui } from "../Gui/Gui.js";
 import { RpgClientEngine } from "../RpgClientEngine.js";
-import { Container, Sprite, animatedSignal, computed, cond, h, loop, mount, on, signal, tick, useDefineProps, useProps } from "canvasengine";
-import { Particle } from "@canvasengine/presets";
-import { Direction, ModulesToken } from "@rpgjs/common";
+import __ce_component$1 from "./player-components.ce.js";
+import { Container, Sprite, animatedSignal, computed, cond, effect, h, loop, mount, on, signal, tick, useDefineProps, useProps } from "canvasengine";
+import { Animation, Direction, ModulesToken } from "@rpgjs/common";
 import { combineLatest, filter, lastValueFrom, map, pairwise, startWith } from "rxjs";
+import { Particle } from "@canvasengine/presets";
+import { Assets } from "pixi.js";
 //#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 sprite = object();
+	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;
+	const componentsBehind = client.spriteComponentsBehind;
+	const componentsInFront = client.spriteComponentsInFront;
+	const readProp = (value) => typeof value === "function" ? value() : value;
+	const isCurrentPlayer = () => {
+		const playerId = client.playerIdSignal();
+		const currentPlayer = playerId ? client.sceneMap?.players?.()?.[playerId] : void 0;
+		return readProp(id) === playerId || readProp(sprite?.id) === playerId || sprite === currentPlayer || sprite === client.sceneMap?.getCurrentPlayer?.();
+	};
+	const isMe = computed(isCurrentPlayer);
+	const shadowsEnabled = computed(() => {
+		const lighting = client.sceneMap?.lighting?.();
+		return Boolean(lighting?.shadows?.enabled || (lighting?.spots?.length ?? 0) > 0);
 	});
-	var normalizeComponent = function(comp) {
-		var componentRef;
-		var propsValue;
-		var dependenciesFn;
+	const normalizeComponent = (comp) => {
+		let componentRef;
+		let propsValue;
+		let dependenciesFn;
 		if (typeof comp === "function" || comp && typeof comp === "object" && !comp.component) {
 			componentRef = comp;
 			propsValue = void 0;
@@ -156,40 +50,37 @@ function component($$props) {
 		}
 		return {
 			component: componentRef,
-			props: typeof propsValue === "function" ? propsValue(object) : propsValue || {},
-			dependencies: dependenciesFn ? dependenciesFn(object) : []
+			props: typeof propsValue === "function" ? propsValue(sprite) : propsValue || {},
+			dependencies: dependenciesFn ? dependenciesFn(sprite) : []
 		};
 	};
-	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 } = sprite;
+	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,149 +89,413 @@ 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() {
-		if (object.isEvent()) return true;
+	const flashConfig = computed(() => ({
+		trigger: flashTrigger,
+		type: flashType(),
+		duration: flashDuration(),
+		cycles: flashCycles(),
+		alpha: flashAlpha(),
+		tint: flashTint()
+	}));
+	const particleSettings = client.particleSettings;
+	const canControls = () => isMe() && getCanMoveValue(sprite);
+	const keyboardControls = client.globalConfig.keyboardControls;
+	const visible = computed(() => {
+		if (sprite.isEvent()) return true;
 		return isConnected();
 	});
-	var controls = signal({
+	const controls = {
 		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() {
-				if (canControls()) client.processAction({ action: "action" });
+			bind: getKeyboardControlBind(keyboardControls.action),
+			keyDown() {
+				if (canControls()) client.processAction(resolveKeyboardActionInput(keyboardControls.action, client, sprite));
 			}
 		},
 		escape: {
 			bind: keyboardControls.escape,
-			keyDown: function() {
+			keyDown() {
 				if (canControls()) client.processAction({ action: "escape" });
 			}
 		},
 		gamepad: { enabled: true }
+	};
+	const smoothX = animatedSignal(x(), { duration: isMe() ? 0 : 0 });
+	const smoothY = animatedSignal(y(), { duration: isMe() ? 0 : 0 });
+	const z = computed(() => {
+		return sprite.y() + sprite.z();
 	});
-	var smoothX = animatedSignal(x(), { duration: isMe() ? 0 : 0 });
-	var smoothY = animatedSignal(y(), { duration: isMe() ? 0 : 0 });
-	var z = computed(function() {
-		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 graphicScale = (graphicObject) => {
+		const scale = graphicObject?.scale;
+		if (Array.isArray(scale)) return scale;
+		if (typeof scale === "number") return [scale, scale];
+		if (scale && typeof scale === "object") {
+			const x = typeof scale.x === "number" ? scale.x : 1;
+			return [x, typeof scale.y === "number" ? scale.y : x];
+		}
+	};
+	const shadowCaster = (graphicObject) => {
+		const box = hitbox();
+		const bounds = graphicBounds();
+		const scale = graphicScale(graphicObject);
+		const scaleY = Array.isArray(scale) && typeof scale[1] === "number" ? Math.abs(scale[1]) : 1;
+		const height = Math.max(bounds?.height ?? box?.h ?? 32, box?.h ?? 32) * scaleY;
+		return {
+			enabled: shadowsEnabled,
+			height,
+			footAnchor: {
+				x: .5,
+				y: 1
+			},
+			footOffset: {
+				x: 0,
+				y: 2
+			},
+			alpha: .5,
+			blur: 3.5,
+			gradientPower: 2,
+			hardness: .42,
+			minLength: Math.max(6, (box?.h ?? 32) * .25),
+			maxLength: Math.max(90, height * 1.8),
+			contactAlpha: .3,
+			contactScale: .3
+		};
+	};
+	const imageDimensions = signal({});
+	const loadingImageDimensions = /* @__PURE__ */ new Set();
+	const toPositiveNumber = (value) => {
+		const number = typeof value === "number" ? value : parseFloat(value);
+		return Number.isFinite(number) && number > 0 ? number : void 0;
+	};
+	const toFiniteNumber = (value, fallback = 0) => {
+		const number = typeof value === "number" ? value : parseFloat(value);
+		return Number.isFinite(number) ? number : fallback;
+	};
+	const clampRatio = (value) => Math.min(1, Math.max(0, value));
+	const normalizePair = (value, fallback = [1, 1]) => {
+		if (Array.isArray(value)) {
+			const x = toFiniteNumber(value[0], fallback[0]);
+			return [x, toFiniteNumber(value[1] ?? value[0], x)];
+		}
+		if (typeof value === "number") return [value, value];
+		if (value && typeof value === "object") {
+			const x = toFiniteNumber(value.x, fallback[0]);
+			return [x, toFiniteNumber(value.y ?? value.x, x)];
+		}
+		return fallback;
+	};
+	const normalizeAnchor = (value) => {
+		if (!Array.isArray(value)) return void 0;
+		const [x, y] = normalizePair(value, [0, 0]);
+		return [clampRatio(x), clampRatio(y)];
+	};
+	const resolveImageSource = (image) => {
+		if (typeof image === "string") return image;
+		if (typeof image?.default === "string") return image.default;
+	};
+	const parentTextureOptions = (graphicObject) => {
+		return [
+			"width",
+			"height",
+			"framesHeight",
+			"framesWidth",
+			"rectWidth",
+			"rectHeight",
+			"offset",
+			"image",
+			"sound",
+			"spriteRealSize",
+			"scale",
+			"anchor",
+			"pivot",
+			"x",
+			"y",
+			"opacity"
+		].reduce((options, prop) => {
+			if (graphicObject?.[prop] !== void 0) options[prop] = graphicObject[prop];
+			return options;
+		}, {});
+	};
+	const resolveTextureOptions = (graphicObject) => {
+		const textures = graphicObject?.textures ?? {};
+		const texture = textures[realAnimationName()] ?? textures[Animation.Stand] ?? Object.values(textures)[0] ?? {};
+		return {
+			...parentTextureOptions(graphicObject),
+			...texture
+		};
+	};
+	const resolveFirstAnimationFrame = (textureOptions) => {
+		const animations = textureOptions?.animations;
+		if (!animations) return {};
+		try {
+			const frames = typeof animations === "function" ? animations({ direction: direction() }) : animations;
+			if (!Array.isArray(frames)) return {};
+			const firstGroup = frames[0];
+			return Array.isArray(firstGroup) ? firstGroup[0] ?? {} : firstGroup ?? {};
+		} catch {
+			return {};
+		}
+	};
+	const optionValue = (prop, frame, textureOptions, graphicObject) => {
+		return frame?.[prop] ?? textureOptions?.[prop] ?? graphicObject?.[prop];
+	};
+	const resolveFrameSize = (textureOptions, dimensions) => {
+		const framesWidth = toPositiveNumber(textureOptions?.framesWidth) ?? 1;
+		const framesHeight = toPositiveNumber(textureOptions?.framesHeight) ?? 1;
+		const imageSource = resolveImageSource(textureOptions?.image);
+		const loadedSize = imageSource ? dimensions[imageSource] : void 0;
+		const fullWidth = toPositiveNumber(textureOptions?.width) ?? loadedSize?.width;
+		const fullHeight = toPositiveNumber(textureOptions?.height) ?? loadedSize?.height;
+		return {
+			width: toPositiveNumber(textureOptions?.rectWidth) ?? toPositiveNumber(textureOptions?.spriteWidth) ?? (fullWidth ? fullWidth / framesWidth : void 0),
+			height: toPositiveNumber(textureOptions?.rectHeight) ?? toPositiveNumber(textureOptions?.spriteHeight) ?? (fullHeight ? fullHeight / framesHeight : void 0)
+		};
+	};
+	const resolveHitboxAnchor = (spriteWidth, spriteHeight, realSize, box) => {
+		if (!spriteWidth || !spriteHeight || !box) return [0, 0];
+		const resolvedHeight = toPositiveNumber(typeof realSize === "number" ? realSize : realSize?.height) ?? spriteHeight;
+		const gap = Math.max(0, (spriteHeight - resolvedHeight) / 2);
+		const hitboxTopLeftX = clampRatio((spriteWidth - box.w) / 2 / spriteWidth);
+		const hitboxTopLeftY = clampRatio((spriteHeight - box.h - gap) / spriteHeight);
+		const hitboxCenterX = clampRatio(hitboxTopLeftX + box.w / 2 / spriteWidth);
+		const hitboxCenterY = clampRatio(hitboxTopLeftY + box.h / 2 / spriteHeight);
+		const footY = clampRatio((spriteHeight - gap) / spriteHeight);
+		switch (box.anchorMode ?? "top-left") {
+			case "center": return [hitboxCenterX, hitboxCenterY];
+			case "foot": return [hitboxCenterX, footY];
+			default: return [hitboxTopLeftX, hitboxTopLeftY];
+		}
+	};
+	const loadImageDimensions = (image) => {
+		const source = resolveImageSource(image);
+		if (!source || imageDimensions()[source] || loadingImageDimensions.has(source)) return;
+		loadingImageDimensions.add(source);
+		Assets.load(source).then((texture) => {
+			const width = toPositiveNumber(texture?.width);
+			const height = toPositiveNumber(texture?.height);
+			if (!width || !height) return;
+			imageDimensions.update((dimensions) => ({
+				...dimensions,
+				[source]: {
+					width,
+					height
+				}
+			}));
+		}).catch(() => {}).finally(() => {
+			loadingImageDimensions.delete(source);
+		});
+	};
+	effect(() => {
+		const sources = /* @__PURE__ */ new Set();
+		graphicsSignals().forEach((graphicObject) => {
+			const baseImage = resolveImageSource(graphicObject?.image);
+			if (baseImage) sources.add(baseImage);
+			Object.values(graphicObject?.textures ?? {}).forEach((textureOptions) => {
+				const image = resolveImageSource(textureOptions?.image ?? graphicObject?.image);
+				if (image) sources.add(image);
+			});
+		});
+		sources.forEach((source) => loadImageDimensions(source));
+	});
+	const hitboxBounds = computed(() => {
+		const box = hitbox();
+		const width = box?.w ?? 0;
+		const height = box?.h ?? 0;
+		return {
+			left: 0,
+			top: 0,
+			right: width,
+			bottom: height,
+			width,
+			height,
+			centerX: width / 2,
+			centerY: height / 2
+		};
+	});
+	const graphicBounds = computed(() => {
+		const box = hitbox();
+		const fallback = hitboxBounds();
+		const dimensions = imageDimensions();
+		const graphics = graphicsSignals();
+		let bounds = null;
+		graphics.forEach((graphicObject) => {
+			const textureOptions = resolveTextureOptions(graphicObject);
+			const frame = resolveFirstAnimationFrame(textureOptions);
+			const size = resolveFrameSize(textureOptions, dimensions);
+			const spriteWidth = size.width ?? box?.w;
+			const spriteHeight = size.height ?? box?.h;
+			if (!spriteWidth || !spriteHeight) return;
+			const anchor = normalizeAnchor(optionValue("anchor", frame, textureOptions, graphicObject)) ?? resolveHitboxAnchor(spriteWidth, spriteHeight, optionValue("spriteRealSize", frame, textureOptions, graphicObject), box);
+			const scale = normalizePair(optionValue("scale", frame, textureOptions, graphicObject) ?? graphicScale(graphicObject));
+			const x = toFiniteNumber(optionValue("x", frame, textureOptions, graphicObject), 0);
+			const y = toFiniteNumber(optionValue("y", frame, textureOptions, graphicObject), 0);
+			const leftEdge = -anchor[0] * spriteWidth * scale[0];
+			const rightEdge = (1 - anchor[0]) * spriteWidth * scale[0];
+			const topEdge = -anchor[1] * spriteHeight * scale[1];
+			const bottomEdge = (1 - anchor[1]) * spriteHeight * scale[1];
+			const graphic = {
+				left: x + Math.min(leftEdge, rightEdge),
+				top: y + Math.min(topEdge, bottomEdge),
+				right: x + Math.max(leftEdge, rightEdge),
+				bottom: y + Math.max(topEdge, bottomEdge)
+			};
+			bounds = bounds ? {
+				left: Math.min(bounds.left, graphic.left),
+				top: Math.min(bounds.top, graphic.top),
+				right: Math.max(bounds.right, graphic.right),
+				bottom: Math.max(bounds.bottom, graphic.bottom)
+			} : graphic;
+		});
+		if (!bounds) return fallback;
+		const width = bounds.right - bounds.left;
+		const height = bounds.bottom - bounds.top;
+		return {
+			...bounds,
+			width,
+			height,
+			centerX: bounds.left + width / 2,
+			centerY: bounds.top + height / 2
+		};
+	});
+	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 animationChange$ = animationName$.pipe(startWith(animationName()), pairwise(), filter(([prev, curr]) => prev !== curr));
+	let beforeRemovePromise = null;
+	let beforeRemoveTransitionValue = null;
+	const resolveRemoveContext = () => {
+		if (!sprite._removeTransition) return null;
+		const value = sprite._removeTransition();
+		if (!value || typeof value !== "string") return null;
+		try {
+			const context = JSON.parse(value);
+			if (!context || typeof context !== "object" || !context.active) return null;
+			context.__transitionValue = value;
+			return context;
+		} catch {
+			return null;
+		}
+	};
+	const withTimeout = (promise, timeoutMs = 0) => {
+		if (!timeoutMs || timeoutMs <= 0) return promise;
+		return Promise.race([promise, new Promise((resolve) => setTimeout(resolve, timeoutMs))]);
+	};
+	const runBeforeRemove = () => {
+		const context = resolveRemoveContext();
+		if (!context) return Promise.resolve();
+		if (beforeRemovePromise && beforeRemoveTransitionValue === context.__transitionValue) return beforeRemovePromise;
+		beforeRemoveTransitionValue = context.__transitionValue;
+		beforeRemovePromise = withTimeout(lastValueFrom(hooks.callHooks("client-sprite-onBeforeRemove", sprite, context)), context.timeoutMs);
+		return beforeRemovePromise;
+	};
+	const removeTransitionSubscription = sprite._removeTransition?.observable?.subscribe(() => {
+		if (resolveRemoveContext()) runBeforeRemove();
+	});
+	const animationMovementSubscription = combineLatest([animationChange$, 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);
-		if (!isMoving && object.animationIsPlaying && object.animationIsPlaying()) {
+		if (!isMoving && sprite.animationIsPlaying && sprite.animationIsPlaying()) {
 			if (movementAnimations.includes(curr)) {
-				if (typeof object.resetAnimationState === "function") object.resetAnimationState();
+				if (typeof sprite.resetAnimationState === "function") sprite.resetAnimationState();
 			}
 		}
 	});
-	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 waitForTemporaryAnimationEnd = (maxDuration = 1200) => {
+		if (!sprite.animationIsPlaying || !sprite.animationIsPlaying()) return Promise.resolve();
+		return new Promise((resolve) => {
+			let finished = false;
+			let timeout;
+			let subscription;
+			const finish = () => {
+				if (finished) return;
+				finished = true;
+				clearTimeout(timeout);
+				subscription?.unsubscribe();
+				resolve();
+			};
+			timeout = setTimeout(finish, maxDuration);
+			subscription = sprite.animationIsPlaying.observable.subscribe((isPlaying) => {
+				if (!isPlaying) finish();
 			});
+			if (finished) subscription.unsubscribe();
 		});
 	};
-	mount(function(element) {
-		hooks.callHooks("client-sprite-onAdd", object).subscribe();
-		hooks.callHooks("client-sceneMap-onAddSprite", client.sceneMap, object).subscribe();
-		if (isMe()) client.setKeyboardControls(element.directives.controls);
+	const onBeforeDestroy = async () => {
+		await runBeforeRemove();
+		await waitForTemporaryAnimationEnd();
+		removeTransitionSubscription?.unsubscribe();
+		animationMovementSubscription.unsubscribe();
+		xSubscription.unsubscribe();
+		ySubscription.unsubscribe();
+		await lastValueFrom(hooks.callHooks("client-sprite-onDestroy", sprite));
+		await lastValueFrom(hooks.callHooks("client-sceneMap-onRemoveSprite", client.sceneMap, sprite));
+	};
+	mount((element) => {
+		hooks.callHooks("client-sprite-onAdd", sprite).subscribe();
+		hooks.callHooks("client-sceneMap-onAddSprite", client.sceneMap, sprite).subscribe();
+		effect(() => {
+			if (isCurrentPlayer()) 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, {
@@ -353,30 +508,56 @@ function component($$props) {
 		visible
 	}, [
 		loop(normalizedComponentsBehind, (compConfig) => h(Container, null, h(compConfig.component, {
-			object,
+			object: sprite,
 			...compConfig.props
 		}))),
+		h(__ce_component$1, {
+			object: sprite,
+			position: "bottom",
+			graphicBounds
+		}),
+		h(__ce_component$1, {
+			object: sprite,
+			position: "left",
+			graphicBounds
+		}),
 		h(Particle, {
 			emit: emitParticleTrigger,
 			settings: particleSettings,
 			zIndex: 1e3,
 			name: particleName
 		}),
-		h(Container, null, loop(graphicsSignals, (graphicObj) => h(Sprite, {
+		h(Container, null, loop(graphicsSignals, (graphicObj) => h(Container, { scale: computed(() => graphicScale(graphicObj)) }, h(Sprite, {
 			sheet: computed(() => sheet(graphicObj)),
 			direction,
 			tint,
 			hitbox,
+			shadowCaster: computed(() => shadowCaster(graphicObj)),
 			flash: flashConfig
-		}))),
+		})))),
+		h(__ce_component$1, {
+			object: sprite,
+			position: "center",
+			graphicBounds
+		}),
+		h(__ce_component$1, {
+			object: sprite,
+			position: "right",
+			graphicBounds
+		}),
+		h(__ce_component$1, {
+			object: sprite,
+			position: "top",
+			graphicBounds
+		}),
 		loop(normalizedComponentsInFront, (compConfig) => h(Container, { dependencies: compConfig.dependencies }, h(compConfig.component, {
-			object,
+			object: sprite,
 			...compConfig.props
 		}))),
 		loop(attachedGuis, (attachedGui) => cond(shouldDisplayAttachedGui, () => h(Container, null, h(attachedGui.component, {
 			...attachedGui.data(),
 			dependencies: attachedGui.dependencies,
-			object,
+			object: sprite,
 			onFinish: (data) => {
 				onAttachedGuiFinish(attachedGui, data);
 			},
@@ -386,7 +567,8 @@ function component($$props) {
 		}))))
 	]);
 }
+var __ce_component = component;
 //#endregion
-export { component as default };
+export { __ce_component as default };
 
 //# sourceMappingURL=character.ce.js.map