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

package/dist/components/gui/title-screen.ce.js

@@ -7,99 +7,72 @@ import { PrebuiltGui } from "@rpgjs/common";
 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 engine = inject(RpgClientEngine);
-	var guiService = inject(RpgGui);
-	var keyboardControls = engine.globalConfig.keyboardControls;
-	var _a = defineProps({
-		entries: { default: function() {
-			return [];
-		} },
-		saveLoad: { default: function() {
-			return {};
-		} },
+	const engine = inject(RpgClientEngine);
+	const guiService = inject(RpgGui);
+	const keyboardControls = engine.globalConfig.keyboardControls;
+	const { data, onInteraction } = defineProps({
+		entries: { default: () => [] },
+		saveLoad: { default: () => ({}) },
 		localActions: { default: false }
-	}), data = _a.data, onInteraction = _a.onInteraction;
-	var _b = data(), entries = _b.entries, title = _b.title, subtitle = _b.subtitle, version = _b.version, saveLoad = _b.saveLoad, localActions = _b.localActions;
-	var defaultEntries = [{
+	});
+	const { entries, title, subtitle, version, saveLoad, localActions } = data();
+	const defaultEntries = [{
 		id: "start",
 		label: "Start"
 	}, {
 		id: "load",
 		label: "Load"
 	}];
-	var resolveProp = function(value) {
-		return typeof value === "function" ? value() : value;
-	};
-	var titleText = computed(function() {
-		return resolveProp(title) || "RPG";
-	});
-	var subtitleText = computed(function() {
-		return resolveProp(subtitle) || "";
-	});
-	var versionText = computed(function() {
-		return resolveProp(version) || "";
-	});
-	var localActionsEnabled = computed(function() {
-		return resolveProp(localActions) === true;
-	});
-	var entryList = computed(function() {
-		var list = resolveProp(entries);
+	const resolveProp = (value) => typeof value === "function" ? value() : value;
+	const titleText = computed(() => resolveProp(title) || "RPG");
+	const subtitleText = computed(() => resolveProp(subtitle) || "");
+	const versionText = computed(() => resolveProp(version) || "");
+	const localActionsEnabled = computed(() => resolveProp(localActions) === true);
+	const entryList = computed(() => {
+		const list = resolveProp(entries);
 		if (Array.isArray(list) && list.length) return list;
 		return defaultEntries;
 	});
-	var isEntryDisabled = function(entry) {
+	const isEntryDisabled = (entry) => {
 		if (!entry) return true;
 		if (entry.disabled) return true;
 		if (entry.enabled === false) return true;
 		return false;
 	};
-	var selectedEntry = signal(0);
-	var selectableIndexes = computed(function() {
-		return entryList().map(function(entry, index) {
-			return isEntryDisabled(entry) ? null : index;
-		}).filter(function(value) {
-			return value !== null;
-		});
+	const selectedEntry = signal(0);
+	const selectableIndexes = computed(() => {
+		return entryList().map((entry, index) => isEntryDisabled(entry) ? null : index).filter((value) => value !== null);
 	});
-	effect(function() {
-		var available = selectableIndexes();
+	effect(() => {
+		const available = selectableIndexes();
 		if (!available.length) return;
-		var current = selectedEntry();
+		const current = selectedEntry();
 		if (!available.includes(current)) selectedEntry.set(available[0]);
 	});
-	var moveSelection = function(delta) {
-		var available = selectableIndexes();
+	const moveSelection = (delta) => {
+		const available = selectableIndexes();
 		if (!available.length) return;
-		var current = selectedEntry();
-		var nextIndex = (Math.max(0, available.indexOf(current)) + delta + available.length) % available.length;
+		const current = selectedEntry();
+		const nextIndex = (Math.max(0, available.indexOf(current)) + delta + available.length) % available.length;
 		selectedEntry.set(available[nextIndex]);
 	};
-	var triggerSelect = function(index) {
-		var entry = entryList()[index];
+	const triggerSelect = (index) => {
+		const entry = entryList()[index];
 		if (!entry || isEntryDisabled(entry)) return;
 		if (localActionsEnabled()) {
 			if (entry.id === "start") guiService.hide(PrebuiltGui.TitleScreen);
 			if (entry.id === "load") {
-				var config = resolveProp(saveLoad) || {};
-				var slots = Array.isArray(config.slots) ? config.slots : [
+				const config = resolveProp(saveLoad) || {};
+				const slots = Array.isArray(config.slots) ? config.slots : [
 					null,
 					null,
 					null
 				];
-				guiService.display(PrebuiltGui.Save, __assign(__assign({}, config), {
+				guiService.display(PrebuiltGui.Save, {
+					...config,
 					mode: config.mode || "load",
 					slots
-				}));
+				});
 			}
 		}
 		if (onInteraction) onInteraction("select", {
@@ -114,12 +87,12 @@ function component($$props) {
 			triggerSelect(index);
 		};
 	}
-	var controls = signal({
+	const controls = signal({
 		up: {
 			repeat: true,
 			bind: keyboardControls.up,
 			throttle: 150,
-			keyDown: function() {
+			keyDown() {
 				if (guiService.isDisplaying(PrebuiltGui.Save)) return;
 				moveSelection(-1);
 			}
@@ -128,14 +101,14 @@ function component($$props) {
 			repeat: true,
 			bind: keyboardControls.down,
 			throttle: 150,
-			keyDown: function() {
+			keyDown() {
 				if (guiService.isDisplaying(PrebuiltGui.Save)) return;
 				moveSelection(1);
 			}
 		},
 		action: {
 			bind: keyboardControls.action,
-			keyDown: function() {
+			keyDown() {
 				if (guiService.isDisplaying(PrebuiltGui.Save)) return;
 				triggerSelect(selectedEntry());
 			}

package/dist/components/gui/title-screen.ce.js.map

@@ -1 +1 @@
-{"version":3,"file":"title-screen.ce.js","names":[],"sources":["../../../src/components/gui/title-screen.ce"],"sourcesContent":["<DOMContainer width=\"100%\" height=\"100%\">\n    <div class=\"rpg-ui-title-screen rpg-anim-fade-in\">\n        <div class=\"rpg-ui-title-screen-header rpg-anim-float\">\n            <div class=\"rpg-ui-title-screen-title\">{titleText()}</div>\n            @if (subtitleText()) {\n                <div class=\"rpg-ui-title-screen-subtitle\">{subtitleText()}</div>\n            }\n        </div>\n        <Navigation tabindex={selectedEntry} controls={controls}>\n            <div class=\"rpg-ui-menu rpg-ui-title-screen-menu rpg-anim-slide-up\">\n                @for ((entry,index) of entryList()) {\n                    <div\n                        class=\"rpg-ui-menu-item\"\n                        class={{disabled: isEntryDisabled(entry)}}\n                        data-selected={selectedEntry() === index ? \"true\" : \"false\"}\n                        tabindex={index}\n                        click={selectEntry(index)}\n                    >{entry.label}</div>\n                }\n            </div>\n        </Navigation>\n        @if (versionText()) {\n            <div class=\"rpg-ui-title-screen-version\">{versionText()}</div>\n        }\n    </div>\n</DOMContainer>\n\n<script>\n    import { signal, computed, effect } from \"canvasengine\";\n    import { PrebuiltGui } from \"@rpgjs/common\";\n    import { inject } from \"../../core/inject\";\n    import { RpgClientEngine } from \"../../RpgClientEngine\";\n    import { RpgGui } from \"../../Gui/Gui\";\n\n    const engine = inject(RpgClientEngine);\n    const guiService = inject(RpgGui);\n    const keyboardControls = engine.globalConfig.keyboardControls;\n\n    const { data, onInteraction } = defineProps({\n        entries: {\n            default: () => []\n        },\n        saveLoad: {\n            default: () => ({})\n        },\n        localActions: {\n            default: false\n        }\n    });\n\n    const { entries, title, subtitle, version, saveLoad, localActions } = data();\n\n    const defaultEntries = [\n        { id: \"start\", label: \"Start\" },\n        { id: \"load\", label: \"Load\" }\n    ];\n\n    const resolveProp = (value) => typeof value === \"function\" ? value() : value;\n    const titleText = computed(() => resolveProp(title) || \"RPG\");\n    const subtitleText = computed(() => resolveProp(subtitle) || \"\");\n    const versionText = computed(() => resolveProp(version) || \"\");\n    const localActionsEnabled = computed(() => resolveProp(localActions) === true);\n\n    const entryList = computed(() => {\n        const list = resolveProp(entries);\n        if (Array.isArray(list) && list.length) return list;\n        return defaultEntries;\n    });\n\n    const isEntryDisabled = (entry) => {\n        if (!entry) return true;\n        if (entry.disabled) return true;\n        if (entry.enabled === false) return true;\n        return false;\n    };\n\n    const selectedEntry = signal(0);\n    const selectableIndexes = computed(() => {\n        const list = entryList();\n        return list\n            .map((entry, index) => (isEntryDisabled(entry) ? null : index))\n            .filter((value) => value !== null);\n    });\n\n    effect(() => {\n        const available = selectableIndexes();\n        if (!available.length) return;\n        const current = selectedEntry();\n        if (!available.includes(current)) {\n            selectedEntry.set(available[0]);\n        }\n    });\n\n    const moveSelection = (delta) => {\n        const available = selectableIndexes();\n        if (!available.length) return;\n        const current = selectedEntry();\n        const currentIndex = Math.max(0, available.indexOf(current));\n        const nextIndex = (currentIndex + delta + available.length) % available.length;\n        selectedEntry.set(available[nextIndex]);\n    };\n\n    const triggerSelect = (index) => {\n        const list = entryList();\n        const entry = list[index];\n        if (!entry || isEntryDisabled(entry)) return;\n        if (localActionsEnabled()) {\n            if (entry.id === \"start\") {\n                guiService.hide(PrebuiltGui.TitleScreen);\n            }\n            if (entry.id === \"load\") {\n                const config = resolveProp(saveLoad) || {};\n                const slots = Array.isArray(config.slots) ? config.slots : [null, null, null];\n                guiService.display(PrebuiltGui.Save, {\n                    ...config,\n                    mode: config.mode || \"load\",\n                    slots\n                });\n            }\n        }\n        if (onInteraction) {\n            onInteraction(\"select\", { id: entry.id, index, entry });\n        }\n    };\n\n    function selectEntry(index) {\n        return function() {\n            selectedEntry.set(index);\n            triggerSelect(index);\n        };\n    }\n\n    const controls = signal({\n        up: {\n            repeat: true,\n            bind: keyboardControls.up,\n            throttle: 150,\n            keyDown() {\n                if (guiService.isDisplaying(PrebuiltGui.Save)) return;\n                moveSelection(-1);\n            }\n        },\n        down: {\n            repeat: true,\n            bind: keyboardControls.down,\n            throttle: 150,\n            keyDown() {\n                if (guiService.isDisplaying(PrebuiltGui.Save)) return;\n                moveSelection(1);\n            }\n        },\n        action: {\n            bind: keyboardControls.action,\n            keyDown() {\n                if (guiService.isDisplaying(PrebuiltGui.Save)) return;\n                triggerSelect(selectedEntry());\n            }\n        },\n        gamepad: {\n            enabled: true\n        }\n    });\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"title-screen.ce.js","names":[],"sources":["../../../src/components/gui/title-screen.ce"],"sourcesContent":["<DOMContainer width=\"100%\" height=\"100%\">\n    <div class=\"rpg-ui-title-screen rpg-anim-fade-in\">\n        <div class=\"rpg-ui-title-screen-header rpg-anim-float\">\n            <div class=\"rpg-ui-title-screen-title\">{titleText()}</div>\n            @if (subtitleText()) {\n                <div class=\"rpg-ui-title-screen-subtitle\">{subtitleText()}</div>\n            }\n        </div>\n        <Navigation tabindex={selectedEntry} controls={controls}>\n            <div class=\"rpg-ui-menu rpg-ui-title-screen-menu rpg-anim-slide-up\">\n                @for ((entry,index) of entryList()) {\n                    <div\n                        class=\"rpg-ui-menu-item\"\n                        class={{disabled: isEntryDisabled(entry)}}\n                        data-selected={selectedEntry() === index ? \"true\" : \"false\"}\n                        tabindex={index}\n                        click={selectEntry(index)}\n                    >{entry.label}</div>\n                }\n            </div>\n        </Navigation>\n        @if (versionText()) {\n            <div class=\"rpg-ui-title-screen-version\">{versionText()}</div>\n        }\n    </div>\n</DOMContainer>\n\n<script>\n    import { signal, computed, effect } from \"canvasengine\";\n    import { PrebuiltGui } from \"@rpgjs/common\";\n    import { inject } from \"../../core/inject\";\n    import { RpgClientEngine } from \"../../RpgClientEngine\";\n    import { RpgGui } from \"../../Gui/Gui\";\n\n    const engine = inject(RpgClientEngine);\n    const guiService = inject(RpgGui);\n    const keyboardControls = engine.globalConfig.keyboardControls;\n\n    const { data, onInteraction } = defineProps({\n        entries: {\n            default: () => []\n        },\n        saveLoad: {\n            default: () => ({})\n        },\n        localActions: {\n            default: false\n        }\n    });\n\n    const { entries, title, subtitle, version, saveLoad, localActions } = data();\n\n    const defaultEntries = [\n        { id: \"start\", label: \"Start\" },\n        { id: \"load\", label: \"Load\" }\n    ];\n\n    const resolveProp = (value) => typeof value === \"function\" ? value() : value;\n    const titleText = computed(() => resolveProp(title) || \"RPG\");\n    const subtitleText = computed(() => resolveProp(subtitle) || \"\");\n    const versionText = computed(() => resolveProp(version) || \"\");\n    const localActionsEnabled = computed(() => resolveProp(localActions) === true);\n\n    const entryList = computed(() => {\n        const list = resolveProp(entries);\n        if (Array.isArray(list) && list.length) return list;\n        return defaultEntries;\n    });\n\n    const isEntryDisabled = (entry) => {\n        if (!entry) return true;\n        if (entry.disabled) return true;\n        if (entry.enabled === false) return true;\n        return false;\n    };\n\n    const selectedEntry = signal(0);\n    const selectableIndexes = computed(() => {\n        const list = entryList();\n        return list\n            .map((entry, index) => (isEntryDisabled(entry) ? null : index))\n            .filter((value) => value !== null);\n    });\n\n    effect(() => {\n        const available = selectableIndexes();\n        if (!available.length) return;\n        const current = selectedEntry();\n        if (!available.includes(current)) {\n            selectedEntry.set(available[0]);\n        }\n    });\n\n    const moveSelection = (delta) => {\n        const available = selectableIndexes();\n        if (!available.length) return;\n        const current = selectedEntry();\n        const currentIndex = Math.max(0, available.indexOf(current));\n        const nextIndex = (currentIndex + delta + available.length) % available.length;\n        selectedEntry.set(available[nextIndex]);\n    };\n\n    const triggerSelect = (index) => {\n        const list = entryList();\n        const entry = list[index];\n        if (!entry || isEntryDisabled(entry)) return;\n        if (localActionsEnabled()) {\n            if (entry.id === \"start\") {\n                guiService.hide(PrebuiltGui.TitleScreen);\n            }\n            if (entry.id === \"load\") {\n                const config = resolveProp(saveLoad) || {};\n                const slots = Array.isArray(config.slots) ? config.slots : [null, null, null];\n                guiService.display(PrebuiltGui.Save, {\n                    ...config,\n                    mode: config.mode || \"load\",\n                    slots\n                });\n            }\n        }\n        if (onInteraction) {\n            onInteraction(\"select\", { id: entry.id, index, entry });\n        }\n    };\n\n    function selectEntry(index) {\n        return function() {\n            selectedEntry.set(index);\n            triggerSelect(index);\n        };\n    }\n\n    const controls = signal({\n        up: {\n            repeat: true,\n            bind: keyboardControls.up,\n            throttle: 150,\n            keyDown() {\n                if (guiService.isDisplaying(PrebuiltGui.Save)) return;\n                moveSelection(-1);\n            }\n        },\n        down: {\n            repeat: true,\n            bind: keyboardControls.down,\n            throttle: 150,\n            keyDown() {\n                if (guiService.isDisplaying(PrebuiltGui.Save)) return;\n                moveSelection(1);\n            }\n        },\n        action: {\n            bind: keyboardControls.action,\n            keyDown() {\n                if (guiService.isDisplaying(PrebuiltGui.Save)) return;\n                triggerSelect(selectedEntry());\n            }\n        },\n        gamepad: {\n            enabled: true\n        }\n    });\n</script>\n"],"mappings":"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"}

package/dist/components/prebuilt/hp-bar.ce.js

@@ -2,83 +2,79 @@ import { Container, Graphics, animatedSignal, computed, effect, h, useDefineProp
 //#region src/components/prebuilt/hp-bar.ce
 function component($$props) {
 	useProps($$props);
-	var object = useDefineProps($$props)().object;
-	var barWidth = 50;
-	var barHeight = 8;
-	var borderRadius = 4;
-	var innerRadius = 3;
-	var padding = 1;
-	var bgColor = 1450302;
-	var shadowColor = 0;
-	var borderColor = 4871528;
-	var maxFillWidth = barWidth - padding * 2;
-	var fillHeight = barHeight - padding * 2;
-	var highlightHeight = Math.floor(fillHeight / 2);
-	var hitbox = object.hitbox;
-	var currentHp = computed(function() {
-		var _a, _b;
-		return (_b = (_a = object.hpSignal) === null || _a === void 0 ? void 0 : _a.call(object)) !== null && _b !== void 0 ? _b : 0;
+	const { object } = useDefineProps($$props)();
+	const barWidth = 50;
+	const barHeight = 8;
+	const borderRadius = 4;
+	const innerRadius = 3;
+	const padding = 1;
+	const bgColor = 1450302;
+	const shadowColor = 0;
+	const borderColor = 4871528;
+	const maxFillWidth = barWidth - padding * 2;
+	const fillHeight = barHeight - padding * 2;
+	const highlightHeight = Math.floor(fillHeight / 2);
+	const hitbox = object.hitbox;
+	const currentHp = computed(() => {
+		return object.hpSignal?.() ?? 0;
 	});
-	var maxHp = computed(function() {
-		var _a, _b, _c;
-		return (_c = ((_b = (_a = object._param) === null || _a === void 0 ? void 0 : _a.call(object)) !== null && _b !== void 0 ? _b : {}).maxHp) !== null && _c !== void 0 ? _c : 100;
+	const maxHp = computed(() => {
+		return (object._param?.() ?? {}).maxHp ?? 100;
 	});
-	var hpPercent = computed(function() {
-		var max = maxHp();
+	const hpPercent = computed(() => {
+		const max = maxHp();
 		if (max <= 0) return 0;
-		var percent = currentHp() / max;
+		const percent = currentHp() / max;
 		return Math.max(0, Math.min(1, percent));
 	});
-	var animatedPercent = animatedSignal(hpPercent(), {
+	const animatedPercent = animatedSignal(hpPercent(), {
 		duration: 300,
 		easing: "easeOutCubic"
 	});
-	effect(function() {
-		var newPercent = hpPercent();
+	effect(() => {
+		const newPercent = hpPercent();
 		animatedPercent.set(newPercent);
 	});
-	var position = computed(function() {
-		return {
-			x: hitbox().w / 2 - barWidth / 2,
-			y: -barHeight - 8
-		};
-	});
-	var fillWidth = computed(function() {
-		var percent = animatedPercent();
-		var width = maxFillWidth * percent;
+	const position = computed(() => ({
+		x: hitbox().w / 2 - barWidth / 2,
+		y: -barHeight - 8
+	}));
+	const fillWidth = computed(() => {
+		const percent = animatedPercent();
+		const width = maxFillWidth * percent;
 		if (percent > 0 && width < innerRadius * 2) return innerRadius * 2;
 		return Math.max(0, width);
 	});
-	var hpColorHex = computed(function() {
-		var percent = hpPercent();
+	const hpColorHex = computed(() => {
+		const percent = hpPercent();
 		if (percent > .6) return 4906624;
 		else if (percent > .3) return 16436245;
 		else if (percent > .15) return 16486972;
 		else return 15680580;
 	});
-	var drawShadow = function(g) {
+	const drawShadow = (g) => {
 		g.roundRect(0, 0, barWidth, barHeight, borderRadius);
 		g.fill({
 			color: shadowColor,
 			alpha: .3
 		});
 	};
-	var drawBackground = function(g) {
+	const drawBackground = (g) => {
 		g.roundRect(0, 0, barWidth, barHeight, borderRadius);
 		g.fill({
 			color: bgColor,
 			alpha: .9
 		});
 	};
-	var drawFill = function(g) {
-		var width = fillWidth();
+	const drawFill = (g) => {
+		const width = fillWidth();
 		if (width > 0) {
 			g.roundRect(padding, padding, width, fillHeight, innerRadius);
 			g.fill({ color: hpColorHex() });
 		}
 	};
-	var drawHighlight = function(g) {
-		var width = fillWidth();
+	const drawHighlight = (g) => {
+		const width = fillWidth();
 		if (width > 0) {
 			g.roundRect(padding, padding, width, highlightHeight, innerRadius);
 			g.fill({
@@ -87,7 +83,7 @@ function component($$props) {
 			});
 		}
 	};
-	var drawBorder = function(g) {
+	const drawBorder = (g) => {
 		g.roundRect(0, 0, barWidth, barHeight, borderRadius);
 		g.stroke({
 			color: borderColor,

package/dist/components/prebuilt/hp-bar.ce.js.map

@@ -1 +1 @@
-{"version":3,"file":"hp-bar.ce.js","names":[],"sources":["../../../src/components/prebuilt/hp-bar.ce"],"sourcesContent":["<!-- \n  HP Bar Component\n  \n  A beautiful, animated health bar component for displaying player HP above sprites.\n  Features a gradient color based on HP level, smooth animations, and modern styling.\n  \n  ## Design\n  \n  The bar changes color dynamically based on HP percentage:\n  - Green (#4ade80) when HP > 60% - Healthy state\n  - Yellow (#facc15) when HP 30-60% - Caution state  \n  - Orange (#fb923c) when HP 15-30% - Danger state\n  - Red (#ef4444) when HP < 15% - Critical state\n  \n  @example\n  ```ts\n  import HpBar from './hp-bar.ce';\n  \n  // In module configuration\n  export default defineModule<RpgClient>({\n    sprite: {\n      componentsInFront: [HpBar]\n    }\n  })\n  ```\n-->\n\n<Container x={position.x} y={position.y}>\n  <!-- Background shadow for depth effect -->\n  <Graphics draw={drawShadow} x={1} y={1} />\n  \n  <!-- Main background -->\n  <Graphics draw={drawBackground} />\n  \n  <!-- HP fill bar -->\n  <Graphics draw={drawFill} />\n  \n  <!-- Highlight overlay for 3D effect -->\n  <Graphics draw={drawHighlight} />\n  \n  <!-- Border frame -->\n  <Graphics draw={drawBorder} />\n</Container>\n\n<script>\nimport { computed, animatedSignal, effect } from \"canvasengine\";\n\nconst { object } = defineProps();\n\n// ====================\n// Configuration\n// ====================\n\n/** Total width of the HP bar in pixels */\nconst barWidth = 50;\n\n/** Total height of the HP bar in pixels */\nconst barHeight = 8;\n\n/** Border radius for rounded corners */\nconst borderRadius = 4;\n\n/** Inner border radius for the fill bar */\nconst innerRadius = 3;\n\n/** Padding between background and fill */\nconst padding = 1;\n\n/** Background color (dark theme) */\nconst bgColor = 0x16213e;\n\n/** Shadow color */\nconst shadowColor = 0x000000;\n\n/** Border color */\nconst borderColor = 0x4a5568;\n\n// ====================\n// Calculated dimensions\n// ====================\n\n/** Maximum fill width */\nconst maxFillWidth = barWidth - (padding * 2);\n\n/** Fill height */\nconst fillHeight = barHeight - (padding * 2);\n\n/** Highlight height (half of fill) */\nconst highlightHeight = Math.floor(fillHeight / 2);\n\n// ====================\n// Reactive HP values\n// ====================\n\n/** Gets hitbox dimensions for positioning */\nconst hitbox = object.hitbox;\n\n/**\n * Gets the current HP value from the player object\n * Uses hpSignal which is synchronized from the server\n */\nconst currentHp = computed(() => {\n  return object.hpSignal?.() ?? 0;\n});\n\n/**\n * Gets the maximum HP value from player parameters\n * Reads from _param.maxHp which contains calculated stats\n */\nconst maxHp = computed(() => {\n  const params = object._param?.() ?? {};\n  return params.maxHp ?? 100;\n});\n\n/**\n * Calculates HP percentage (0 to 1)\n */\nconst hpPercent = computed(() => {\n  const max = maxHp();\n  if (max <= 0) return 0;\n  const percent = currentHp() / max;\n  return Math.max(0, Math.min(1, percent));\n});\n\n// ====================\n// Animated values\n// ====================\n\n/**\n * Animated percentage for smooth bar transitions\n */\nconst animatedPercent = animatedSignal(hpPercent(), {\n  duration: 300,\n  easing: 'easeOutCubic'\n});\n\n// Update animated value when HP changes\neffect(() => {\n  const newPercent = hpPercent();\n  animatedPercent.set(newPercent);\n});\n\n// ====================\n// Visual calculations\n// ====================\n\n/**\n * Position of the bar relative to the sprite\n */\nconst position = computed(() => ({\n  x: (hitbox().w / 2) - (barWidth / 2),\n  y: -barHeight - 8\n}));\n\n/**\n * Current width of the HP fill based on animated percentage\n */\nconst fillWidth = computed(() => {\n  const percent = animatedPercent();\n  const width = maxFillWidth * percent;\n  // Ensure minimum visible width when HP > 0\n  if (percent > 0 && width < innerRadius * 2) {\n    return innerRadius * 2;\n  }\n  return Math.max(0, width);\n});\n\n/**\n * Determines HP bar color based on current HP percentage\n * Returns hex color number for PixiJS\n * \n * ## Color Thresholds\n * - Green (0x4ade80): HP > 60% - Healthy\n * - Yellow (0xfacc15): HP 30-60% - Caution\n * - Orange (0xfb923c): HP 15-30% - Danger\n * - Red (0xef4444): HP < 15% - Critical\n */\nconst hpColorHex = computed(() => {\n  const percent = hpPercent();\n  \n  if (percent > 0.6) {\n    return 0x4ade80; // Green - healthy\n  } else if (percent > 0.3) {\n    return 0xfacc15; // Yellow - caution\n  } else if (percent > 0.15) {\n    return 0xfb923c; // Orange - danger\n  } else {\n    return 0xef4444; // Red - critical\n  }\n});\n\n// ====================\n// Drawing functions\n// ====================\n\n/**\n * Draws the shadow behind the HP bar for depth effect\n */\nconst drawShadow = (g) => {\n  g.roundRect(0, 0, barWidth, barHeight, borderRadius);\n  g.fill({ color: shadowColor, alpha: 0.3 });\n};\n\n/**\n * Draws the main background of the HP bar\n */\nconst drawBackground = (g) => {\n  g.roundRect(0, 0, barWidth, barHeight, borderRadius);\n  g.fill({ color: bgColor, alpha: 0.9 });\n};\n\n/**\n * Draws the HP fill bar with dynamic color\n */\nconst drawFill = (g) => {\n  const width = fillWidth();\n  if (width > 0) {\n    g.roundRect(padding, padding, width, fillHeight, innerRadius);\n    g.fill({ color: hpColorHex() });\n  }\n};\n\n/**\n * Draws the highlight overlay for 3D effect\n */\nconst drawHighlight = (g) => {\n  const width = fillWidth();\n  if (width > 0) {\n    g.roundRect(padding, padding, width, highlightHeight, innerRadius);\n    g.fill({ color: 0xffffff, alpha: 0.25 });\n  }\n};\n\n/**\n * Draws the border frame around the HP bar\n * \n * Uses PixiJS Graphics API to create a rounded rectangle stroke\n * that serves as a visual border for the bar.\n * \n * @param g - PixiJS Graphics object\n * \n * @example\n * ```html\n * <Graphics draw={drawBorder} />\n * ```\n */\nconst drawBorder = (g) => {\n  g.roundRect(0, 0, barWidth, barHeight, borderRadius);\n  g.stroke({ \n    color: borderColor, \n    width: 1,\n    alpha: 0.7\n  });\n};\n</script>\n"],"mappings":";;AAOC,SAAA,UAAA,SAAA;AACsB,UAAC,QAAY;CAEhC,IAAQ,SADgB,eAAe,QAAC,EACV,CAAC;CACnC,IAAI,WAAS;CACb,IAAI,YAAY;CAChB,IAAC,eAAA;CACD,IAAG,cAAA;CACH,IAAI,UAAC;CACL,IAAE,UAAY;CACd,IAAC,cAAA;CACD,IAAI,cAAW;CACf,IAAE,eAAe,WAAa,UAAW;CACzC,IAAI,aAAQ,YAAA,UAAA;CACZ,IAAI,kBAAE,KAAoB,MAAK,aAAA,EAAA;CAC/B,IAAI,SAAA,OAAA;CACJ,IAAG,YAAA,SAAA,WAAA;EACC,IAAA,IAAA;AACF,UAAA,MAAA,KAAA,OAAA,cAAA,QAAA,OAAA,KAAA,IAAA,KAAA,IAAA,GAAA,KAAA,OAAA,MAAA,QAAA,OAAA,KAAA,IAAA,KAAA;;CAEF,IAAC,QAAW,SAAE,WAAe;EACzB,IAAG,IAAA,IAAA;AAEN,UAAA,OADiB,MAAA,KAAW,OAAO,YAAO,QAAA,OAAA,KAAA,IAAA,KAAA,IAAA,GAAA,KAAA,OAAA,MAAA,QAAA,OAAA,KAAA,IAAA,KAAA,EAAA,EAC1C,WAAA,QAAA,OAAA,KAAA,IAAA,KAAA;GACC;CACF,IAAG,YAAa,SAAE,WAAiB;EAClC,IAAA,MAAA,OAAA;AACG,MAAG,OAAQ,EACZ,QAAS;EACX,IAAA,UAAA,WAAA,GAAA;AACG,SAAG,KAAS,IAAC,GAAA,KAAW,IAAI,GAAA,QAAS,CAAA;GACvC;CACF,IAAC,kBAAA,eAAA,WAAA,EAAA;EACG,UAAU;EACX,QAAS;EACX,CAAC;;EAED,IAAM,aAAA,WAAA;AACP,kBAAmB,IAAA,WAAgB;;CAEnC,IAAA,WAAe,SAAI,WAAa;AAAA,SAAA;;GAE5B,GAAG,CAAC,YAAY;GACnB;GAAE;CACH,IAAI,YAAY,SAAM,WAAA;;EAElB,IAAA,QAAY,eAAc;6CAG1B,QAAM,cAAiB;;GAGzB;CACF,IAAA,aAAM,SAAgB,WAAA;;AAElB,MAAA,UAAa,GACX,QAAA;WAEM,UAAQ,GACd,QAAS;WAEX,UAAkB,IAChB,QAAS;MAGT,QAAA;GAEJ;CACF,IAAA,aAAiB,SAAG,GAAQ;;AAExB,IAAE,KAAK;GAAE,OAAO;GAAE,OAAA;GAAA,CAAA;;CAEtB,IAAI,iBAAiB,SAAC,GAAA;;AAElB,IAAA,KAAO;GAAC,OAAK;GAAO,OAAA;GAAA,CAAA;;;EAGpB,IAAI,QAAQ,WAAC;AACjB,MAAM,QAAU,GAAG;;AAEf,KAAA,KAAU,EAAA,OAAQ,YAAc,EAAC,CAAA;;;CAGrC,IAAI,gBAAgB,SAAE,GAAA;EACnB,IAAA,QAAY,WAAA;AACX,MAAI,QAAQ,GAAG;;AAEX,KAAC,KAAM;IAAC,OAAA;IAAe,OAAA;IAAa,CAAA;;;CAG5C,IAAE,aAAA,SAAA,GAAA;AACC,IAAA,UAAS,GAAO,GAAG,UAAO,WAAS,aAAO;AAC1C,IAAA,OAAK;GACN,OAAA;GACI,OAAS;GACP,OAAO;GACb,CAAA;;AAGM,QADN,GAAA,EAAA,WAAA;EAAA,GAAA,SAAA;EAAA,GAAA,SAAA;EAAA,EAAA;EAAA,EAAA,UAAA;GAAA,MAAA;GAAA,GAAA;GAAA,GAAA;GAAA,CAAA;EAAA,EAAA,UAAA,EAAA,MAAA,gBAAA,CAAA;EAAA,EAAA,UAAA,EAAA,MAAA,UAAA,CAAA;EAAA,EAAA,UAAA,EAAA,MAAA,eAAA,CAAA;EAAA,EAAA,UAAA,EAAA,MAAA,YAAA,CAAA;EAAA,CAAA,CAAA"}
+{"version":3,"file":"hp-bar.ce.js","names":[],"sources":["../../../src/components/prebuilt/hp-bar.ce"],"sourcesContent":["<!-- \n  HP Bar Component\n  \n  A beautiful, animated health bar component for displaying player HP above sprites.\n  Features a gradient color based on HP level, smooth animations, and modern styling.\n  \n  ## Design\n  \n  The bar changes color dynamically based on HP percentage:\n  - Green (#4ade80) when HP > 60% - Healthy state\n  - Yellow (#facc15) when HP 30-60% - Caution state  \n  - Orange (#fb923c) when HP 15-30% - Danger state\n  - Red (#ef4444) when HP < 15% - Critical state\n  \n  @example\n  ```ts\n  import HpBar from './hp-bar.ce';\n  \n  // In module configuration\n  export default defineModule<RpgClient>({\n    sprite: {\n      componentsInFront: [HpBar]\n    }\n  })\n  ```\n-->\n\n<Container x={position.x} y={position.y}>\n  <!-- Background shadow for depth effect -->\n  <Graphics draw={drawShadow} x={1} y={1} />\n  \n  <!-- Main background -->\n  <Graphics draw={drawBackground} />\n  \n  <!-- HP fill bar -->\n  <Graphics draw={drawFill} />\n  \n  <!-- Highlight overlay for 3D effect -->\n  <Graphics draw={drawHighlight} />\n  \n  <!-- Border frame -->\n  <Graphics draw={drawBorder} />\n</Container>\n\n<script>\nimport { computed, animatedSignal, effect } from \"canvasengine\";\n\nconst { object } = defineProps();\n\n// ====================\n// Configuration\n// ====================\n\n/** Total width of the HP bar in pixels */\nconst barWidth = 50;\n\n/** Total height of the HP bar in pixels */\nconst barHeight = 8;\n\n/** Border radius for rounded corners */\nconst borderRadius = 4;\n\n/** Inner border radius for the fill bar */\nconst innerRadius = 3;\n\n/** Padding between background and fill */\nconst padding = 1;\n\n/** Background color (dark theme) */\nconst bgColor = 0x16213e;\n\n/** Shadow color */\nconst shadowColor = 0x000000;\n\n/** Border color */\nconst borderColor = 0x4a5568;\n\n// ====================\n// Calculated dimensions\n// ====================\n\n/** Maximum fill width */\nconst maxFillWidth = barWidth - (padding * 2);\n\n/** Fill height */\nconst fillHeight = barHeight - (padding * 2);\n\n/** Highlight height (half of fill) */\nconst highlightHeight = Math.floor(fillHeight / 2);\n\n// ====================\n// Reactive HP values\n// ====================\n\n/** Gets hitbox dimensions for positioning */\nconst hitbox = object.hitbox;\n\n/**\n * Gets the current HP value from the player object\n * Uses hpSignal which is synchronized from the server\n */\nconst currentHp = computed(() => {\n  return object.hpSignal?.() ?? 0;\n});\n\n/**\n * Gets the maximum HP value from player parameters\n * Reads from _param.maxHp which contains calculated stats\n */\nconst maxHp = computed(() => {\n  const params = object._param?.() ?? {};\n  return params.maxHp ?? 100;\n});\n\n/**\n * Calculates HP percentage (0 to 1)\n */\nconst hpPercent = computed(() => {\n  const max = maxHp();\n  if (max <= 0) return 0;\n  const percent = currentHp() / max;\n  return Math.max(0, Math.min(1, percent));\n});\n\n// ====================\n// Animated values\n// ====================\n\n/**\n * Animated percentage for smooth bar transitions\n */\nconst animatedPercent = animatedSignal(hpPercent(), {\n  duration: 300,\n  easing: 'easeOutCubic'\n});\n\n// Update animated value when HP changes\neffect(() => {\n  const newPercent = hpPercent();\n  animatedPercent.set(newPercent);\n});\n\n// ====================\n// Visual calculations\n// ====================\n\n/**\n * Position of the bar relative to the sprite\n */\nconst position = computed(() => ({\n  x: (hitbox().w / 2) - (barWidth / 2),\n  y: -barHeight - 8\n}));\n\n/**\n * Current width of the HP fill based on animated percentage\n */\nconst fillWidth = computed(() => {\n  const percent = animatedPercent();\n  const width = maxFillWidth * percent;\n  // Ensure minimum visible width when HP > 0\n  if (percent > 0 && width < innerRadius * 2) {\n    return innerRadius * 2;\n  }\n  return Math.max(0, width);\n});\n\n/**\n * Determines HP bar color based on current HP percentage\n * Returns hex color number for PixiJS\n * \n * ## Color Thresholds\n * - Green (0x4ade80): HP > 60% - Healthy\n * - Yellow (0xfacc15): HP 30-60% - Caution\n * - Orange (0xfb923c): HP 15-30% - Danger\n * - Red (0xef4444): HP < 15% - Critical\n */\nconst hpColorHex = computed(() => {\n  const percent = hpPercent();\n  \n  if (percent > 0.6) {\n    return 0x4ade80; // Green - healthy\n  } else if (percent > 0.3) {\n    return 0xfacc15; // Yellow - caution\n  } else if (percent > 0.15) {\n    return 0xfb923c; // Orange - danger\n  } else {\n    return 0xef4444; // Red - critical\n  }\n});\n\n// ====================\n// Drawing functions\n// ====================\n\n/**\n * Draws the shadow behind the HP bar for depth effect\n */\nconst drawShadow = (g) => {\n  g.roundRect(0, 0, barWidth, barHeight, borderRadius);\n  g.fill({ color: shadowColor, alpha: 0.3 });\n};\n\n/**\n * Draws the main background of the HP bar\n */\nconst drawBackground = (g) => {\n  g.roundRect(0, 0, barWidth, barHeight, borderRadius);\n  g.fill({ color: bgColor, alpha: 0.9 });\n};\n\n/**\n * Draws the HP fill bar with dynamic color\n */\nconst drawFill = (g) => {\n  const width = fillWidth();\n  if (width > 0) {\n    g.roundRect(padding, padding, width, fillHeight, innerRadius);\n    g.fill({ color: hpColorHex() });\n  }\n};\n\n/**\n * Draws the highlight overlay for 3D effect\n */\nconst drawHighlight = (g) => {\n  const width = fillWidth();\n  if (width > 0) {\n    g.roundRect(padding, padding, width, highlightHeight, innerRadius);\n    g.fill({ color: 0xffffff, alpha: 0.25 });\n  }\n};\n\n/**\n * Draws the border frame around the HP bar\n * \n * Uses PixiJS Graphics API to create a rounded rectangle stroke\n * that serves as a visual border for the bar.\n * \n * @param g - PixiJS Graphics object\n * \n * @example\n * ```html\n * <Graphics draw={drawBorder} />\n * ```\n */\nconst drawBorder = (g) => {\n  g.roundRect(0, 0, barWidth, barHeight, borderRadius);\n  g.stroke({ \n    color: borderColor, \n    width: 1,\n    alpha: 0.7\n  });\n};\n</script>\n"],"mappings":";;AAOC,SAAA,UAAA,SAAA;AACsB,UAAC,QAAY;CAEhC,MAAS,EAAA,WADe,eAAe,QACL,EAAA;CACtC,MAAI,WAAS;CACb,MAAI,YAAc;CAClB,MAAC,eAAA;CACD,MAAG,cAAA;CACH,MAAK,UAAA;CACL,MAAE,UAAa;CACf,MAAC,cAAA;CACD,MAAK,cAAU;CACf,MAAE,eAAe,WAAa,UAAW;CACzC,MAAI,aAAQ,YAAA,UAAA;CACZ,MAAM,kBAAkB,KAAE,MAAK,aAAA,EAAA;CAC/B,MAAI,SAAA,OAAA;CACJ,MAAG,YAAA,eAAA;AACC,SAAA,OAAA,YAAA,IAAA;GACF;;AAGE,UADU,OAAY,UAAG,IAAW,EAAA,EACtB,SAAO;GACvB;CACF,MAAC,YAAA,eAAA;EACG,MAAG,MAAK,OAAW;AACpB,MAAA,OAAS,EACX,QAAA;EACG,MAAM,UAAU,WAAC,GAAA;AAClB,SAAQ,KAAK,IAAE,GAAA,KAAU,IAAC,GAAA,QAAA,CAAA;GAC5B;CACD,MAAM,kBAAkB,eAAe,WAAE,EAAA;EACtC,UAAS;EACX,QAAA;EACA,CAAC;AACF,cAAY;EACV,MAAA,aAAS,WAAA;;GAEV;CACD,MAAM,WAAW,gBAAgB;;EAEjC,GAAO,CAAC,YAAW;;CAEnB,MAAM,YAAY,eAAI;EACnB,MAAA,UAAA,iBAAA;EACC,MAAM,QAAQ,eAAI;AAElB,MAAA,UAAc,KAAK,QAAO,cAAW,EACnC,QAAS,cAAI;AAEf,SAAM,KAAM,IAAI,GAAG,MAAI;GAC3B;;EAEI,MAAM,UAAQ,WAAY;AAC9B,MAAM,UAAY,GAAA,QAAA;WAGZ,UAAe,GAAA,QAAA;WAGR,UAAI,IAAA,QAAA;;GAMjB;;AAEI,IAAA,UAAY,GAAE,GAAA,UAAA,WAAA,aAAA;AAClB,IAAM,KAAA;GAAA,OAAc;GAAQ,OAAA;GAAA,CAAA;;CAE5B,MAAM,kBAAgB,MAAA;AACnB,IAAA,UAAW,GAAA,GAAA,UAAA,WAAA,aAAA;AACV,IAAE,KAAK;GAAE,OAAO;GAAE,OAAA;GAAA,CAAA;;CAEtB,MAAI,YAAa,MAAO;EACxB,MAAM,QAAY,WAAW;;AAErB,KAAC,UAAQ,SAAA,SAAA,OAAA,YAAA,YAAA;AACX,KAAA,KAAA,EAAW,OAAE,YAAa,EAAA,CAAO;;;CAGvC,MAAM,iBAAiB,MAAM;;AAEzB,MAAI,QAAQ,GAAG;AAChB,KAAA,UAAY,SAAA,SAAA,OAAA,iBAAA,YAAA;AACP,KAAE,KAAK;IAAE,OAAK;IAAA,OAAA;IAAA,CAAA;;;CAGtB,MAAM,cAAS,MAAO;;AAEpB,IAAA,OAAA;GACM,OAAI;GACJ,OAAA;GACN,OAAA;GACG,CAAC;;WAEJ,EAAA,WAAA;EAAA,GAAA,SAAA;EAAA,GAAA,SAAA;EAAA,EAAA;EAAA,EAAA,UAAA;GAAA,MAAA;GAAA,GAAA;GAAA,GAAA;GAAA,CAAA;EAAA,EAAA,UAAA,EAAA,MAAA,gBAAA,CAAA;EAAA,EAAA,UAAA,EAAA,MAAA,UAAA,CAAA;EAAA,EAAA,UAAA,EAAA,MAAA,eAAA,CAAA;EAAA,EAAA,UAAA,EAAA,MAAA,YAAA,CAAA;EAAA,CAAA,CAAA"}

package/dist/components/prebuilt/light-halo.ce.js

@@ -3,67 +3,44 @@ import { BlurFilter } from "pixi.js";
 //#region src/components/prebuilt/light-halo.ce
 function component($$props) {
 	useProps($$props);
-	var _a = useDefineProps($$props)(), object = _a.object, baseRadius = _a.baseRadius, radiusVariation = _a.radiusVariation, baseOpacity = _a.baseOpacity, opacityVariation = _a.opacityVariation, sizeSpeed = _a.sizeSpeed, opacitySpeed = _a.opacitySpeed, lightColor = _a.lightColor;
-	var getBaseRadius = computed(function() {
-		var _a;
-		return (_a = baseRadius === null || baseRadius === void 0 ? void 0 : baseRadius()) !== null && _a !== void 0 ? _a : 30;
-	});
-	var getRadiusVariation = computed(function() {
-		var _a;
-		return (_a = radiusVariation === null || radiusVariation === void 0 ? void 0 : radiusVariation()) !== null && _a !== void 0 ? _a : 10;
-	});
-	var getBaseOpacity = computed(function() {
-		var _a;
-		return (_a = baseOpacity === null || baseOpacity === void 0 ? void 0 : baseOpacity()) !== null && _a !== void 0 ? _a : .6;
-	});
-	var getOpacityVariation = computed(function() {
-		var _a;
-		return (_a = opacityVariation === null || opacityVariation === void 0 ? void 0 : opacityVariation()) !== null && _a !== void 0 ? _a : .3;
-	});
-	var getSizeSpeed = computed(function() {
-		var _a;
-		return (_a = sizeSpeed === null || sizeSpeed === void 0 ? void 0 : sizeSpeed()) !== null && _a !== void 0 ? _a : .002;
-	});
-	var getOpacitySpeed = computed(function() {
-		var _a;
-		return (_a = opacitySpeed === null || opacitySpeed === void 0 ? void 0 : opacitySpeed()) !== null && _a !== void 0 ? _a : .003;
-	});
-	var getLightColor = computed(function() {
-		var _a;
-		return (_a = lightColor === null || lightColor === void 0 ? void 0 : lightColor()) !== null && _a !== void 0 ? _a : 16777130;
-	});
-	var time = signal(0);
-	var currentRadius = computed(function() {
-		var t = time();
-		var base = getBaseRadius();
-		var variation = getRadiusVariation();
-		var speed = getSizeSpeed();
+	const { object, baseRadius, radiusVariation, baseOpacity, opacityVariation, sizeSpeed, opacitySpeed, lightColor } = useDefineProps($$props)();
+	const getBaseRadius = computed(() => baseRadius?.() ?? 30);
+	const getRadiusVariation = computed(() => radiusVariation?.() ?? 10);
+	const getBaseOpacity = computed(() => baseOpacity?.() ?? .6);
+	const getOpacityVariation = computed(() => opacityVariation?.() ?? .3);
+	const getSizeSpeed = computed(() => sizeSpeed?.() ?? .002);
+	const getOpacitySpeed = computed(() => opacitySpeed?.() ?? .003);
+	const getLightColor = computed(() => lightColor?.() ?? 16777130);
+	const time = signal(0);
+	const currentRadius = computed(() => {
+		const t = time();
+		const base = getBaseRadius();
+		const variation = getRadiusVariation();
+		const speed = getSizeSpeed();
 		return base + (Math.sin(t * speed) + Math.sin(t * speed * 1.5) * .5) / 1.5 * variation;
 	});
-	var currentOpacity = computed(function() {
-		var t = time();
-		var base = getBaseOpacity();
-		var variation = getOpacityVariation();
-		var speed = getOpacitySpeed();
-		var fade = Math.sin(t * speed);
-		var flicker = (Math.random() - .5) * .1;
+	const currentOpacity = computed(() => {
+		const t = time();
+		const base = getBaseOpacity();
+		const variation = getOpacityVariation();
+		const speed = getOpacitySpeed();
+		const fade = Math.sin(t * speed);
+		const flicker = (Math.random() - .5) * .1;
 		return Math.max(0, Math.min(1, base + fade * variation + flicker));
 	});
-	var hitbox = object.hitbox;
-	var position = computed(function() {
-		return {
-			x: hitbox().w / 2,
-			y: hitbox().h / 2
-		};
-	});
-	var blurFilter = new BlurFilter({
+	const hitbox = object.hitbox;
+	const position = computed(() => ({
+		x: hitbox().w / 2,
+		y: hitbox().h / 2
+	}));
+	const blurFilter = new BlurFilter({
 		strength: 20,
 		quality: 3
 	});
-	var drawHalo = function(g) {
-		var radius = currentRadius();
-		var opacity = currentOpacity();
-		var color = getLightColor();
+	const drawHalo = (g) => {
+		const radius = currentRadius();
+		const opacity = currentOpacity();
+		const color = getLightColor();
 		if (opacity <= 0 || radius <= 0) return;
 		g.blendMode = "add";
 		g.filters = [blurFilter];
@@ -78,10 +55,8 @@ function component($$props) {
 			alpha: opacity * .5
 		});
 	};
-	tick(function() {
-		time.update(function(t) {
-			return t + 1;
-		});
+	tick(() => {
+		time.update((t) => t + 1);
 	});
 	return h(Container, {
 		x: position.x,

package/dist/components/prebuilt/light-halo.ce.js.map

@@ -1 +1 @@
-{"version":3,"file":"light-halo.ce.js","names":[],"sources":["../../../src/components/prebuilt/light-halo.ce"],"sourcesContent":["<Container x={position.x} y={position.y}>\n  <Graphics draw={drawHalo}  />\n</Container>\n\n<script>\nimport { computed, signal, tick, mount } from \"canvasengine\";\nimport { BlurFilter } from \"pixi.js\";\n\n/**\n * Component props for LightHalo\n * \n * All props are signals (even static ones) and must be read with `()`.\n * Props are optional and will use default values if not provided.\n * \n * @property {Object} object - The sprite object (required)\n * @property {number|Signal<number>} [baseRadius] - Base radius of the light halo in pixels (default: 30)\n * @property {number|Signal<number>} [radiusVariation] - Radius variation range (halo will pulse between baseRadius ± radiusVariation) (default: 10)\n * @property {number|Signal<number>} [baseOpacity] - Base opacity of the light halo (0 to 1) (default: 0.6)\n * @property {number|Signal<number>} [opacityVariation] - Opacity variation range (halo will fade between baseOpacity ± opacityVariation) (default: 0.3)\n * @property {number|Signal<number>} [sizeSpeed] - Animation speed for size pulsing (higher = faster) (default: 0.002)\n * @property {number|Signal<number>} [opacitySpeed] - Animation speed for opacity fading (higher = faster) (default: 0.003)\n * @property {number|Signal<number>} [lightColor] - Color of the light halo (hex value, warm yellow-white by default: 0xffffaa)\n */\nconst { \n  object, \n  baseRadius,\n  radiusVariation,\n  baseOpacity,\n  opacityVariation,\n  sizeSpeed,\n  opacitySpeed,\n  lightColor\n} = defineProps();\n\n// ====================\n// Props with default values\n// ====================\n\nconst getBaseRadius = computed(() => baseRadius?.() ?? 30);\nconst getRadiusVariation = computed(() => radiusVariation?.() ?? 10);\nconst getBaseOpacity = computed(() => baseOpacity?.() ?? 0.6);\nconst getOpacityVariation = computed(() => opacityVariation?.() ?? 0.3);\nconst getSizeSpeed = computed(() => sizeSpeed?.() ?? 0.002);\nconst getOpacitySpeed = computed(() => opacitySpeed?.() ?? 0.003);\nconst getLightColor = computed(() => lightColor?.() ?? 0xffffaa);\n\n// ====================\n// Animation state\n// ====================\n\n/** Time counter for animations */\nconst time = signal(0);\n\n/**\n * Current radius of the halo with pulsing animation\n * Uses multiple sine waves for more organic movement\n */\nconst currentRadius = computed(() => {\n  const t = time();\n  const base = getBaseRadius();\n  const variation = getRadiusVariation();\n  const speed = getSizeSpeed();\n  \n  // Combine two sine waves for less predictable pulsing\n  const pulse1 = Math.sin(t * speed);\n  const pulse2 = Math.sin(t * speed * 1.5) * 0.5;\n  const combinedPulse = (pulse1 + pulse2) / 1.5;\n  \n  return base + (combinedPulse * variation);\n});\n\n/**\n * Current opacity of the halo with fading animation\n * Includes a subtle flicker effect\n */\nconst currentOpacity = computed(() => {\n  const t = time();\n  const base = getBaseOpacity();\n  const variation = getOpacityVariation();\n  const speed = getOpacitySpeed();\n  \n  // Main breathing cycle\n  const fade = Math.sin(t * speed);\n  \n  // Subtle high-frequency flicker (candle-like)\n  const flicker = (Math.random() - 0.5) * 0.1;\n  \n  return Math.max(0, Math.min(1, base + (fade * variation) + flicker));\n});\n\n// ====================\n// Position calculations\n// ====================\n\nconst hitbox = object.hitbox;\n\nconst position = computed(() => ({\n  x: hitbox().w / 2,\n  y: hitbox().h / 2\n}));\n\n// ====================\n// Drawing function\n// ====================\n\n// Create filters once to avoid recreation on every frame\nconst blurFilter = new BlurFilter({ strength: 20, quality: 3 });\n\n/**\n * Draws the light halo effect with realistic diffusion\n */\nconst drawHalo = (g) => {\n  const radius = currentRadius();\n  const opacity = currentOpacity();\n  const color = getLightColor();\n  \n  if (opacity <= 0 || radius <= 0) return;\n\n  // Set blend mode to ADD for glowing light effect\n  g.blendMode = 'add';\n  \n  // Apply blur filter for soft light diffusion\n  g.filters = [blurFilter];\n  \n  // Draw main light source\n  // The blur filter will spread this out into a nice gradient\n  g.circle(0, 0, radius);\n  g.fill({ \n    color: color, \n    alpha: opacity \n  });\n  \n  // Draw a smaller, brighter core\n  g.circle(0, 0, radius * 0.4);\n  g.fill({ \n    color: 0xffffff, \n    alpha: opacity * 0.5 \n  });\n};\n\n// ====================\n// Animation loop\n// ====================\ntick(() => {\n  time.update(t => t + 1);\n});\n</script>\n\n"],"mappings":"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"}
+{"version":3,"file":"light-halo.ce.js","names":[],"sources":["../../../src/components/prebuilt/light-halo.ce"],"sourcesContent":["<Container x={position.x} y={position.y}>\n  <Graphics draw={drawHalo}  />\n</Container>\n\n<script>\nimport { computed, signal, tick, mount } from \"canvasengine\";\nimport { BlurFilter } from \"pixi.js\";\n\n/**\n * Component props for LightHalo\n * \n * All props are signals (even static ones) and must be read with `()`.\n * Props are optional and will use default values if not provided.\n * \n * @property {Object} object - The sprite object (required)\n * @property {number|Signal<number>} [baseRadius] - Base radius of the light halo in pixels (default: 30)\n * @property {number|Signal<number>} [radiusVariation] - Radius variation range (halo will pulse between baseRadius ± radiusVariation) (default: 10)\n * @property {number|Signal<number>} [baseOpacity] - Base opacity of the light halo (0 to 1) (default: 0.6)\n * @property {number|Signal<number>} [opacityVariation] - Opacity variation range (halo will fade between baseOpacity ± opacityVariation) (default: 0.3)\n * @property {number|Signal<number>} [sizeSpeed] - Animation speed for size pulsing (higher = faster) (default: 0.002)\n * @property {number|Signal<number>} [opacitySpeed] - Animation speed for opacity fading (higher = faster) (default: 0.003)\n * @property {number|Signal<number>} [lightColor] - Color of the light halo (hex value, warm yellow-white by default: 0xffffaa)\n */\nconst { \n  object, \n  baseRadius,\n  radiusVariation,\n  baseOpacity,\n  opacityVariation,\n  sizeSpeed,\n  opacitySpeed,\n  lightColor\n} = defineProps();\n\n// ====================\n// Props with default values\n// ====================\n\nconst getBaseRadius = computed(() => baseRadius?.() ?? 30);\nconst getRadiusVariation = computed(() => radiusVariation?.() ?? 10);\nconst getBaseOpacity = computed(() => baseOpacity?.() ?? 0.6);\nconst getOpacityVariation = computed(() => opacityVariation?.() ?? 0.3);\nconst getSizeSpeed = computed(() => sizeSpeed?.() ?? 0.002);\nconst getOpacitySpeed = computed(() => opacitySpeed?.() ?? 0.003);\nconst getLightColor = computed(() => lightColor?.() ?? 0xffffaa);\n\n// ====================\n// Animation state\n// ====================\n\n/** Time counter for animations */\nconst time = signal(0);\n\n/**\n * Current radius of the halo with pulsing animation\n * Uses multiple sine waves for more organic movement\n */\nconst currentRadius = computed(() => {\n  const t = time();\n  const base = getBaseRadius();\n  const variation = getRadiusVariation();\n  const speed = getSizeSpeed();\n  \n  // Combine two sine waves for less predictable pulsing\n  const pulse1 = Math.sin(t * speed);\n  const pulse2 = Math.sin(t * speed * 1.5) * 0.5;\n  const combinedPulse = (pulse1 + pulse2) / 1.5;\n  \n  return base + (combinedPulse * variation);\n});\n\n/**\n * Current opacity of the halo with fading animation\n * Includes a subtle flicker effect\n */\nconst currentOpacity = computed(() => {\n  const t = time();\n  const base = getBaseOpacity();\n  const variation = getOpacityVariation();\n  const speed = getOpacitySpeed();\n  \n  // Main breathing cycle\n  const fade = Math.sin(t * speed);\n  \n  // Subtle high-frequency flicker (candle-like)\n  const flicker = (Math.random() - 0.5) * 0.1;\n  \n  return Math.max(0, Math.min(1, base + (fade * variation) + flicker));\n});\n\n// ====================\n// Position calculations\n// ====================\n\nconst hitbox = object.hitbox;\n\nconst position = computed(() => ({\n  x: hitbox().w / 2,\n  y: hitbox().h / 2\n}));\n\n// ====================\n// Drawing function\n// ====================\n\n// Create filters once to avoid recreation on every frame\nconst blurFilter = new BlurFilter({ strength: 20, quality: 3 });\n\n/**\n * Draws the light halo effect with realistic diffusion\n */\nconst drawHalo = (g) => {\n  const radius = currentRadius();\n  const opacity = currentOpacity();\n  const color = getLightColor();\n  \n  if (opacity <= 0 || radius <= 0) return;\n\n  // Set blend mode to ADD for glowing light effect\n  g.blendMode = 'add';\n  \n  // Apply blur filter for soft light diffusion\n  g.filters = [blurFilter];\n  \n  // Draw main light source\n  // The blur filter will spread this out into a nice gradient\n  g.circle(0, 0, radius);\n  g.fill({ \n    color: color, \n    alpha: opacity \n  });\n  \n  // Draw a smaller, brighter core\n  g.circle(0, 0, radius * 0.4);\n  g.fill({ \n    color: 0xffffff, \n    alpha: opacity * 0.5 \n  });\n};\n\n// ====================\n// Animation loop\n// ====================\ntick(() => {\n  time.update(t => t + 1);\n});\n</script>\n\n"],"mappings":";;;AAQE,SAAA,UAAA,SAAA;AACqB,UAAA,QAAA;CAEhB,MAAM,EAAG,QAAQ,YAAO,iBAAsB,aAAa,kBAAI,WAAA,cAAA,eADpE,eAAA,QACoE,EAAA;CACtE,MAAG,gBAAmB,eAAa,cAAe,IAAG,GAAI;CACzD,MAAE,qBAAA,eAAA,mBAAA,IAAA,GAAA;CACF,MAAI,iBAAkB,eAAa,eAAe,IAAA,GAAQ;CAC1D,MAAI,sBAAwB,eAAU,oBAAyB,IAAI,GAAI;CACvE,MAAI,eAAiB,eAAe,aAAE,IAAe,KAAI;CACzD,MAAI,kBAAiB,eAAiB,gBAAe,IAAK,KAAO;CACjE,MAAI,gBAAiB,eAAgB,cAAC,IAAiB,SAAG;CAC1D,MAAI,OAAS,OAAO,EAAC;CACrB,MAAI,gBAAiB,eAAgB;EACjC,MAAA,IAAU,MAAM;EAClB,MAAA,OAAA,eAAA;EACF,MAAO,YAAA,oBAAA;EACL,MAAO,QAAA,cAAA;AAKP,SAAS,QAHM,KAAA,IAAA,IAAA,MAEC,GADL,KAAA,IAAA,IAAA,QAAA,IAAA,GAAA,MACK,MACP;GACT;CACF,MAAE,iBAAA,eAAA;EACE,MAAA,IAAA,MAAa;;EAEb,MAAM,YAAY,qBAAA;EACnB,MAAM,QAAK,iBAAQ;;EAItB,MAAM,WAAA,KAAoB,QAAC,GAAU,MAAK;AAC1C,SAAM,KAAA,IAAc,GAAG,KAAA,IAAS,GAAG,OAAG,OAAY,YAAW,QAAA,CAAA;GAC7D;CACA,MAAM,SAAA,OAAe;CACrB,MAAM,WAAA,gBAA2B;EACjC,GAAM,QAAA,CAAA,IAAc;;EAEnB,EAAE;CACH,MAAG,aAAU,IAAA,WAAA;EAAA,UAAA;EAAA,SAAA;EAAA,CAAA;CACb,MAAM,YAAY,MAAI;;EAElB,MAAK,UAAW,gBAAa;EACjC,MAAU,QAAG,eAAS;kCAEpB;AAEC,IAAA,YAAc;AAEjB,IAAM,UAAA,CAAA,WAAgB;AAGpB,IAAA,OAAM,GAAA,GAAW,OAAC;AAClB,IAAA,KAAM;GACP;GACI,OAAQ;GACX,CAAA;AAEA,IAAA,OAAM,GAAA,GAAA,SAAiB,GAAO;AAC/B,IAAA,KAAA;GACO,OAAO;GACb,OAAA,UAAA;;;AAGF,YAAW;AACR,OAAA,QAAW,MAAO,IAAA,EAAA;GACnB;AAEM,QADY,EAAE,WAAW;EAAE,GAAG,SAAA;EAAA,GAAA,SAAA;EAAA,EAAA,EAAA,UAAA,EAAA,MAAA,UAAA,CAAA,CACpB"}

package/dist/components/scenes/canvas.ce.js

@@ -8,31 +8,23 @@ import { delay } from "@rpgjs/common";
 function component($$props) {
 	useProps($$props);
 	useDefineProps($$props);
-	var engine = inject(RpgClientEngine);
-	var guiService = inject(RpgGui);
-	var sceneData = engine.sceneMap.data;
-	var guiList = computed(function() {
-		return Object.values(guiService.gui()).filter(function(gui) {
-			return !gui.attachToSprite;
-		});
-	});
-	var worldWidth = computed(function() {
-		var _a;
-		return (_a = sceneData()) === null || _a === void 0 ? void 0 : _a.width;
-	});
-	var worldHeight = computed(function() {
-		var _a;
-		return (_a = sceneData()) === null || _a === void 0 ? void 0 : _a.height;
+	const engine = inject(RpgClientEngine);
+	const guiService = inject(RpgGui);
+	const sceneData = engine.sceneMap.data;
+	const guiList = computed(() => {
+		return Object.values(guiService.gui()).filter((gui) => !gui.attachToSprite);
 	});
-	effect(function() {
+	const worldWidth = computed(() => sceneData()?.width);
+	const worldHeight = computed(() => sceneData()?.height);
+	effect(() => {
 		if (sceneData() && !sceneData().component) throw new Error("Warning ! You need to define a component for the scene. Use provideLoadMap() to define a component for the scene.");
 	});
-	var onGuiFinish = function(gui, data) {
-		delay(function() {
+	const onGuiFinish = (gui, data) => {
+		delay(() => {
 			guiService.guiClose(gui.name, data);
 		});
 	};
-	var onGuiInteraction = function(gui, name, data) {
+	const onGuiInteraction = (gui, name, data) => {
 		guiService.guiInteraction(gui.name, name, data);
 	};
 	return h(Canvas, {

package/dist/components/scenes/canvas.ce.js.map

@@ -1 +1 @@
-{"version":3,"file":"canvas.ce.js","names":[],"sources":["../../../src/components/scenes/canvas.ce"],"sourcesContent":["<Canvas width={engine.width} height={engine.height}>\n  <Viewport worldWidth worldHeight clamp sortableChildren={true}>\n    @if (sceneData) {\n      <SceneMap />\n    }\n  </Viewport>\n  @for (gui of guiList) {\n      <Container display=\"flex\">\n        @if (gui.display) {\n          <gui.component data={gui.data} dependencies={gui.dependencies} onFinish={(data) => {\n            onGuiFinish(gui, data)\n          }} onInteraction={(name, data) => {\n            onGuiInteraction(gui, name, data)\n          }} /> \n        }\n      </Container>\n  }\n</Canvas>\n\n<script>\n  import { signal, computed, effect } from \"canvasengine\";\n  import { inject } from \"../../core/inject\";\n  import { RpgClientEngine } from \"../../RpgClientEngine\";\n  import SceneMap from './draw-map.ce'\n  import { RpgGui } from \"../../Gui/Gui\";\n  import { delay } from \"@rpgjs/common\";\n\n  const engine = inject(RpgClientEngine);\n  const guiService = inject(RpgGui);\n  const sceneData = engine.sceneMap.data\n  const guiList = computed(() => {\n    return Object.values(guiService.gui()).filter((gui) => !gui.attachToSprite)\n  })\n  const worldWidth = computed(() => sceneData()?.width)\n  const worldHeight = computed(() => sceneData()?.height)\n\n  effect(() => {\n     if (sceneData() && !sceneData().component) {\n       throw new Error(\"Warning ! You need to define a component for the scene. Use provideLoadMap() to define a component for the scene.\")\n     }\n  })\n\n  const onGuiFinish = (gui, data) => {\n    delay(() => {\n      guiService.guiClose(gui.name, data)\n    })\n  }\n\n  const onGuiInteraction = (gui, name, data) => {\n    guiService.guiInteraction(gui.name, name, data)\n  }\n  \n  const clamp = {\n    direction: \"all\"\n  }\n</script>\n"],"mappings":";;;;;;;AAaM,SAAS,UAAA,SAAA;AACP,UAAA,QAAA;AACS,gBAAA,QAAA;CACf,IAAA,SAAA,OAAA,gBAAA;CACF,IAAE,aAAM,OAAA,OAAA;;CAER,IAAC,UAAM,SAAA,WAAA;AACL,SAAS,OAAO,OAAC,WAAiB,KAAE,CAAI,CAAC,OAAC,SAAa,KAAA;AAAA,UAAA,CAAA,IAAA;IAAA;GACvD;CACF,IAAE,aAAS,SAAe,WAAY;EAAE,IAAC;AAAA,UAAe,KAAC,WAAA,MAAA,QAAA,OAAA,KAAA,IAAA,KAAA,IAAA,GAAA;GAAA;CACzD,IAAE,cAAgB,SAAQ,WAAW;EAAA,IAAA;AAAA,UAAA,KAAA,WAAA,MAAA,QAAA,OAAA,KAAA,IAAA,KAAA,IAAA,GAAA;GAAA;AACrC,QAAE,WAAiB;AACjB,MAAM,WAAW,IAAI,CAAC,WAAQ,CAAA,UAAA,OAAA,IAAA,MAAA,oHAAA;GAG9B;CACF,IAAE,cAAgB,SAAS,KAAA,MAAS;AAClC,QAAM,WAAU;AACd,cAAc,SAAO,IAAA,MAAW,KAAO;IACxC;;CAEH,IAAE,mBAAoB,SAAW,KAAI,MAAA,MAAa;;;AAW7C,QALF,EAAA,QAAA;EAAA,OAAA,OAAA;EAAA,QAAA,OAAA;EAAA,EAAA,CAAA,EAAA,UAAA;EAAA;EAAA;EAAA,OAHM,EACL,WAAS,OACZ;EACE,kBAAA;EAAA,EAAA,KAAA,iBAAA,EAAA,YAAA,CAAA,CAAA,EAAA,KAAA,UAAA,QAAA,EAAA,WAAA,EAAA,SAAA,QAAA,EAAA,KAAA,IAAA,eAAA,EAAA,IAAA,WAAA;EAAA,MAAA,IAAA;EAAA,cAAA,IAAA;EAAA,WAAA,SAAA;;;EAEK,gBAAoB,MAAO,SAAE;AACzB,oBAAI,KAAA,MAAA,KAAA;;EACV,CAAA,CAAA,CAAU,CAAC,CAAA,CAAA"}
+{"version":3,"file":"canvas.ce.js","names":[],"sources":["../../../src/components/scenes/canvas.ce"],"sourcesContent":["<Canvas width={engine.width} height={engine.height}>\n  <Viewport worldWidth worldHeight clamp sortableChildren={true}>\n    @if (sceneData) {\n      <SceneMap />\n    }\n  </Viewport>\n  @for (gui of guiList) {\n      <Container display=\"flex\">\n        @if (gui.display) {\n          <gui.component data={gui.data} dependencies={gui.dependencies} onFinish={(data) => {\n            onGuiFinish(gui, data)\n          }} onInteraction={(name, data) => {\n            onGuiInteraction(gui, name, data)\n          }} /> \n        }\n      </Container>\n  }\n</Canvas>\n\n<script>\n  import { signal, computed, effect } from \"canvasengine\";\n  import { inject } from \"../../core/inject\";\n  import { RpgClientEngine } from \"../../RpgClientEngine\";\n  import SceneMap from './draw-map.ce'\n  import { RpgGui } from \"../../Gui/Gui\";\n  import { delay } from \"@rpgjs/common\";\n\n  const engine = inject(RpgClientEngine);\n  const guiService = inject(RpgGui);\n  const sceneData = engine.sceneMap.data\n  const guiList = computed(() => {\n    return Object.values(guiService.gui()).filter((gui) => !gui.attachToSprite)\n  })\n  const worldWidth = computed(() => sceneData()?.width)\n  const worldHeight = computed(() => sceneData()?.height)\n\n  effect(() => {\n     if (sceneData() && !sceneData().component) {\n       throw new Error(\"Warning ! You need to define a component for the scene. Use provideLoadMap() to define a component for the scene.\")\n     }\n  })\n\n  const onGuiFinish = (gui, data) => {\n    delay(() => {\n      guiService.guiClose(gui.name, data)\n    })\n  }\n\n  const onGuiInteraction = (gui, name, data) => {\n    guiService.guiInteraction(gui.name, name, data)\n  }\n  \n  const clamp = {\n    direction: \"all\"\n  }\n</script>\n"],"mappings":";;;;;;;AAaM,SAAS,UAAA,SAAA;AACP,UAAA,QAAA;AACS,gBAAA,QAAA;CACf,MAAA,SAAA,OAAA,gBAAA;CACF,MAAE,aAAM,OAAA,OAAA;;CAER,MAAC,UAAM,eAAA;AACL,SAAS,OAAO,OAAC,WAAiB,KAAE,CAAI,CAAC,QAAC,QAAa,CAAA,IAAA,eAAA;GACvD;CACF,MAAE,aAAS,eAAuB,WAAO,EAAA,MAAA;CACzC,MAAE,cAAgB,eAAiB,WAAE,EAAA,OAAA;AACrC,cAAW;AACT,MAAM,WAAW,IAAI,CAAC,WAAQ,CAAA,UAAA,OAAA,IAAA,MAAA,oHAAA;GAG9B;CACF,MAAE,eAAkB,KAAM,SAAS;AACjC,cAAc;AACZ,cAAc,SAAO,IAAA,MAAW,KAAO;IACxC;;CAEH,MAAE,oBAAoB,KAAS,MAAM,SAAS;;;AAWzC,QALF,EAAA,QAAA;EAAA,OAAA,OAAA;EAAA,QAAA,OAAA;EAAA,EAAA,CAAA,EAAA,UAAA;EAAA;EAAA;EAAA,OAAA,EAFC,WAAS,OAEV;EAAA,kBAAA;EAAA,EAAA,KAAA,iBAAA,EAAA,YAAA,CAAA,CAAA,EAAA,KAAA,UAAA,QAAA,EAAA,WAAA,EAAA,SAAA,QAAA,EAAA,KAAA,IAAA,eAAA,EAAA,IAAA,WAAA;EAAA,MAAA,IAAA;EAAA,cAAA,IAAA;EAAA,WAAA,SAAA;;;EAEK,gBAAoB,MAAO,SAAE;AACzB,oBAAI,KAAA,MAAA,KAAA;;EACV,CAAA,CAAA,CAAU,CAAC,CAAA,CACZ"}