@rpgjs/client 5.0.0-beta.2 → 5.0.0-beta.22

package/dist/components/character.ce.js

@@ -1,146 +1,45 @@
 import { inject } from "../core/inject.js";
+import { getKeyboardControlBind, keyboardEventMatchesBind, resolveKeyboardActionInput, resolveKeyboardDirectionInput } from "../services/actionInput.js";
+import { getCanMoveValue } from "../utils/readPropValue.js";
 import { RpgGui } from "../Gui/Gui.js";
+import { normalizeEventComponent } from "../Game/EventComponentResolver.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 { applyCameraFollow, clearCameraFollowPlugins, ownsCameraFollowRevision } from "../services/cameraFollow.js";
+import __ce_component$1 from "./player-components.ce.js";
+import __ce_component$2 from "./interaction-components.ce.js";
+import { Container, Sprite, animatedSignal, computed, cond, effect, h, loop, mount, on, signal, tick, useDefineEmits, useDefineProps, useProps } from "canvasengine";
+import { Animation, Direction, ModulesToken, shouldRenderLightingShadows } 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);
+	useDefineEmits($$props);
+	const { object, id } = defineProps();
+	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 shouldRenderLightingShadows(lighting);
 	});
-	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 +55,50 @@ 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 isEventSprite = () => {
+		return typeof sprite?.isEvent === "function" ? sprite.isEvent() : sprite?._type === "event";
+	};
+	const resolvedEventComponents = computed(() => {
+		if (!isEventSprite()) return [];
+		const eventComponent = normalizeEventComponent(client.resolveEventComponent(sprite), sprite);
+		return eventComponent ? [eventComponent] : [];
+	});
+	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 renderedGraphics = computed(() => {
+		const eventComponent = resolvedEventComponents()[0];
+		if (eventComponent && !eventComponent.renderGraphic) return [];
+		return graphicsSignals();
+	});
+	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,187 +107,776 @@ function component($$props) {
 			if (data.tint !== void 0) flashTint.set(data.tint);
 		}
 	});
-	var flashConfig = computed(function() {
+	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 activeDirectionKeys = /* @__PURE__ */ new Map();
+	const activeControlDirections = /* @__PURE__ */ new Map();
+	const activeControlDirectionReleaseTimers = /* @__PURE__ */ new Map();
+	const CONTROL_DIRECTION_RELEASE_GRACE_MS = 160;
+	const hasHeldDirection = () => activeDirectionKeys.size > 0 || activeControlDirections.size > 0;
+	const publishMobileDebug = (type, payload = {}) => {
+		const target = typeof window !== "undefined" ? window : globalThis;
+		if (!target.__RPGJS_MOBILE_DEBUG__) return;
+		const event = {
+			source: "character",
+			type,
+			time: Date.now(),
+			isCurrentPlayer: isCurrentPlayer(),
+			animationName: animationName(),
+			realAnimationName: realAnimationName?.(),
+			activeKeyboardDirections: Array.from(activeDirectionKeys.values()),
+			activeControlDirections: Array.from(activeControlDirections.values()),
+			heldDirection: resolveHeldDirection(),
+			canControls: canControls(),
+			x: x(),
+			y: y(),
+			...payload
+		};
+		target.__RPGJS_MOBILE_DEBUG_EVENTS__ = [...(target.__RPGJS_MOBILE_DEBUG_EVENTS__ || []).slice(-199), event];
+		target.__RPGJS_MOBILE_DEBUG_LAST__ = event;
+	};
+	const resolveHeldDirection = () => {
+		const directions = [...Array.from(activeDirectionKeys.values()), ...Array.from(activeControlDirections.values())];
+		return directions[directions.length - 1];
+	};
+	const resolveSpriteDirection = () => {
+		const heldDirection = resolveHeldDirection();
+		if (heldDirection) return heldDirection;
+		if (typeof sprite.getDirection === "function") return sprite.getDirection();
+		if (typeof sprite.direction === "function") return sprite.direction();
+		return direction();
+	};
+	const directionToDashVector = (currentDirection) => {
+		switch (currentDirection) {
+			case Direction.Left: return {
+				x: -1,
+				y: 0
+			};
+			case Direction.Right: return {
+				x: 1,
+				y: 0
+			};
+			case Direction.Up: return {
+				x: 0,
+				y: -1
+			};
+			case Direction.Down:
+			default: return {
+				x: 0,
+				y: 1
+			};
+		}
+	};
+	const withCurrentDirection = (payload) => {
+		if (payload.action !== "action") return payload;
+		const data = payload.data && typeof payload.data === "object" ? { ...payload.data } : {};
 		return {
-			trigger: flashTrigger,
-			type: flashType(),
-			duration: flashDuration(),
-			cycles: flashCycles(),
-			alpha: flashAlpha(),
-			tint: flashTint()
+			...payload,
+			data: {
+				...data,
+				direction: data.direction ?? resolveSpriteDirection()
+			}
 		};
-	});
-	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 resolveCurrentActionInput = () => withCurrentDirection(resolveKeyboardActionInput(keyboardControls.action, client, sprite));
+	const playPredictedWalkAnimation = () => {
+		if (sprite.animationFixed) {
+			publishMobileDebug("walk:skip", { reason: "animationFixed" });
+			return;
+		}
+		if (sprite.animationIsPlaying && sprite.animationIsPlaying()) {
+			publishMobileDebug("walk:skip", { reason: "animationIsPlaying" });
+			return;
+		}
+		realAnimationName.set("walk");
+		publishMobileDebug("walk:set", { reason: "predicted" });
+	};
+	const resumeHeldDirectionWalkAnimation = () => {
+		if (!isCurrentPlayer()) {
+			publishMobileDebug("walk:resume-fail", { reason: "notCurrentPlayer" });
+			return false;
+		}
+		if (!hasHeldDirection()) {
+			publishMobileDebug("walk:resume-fail", { reason: "noHeldDirection" });
+			return false;
+		}
+		if (!canControls()) {
+			publishMobileDebug("walk:resume-fail", { reason: "cannotControl" });
+			return false;
+		}
+		if (sprite.animationFixed) {
+			publishMobileDebug("walk:resume-fail", { reason: "animationFixed" });
+			return false;
+		}
+		if (sprite.animationIsPlaying && sprite.animationIsPlaying()) {
+			publishMobileDebug("walk:resume-fail", { reason: "animationIsPlaying" });
+			return false;
+		}
+		realAnimationName.set("walk");
+		publishMobileDebug("walk:set", { reason: "resumeHeldDirection" });
+		return true;
+	};
+	const processMovementInput = (input) => {
+		if (!canControls()) return;
+		publishMobileDebug("movement:input", { input });
+		client.processInput({ input });
+		playPredictedWalkAnimation();
+	};
+	const activateControlDirection = (name, directionInput) => {
+		const releaseTimer = activeControlDirectionReleaseTimers.get(name);
+		if (releaseTimer) {
+			clearTimeout(releaseTimer);
+			activeControlDirectionReleaseTimers.delete(name);
+		}
+		activeControlDirections.delete(name);
+		activeControlDirections.set(name, directionInput);
+		publishMobileDebug("control:activate", {
+			name,
+			directionInput
+		});
+		resumeHeldDirectionWalkAnimation();
+	};
+	const releaseControlDirection = (name) => {
+		const previousTimer = activeControlDirectionReleaseTimers.get(name);
+		if (previousTimer) clearTimeout(previousTimer);
+		activeControlDirectionReleaseTimers.set(name, setTimeout(() => {
+			activeControlDirectionReleaseTimers.delete(name);
+			activeControlDirections.delete(name);
+			publishMobileDebug("control:release", { name });
+			if (!hasHeldDirection() && animationName() === "stand") {
+				realAnimationName.set("stand");
+				publishMobileDebug("stand:set", { reason: "controlRelease" });
+			}
+		}, CONTROL_DIRECTION_RELEASE_GRACE_MS));
+	};
+	const processDashInput = () => {
+		if (!canControls()) return;
+		client.processDash({ direction: directionToDashVector(resolveSpriteDirection()) });
+	};
+	const actionBind = () => getKeyboardControlBind(keyboardControls.action);
+	const keyboardEventId = (event) => `${event.keyCode}:${event.code}:${event.key}`;
+	const handleNativeActionWhileMoving = (event) => {
+		const inputDirection = resolveKeyboardDirectionInput(event, keyboardControls);
+		if (inputDirection) {
+			const keyId = keyboardEventId(event);
+			if (event.type === "keydown") {
+				activeDirectionKeys.delete(keyId);
+				activeDirectionKeys.set(keyId, inputDirection);
+				resumeHeldDirectionWalkAnimation();
+			} else activeDirectionKeys.delete(keyId);
+		}
+		if (!isCurrentPlayer()) return;
+		if (event.type !== "keydown" || event.repeat) return;
+		if (activeDirectionKeys.size === 0) return;
+		if (!keyboardEventMatchesBind(event, actionBind())) return;
+		if (!canControls()) return;
+		client.processAction(resolveCurrentActionInput());
+	};
+	const visible = computed(() => {
+		if (sprite.isEvent()) return true;
 		return isConnected();
 	});
-	var controls = signal({
+	const controls = {
 		down: {
 			repeat: true,
 			bind: keyboardControls.down,
-			keyDown: function() {
-				if (canControls()) client.processInput({ input: Direction.Down });
+			keyDown() {
+				activateControlDirection("down", Direction.Down);
+				processMovementInput(Direction.Down);
+			},
+			keyUp() {
+				releaseControlDirection("down");
 			}
 		},
 		up: {
 			repeat: true,
 			bind: keyboardControls.up,
-			keyDown: function() {
-				if (canControls()) client.processInput({ input: Direction.Up });
+			keyDown() {
+				activateControlDirection("up", Direction.Up);
+				processMovementInput(Direction.Up);
+			},
+			keyUp() {
+				releaseControlDirection("up");
 			}
 		},
 		left: {
 			repeat: true,
 			bind: keyboardControls.left,
-			keyDown: function() {
-				if (canControls()) client.processInput({ input: Direction.Left });
+			keyDown() {
+				activateControlDirection("left", Direction.Left);
+				processMovementInput(Direction.Left);
+			},
+			keyUp() {
+				releaseControlDirection("left");
 			}
 		},
 		right: {
 			repeat: true,
 			bind: keyboardControls.right,
-			keyDown: function() {
-				if (canControls()) client.processInput({ input: Direction.Right });
+			keyDown() {
+				activateControlDirection("right", Direction.Right);
+				processMovementInput(Direction.Right);
+			},
+			keyUp() {
+				releaseControlDirection("right");
 			}
 		},
 		action: {
-			bind: keyboardControls.action,
-			keyDown: function() {
-				if (canControls()) client.processAction({ action: "action" });
+			bind: getKeyboardControlBind(keyboardControls.action),
+			keyDown() {
+				if (canControls()) client.processAction(resolveCurrentActionInput());
+			}
+		},
+		dash: {
+			bind: keyboardControls.dash,
+			keyDown() {
+				processDashInput();
+			}
+		},
+		back: {
+			bind: keyboardControls.escape,
+			keyDown() {
+				if (canControls()) client.processAction({ action: "escape" });
 			}
 		},
 		escape: {
 			bind: keyboardControls.escape,
-			keyDown: function() {
+			keyDown() {
 				if (canControls()) client.processAction({ action: "escape" });
 			}
 		},
+		joystick: {
+			enabled: true,
+			directionMapping: {
+				top: "up",
+				bottom: "down",
+				left: "left",
+				right: "right",
+				top_left: ["up", "left"],
+				top_right: ["up", "right"],
+				bottom_left: ["down", "left"],
+				bottom_right: ["down", "right"]
+			},
+			moveInterval: 50,
+			threshold: .1
+		},
 		gamepad: { enabled: true }
+	};
+	const smoothX = animatedSignal(x(), { duration: isMe() ? 0 : 0 });
+	const smoothY = animatedSignal(y(), { duration: isMe() ? 0 : 0 });
+	const z = computed(() => {
+		const box = hitbox?.();
+		return sprite.y() + (box?.h ?? 0) + 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?.displayScale ?? 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 customEventComponent = resolvedEventComponents()[0];
+		if (customEventComponent && !customEventComponent.renderGraphic) return fallback;
+		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 interactionBounds = () => ({
+		bounds: graphicBounds(),
+		hitbox: hitboxBounds(),
+		graphic: graphicBounds()
+	});
+	const interactionCursor = computed(() => client.interactions.cursorFor(sprite, interactionBounds()));
+	const handleInteraction = (type) => (event) => {
+		client.updatePointerFromInteractionEvent(event);
+		client.interactions.handle(sprite, type, {
+			event,
+			bounds: interactionBounds()
+		});
+	};
+	const interactionPointerOver = handleInteraction("pointerover");
+	const interactionPointerOut = handleInteraction("pointerout");
+	const interactionPointerDown = handleInteraction("pointerdown");
+	const interactionPointerUp = handleInteraction("pointerup");
+	const interactionPointerMove = handleInteraction("pointermove");
+	const interactionClick = handleInteraction("click");
+	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];
-		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 (movementAnimations.includes(curr)) {
-				if (typeof object.resetAnimationState === "function") object.resetAnimationState();
+	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]) => {
+		const isMovementAnimation = movementAnimations.includes(curr);
+		const isTemporaryAnimationPlaying = sprite.animationIsPlaying && sprite.animationIsPlaying();
+		if (sprite.animationFixed && isMovementAnimation) {
+			realAnimationName.set(curr);
+			return;
+		}
+		if (curr == "stand" && !isMoving) {
+			if (!resumeHeldDirectionWalkAnimation()) realAnimationName.set(curr);
+		} else if (curr == "walk" && isMoving) realAnimationName.set(curr);
+		else if (!isMovementAnimation) realAnimationName.set(curr);
+		if (!isMoving && isTemporaryAnimationPlaying) {
+			if (isMovementAnimation) {
+				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 resumeWalkSubscriptions = [
+		sprite._canMove,
+		sprite._animationFixed,
+		sprite.animationIsPlaying
+	].filter((signal) => signal?.observable).map((signal) => signal.observable.subscribe(() => {
+		resumeHeldDirectionWalkAnimation();
+	}));
+	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();
+		if (typeof document !== "undefined") {
+			document.removeEventListener("keydown", handleNativeActionWhileMoving);
+			document.removeEventListener("keyup", handleNativeActionWhileMoving);
+		}
+		removeTransitionSubscription?.unsubscribe();
+		animationMovementSubscription.unsubscribe();
+		resumeWalkSubscriptions.forEach((subscription) => subscription.unsubscribe());
+		activeControlDirectionReleaseTimers.forEach((timer) => clearTimeout(timer));
+		activeControlDirectionReleaseTimers.clear();
+		xSubscription.unsubscribe();
+		ySubscription.unsubscribe();
+		await lastValueFrom(hooks.callHooks("client-sprite-onDestroy", sprite));
+		await lastValueFrom(hooks.callHooks("client-sceneMap-onRemoveSprite", client.sceneMap, sprite));
+	};
+	mount((element) => {
+		let appliedCameraFollowRevision = null;
+		if (typeof document !== "undefined") {
+			document.addEventListener("keydown", handleNativeActionWhileMoving);
+			document.addEventListener("keyup", handleNativeActionWhileMoving);
+		}
+		hooks.callHooks("client-sprite-onAdd", sprite).subscribe();
+		hooks.callHooks("client-sceneMap-onAddSprite", client.sceneMap, sprite).subscribe();
+		effect(() => {
+			if (isCurrentPlayer()) client.setKeyboardControls(element.directives.controls);
+		});
+		effect(() => {
+			const followRevision = client.cameraFollowRevision();
+			if (!shouldFollowCamera()) {
+				appliedCameraFollowRevision = null;
+				return;
+			}
+			const smoothMove = client.cameraFollowSmoothMove;
+			const viewport = element.props.context?.viewport;
+			const target = element.componentInstance;
+			if (!viewport || !target) {
+				appliedCameraFollowRevision = null;
+				return;
+			}
+			appliedCameraFollowRevision = applyCameraFollow({
+				viewport,
+				target,
+				smoothMove,
+				followRevision,
+				isCurrentRevision: (revision) => client.cameraFollowRevision() === revision,
+				shouldFollowCamera
+			}) ? followRevision : null;
+		});
+		return () => {
+			if (ownsCameraFollowRevision(appliedCameraFollowRevision, client.cameraFollowRevision())) clearCameraFollowPlugins(element.props.context?.viewport);
+		};
 	});
-	var onAttachedGuiFinish = function(gui, data) {
-		guiService.guiClose(gui.name, data);
+	const normalizeOpenId = (value) => {
+		const resolved = typeof value === "function" ? value() : value;
+		return typeof resolved === "string" && resolved.length > 0 ? resolved : void 0;
 	};
-	var onAttachedGuiInteraction = function(gui, name, data) {
+	const onAttachedGuiFinish = (gui, data, guiOpenId) => {
+		const completedOpenId = normalizeOpenId(guiOpenId);
+		const currentOpenId = normalizeOpenId(gui.openId);
+		if (completedOpenId && currentOpenId && completedOpenId !== currentOpenId) return;
+		guiService.guiClose(gui.name, data, completedOpenId ?? currentOpenId);
+	};
+	const onAttachedGuiInteraction = (gui, name, data) => {
 		guiService.guiInteraction(gui.name, name, data);
 	};
-	tick(function() {
+	tick(() => {
 		hooks.callHooks("client-sprite-onUpdate").subscribe();
 	});
 	return h(Container, {
 		x: smoothX,
 		y: smoothY,
 		zIndex: z,
-		viewportFollow: shouldFollowCamera,
 		controls,
 		onBeforeDestroy,
-		visible
+		visible,
+		cursor: interactionCursor,
+		pointerover: interactionPointerOver,
+		pointerout: interactionPointerOut,
+		pointerdown: interactionPointerDown,
+		pointerup: interactionPointerUp,
+		pointermove: interactionPointerMove,
+		click: interactionClick
 	}, [
 		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(renderedGraphics, (graphicObj) => h(Container, { scale: computed(() => graphicScale(graphicObj)) }, h(Sprite, {
 			sheet: computed(() => sheet(graphicObj)),
 			direction,
 			tint,
 			hitbox,
+			shadowCaster: computed(() => shadowCaster(graphicObj)),
 			flash: flashConfig
-		}))),
+		}))), loop(resolvedEventComponents, (eventComponent) => h(Container, { dependencies: eventComponent.dependencies }, h(eventComponent.component, eventComponent.props)))]),
+		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
 		}))),
+		h(__ce_component$2, {
+			object: sprite,
+			bounds: graphicBounds,
+			hitboxBounds,
+			graphicBounds
+		}),
 		loop(attachedGuis, (attachedGui) => cond(shouldDisplayAttachedGui, () => h(Container, null, h(attachedGui.component, {
 			...attachedGui.data(),
 			dependencies: attachedGui.dependencies,
-			object,
-			onFinish: (data) => {
-				onAttachedGuiFinish(attachedGui, data);
+			object: sprite,
+			guiOpenId: attachedGui.openId,
+			onFinish: (data, guiOpenId) => {
+				onAttachedGuiFinish(attachedGui, data, guiOpenId);
 			},
 			onInteraction: (name, data) => {
 				onAttachedGuiInteraction(attachedGui, name, data);
@@ -386,7 +884,8 @@ function component($$props) {
 		}))))
 	]);
 }
+var __ce_component = component;
 //#endregion
-export { component as default };
+export { __ce_component as default };
 
 //# sourceMappingURL=character.ce.js.map