@rpgjs/client 5.0.0-beta.12 → 5.0.0-beta.13

package/src/components/gui/dialogbox/index.ce

@@ -17,7 +17,7 @@
                     @if (hasChoices()) {
                         <Navigation tabindex={selectedItem} controls={controls}>
                             <div class="rpg-ui-dialog-choices">
-                                @for ((choice,index) of choices) {
+                                @for ((choice,index) of dialogChoices()) {
                                     <div
                                         class="rpg-ui-dialog-choice"
                                         class={{active: selectedItem() === index}}
@@ -62,27 +62,38 @@
     engine.stopProcessingInput = true;
 
     const selectedItem = signal(0)
-    let isDestroyed = false;
+    const ACTION_OPEN_GUARD_MS = 150;
+    const openedAt = Date.now();
 
     const {
         data,
         onFinish,
-        onInteraction
+        onInteraction,
+        guiOpenId
     } = defineProps();
 
-    const { message, choices, face, speaker, position, typewriterEffect, autoClose } = data();
-    const fullWidth = computed(() => data().fullWidth || false);
+    const dialogData = computed(() => data() || {});
+    const dialogChoices = computed(() => Array.isArray(dialogData().choices) ? dialogData().choices : []);
+    const message = computed(() => dialogData().message);
+    const speaker = computed(() => dialogData().speaker);
+    const position = computed(() => dialogData().position);
+    const typewriterEffect = computed(() => dialogData().typewriterEffect);
+    const fullWidth = computed(() => dialogData().fullWidth || false);
 
     const resolveProp = (value) => typeof value === "function" ? value() : value;
+    const normalizeOpenId = (value) => {
+        const resolved = resolveProp(value);
+        return typeof resolved === "string" && resolved.length > 0 ? resolved : undefined;
+    };
 
     const speakerName = computed(() => {
-        const value = resolveProp(speaker);
+        const value = resolveProp(speaker());
         return value ? String(value) : "";
     });
 
-    const dialogPosition = computed(() => resolveProp(position) || "bottom");
+    const dialogPosition = computed(() => resolveProp(position()) || "bottom");
     const isFullWidth = computed(() => resolveProp(fullWidth) !== false);
-    const dialogFace = computed(() => resolveProp(face));
+    const dialogFace = computed(() => resolveProp(dialogData().face));
     const hasFace = computed(() => {
         const value = dialogFace();
         return !!(value && value.id);
@@ -123,9 +134,9 @@
     };
 
     effect(() => {
-        const text = resolveProp(message) || "";
+        const text = resolveProp(message()) || "";
         fullMessage.set(text);
-        const useTypewriter = resolveProp(typewriterEffect) !== false;
+        const useTypewriter = resolveProp(typewriterEffect()) !== false;
         if (!useTypewriter) {
             finishTyping();
             return;
@@ -134,9 +145,9 @@
     });
 
 
-    const hasChoices = computed(() => choices.length > 0);
+    const hasChoices = computed(() => dialogChoices().length > 0);
     const showIndicator = computed(() => !hasChoices() && !isTyping());
-    const nav = createTabindexNavigator(selectedItem, { count: () => choices.length }, 'wrap');
+    const nav = createTabindexNavigator(selectedItem, { count: () => dialogChoices().length }, 'wrap');
 
     function selectChoice(index) {
         return function() {
@@ -146,13 +157,15 @@
     }
 
     function _onFinish(value) {
-        if (onFinish) onFinish(value);
+        if (onFinish) onFinish(value, normalizeOpenId(guiOpenId));
     }
 
     const onSelect = (index) => {
         _onFinish(index);
     };
 
+    const canAcceptAction = () => Date.now() - openedAt >= ACTION_OPEN_GUARD_MS;
+
     const controls = signal({
         up: {
             repeat: true,
@@ -175,6 +188,9 @@
         action: {
             bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
+                if (!canAcceptAction()) {
+                    return;
+                }
                 if (isTyping()) {
                     finishTyping();
                     return;
@@ -192,6 +208,9 @@
         action: {
             bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
+                if (!canAcceptAction()) {
+                    return;
+                }
                 if (isTyping()) {
                     finishTyping();
                     return;
@@ -203,6 +222,9 @@
     })
 
     const faceSheet = (faceValue) => {
+        if (!faceValue || !faceValue.id) {
+            return undefined;
+        }
         return {
             definition: engine.getSpriteSheet(faceValue.id),
             playing: faceValue.expression || "default",
@@ -211,7 +233,6 @@
 
     mount((element) => {
         return () => {
-            isDestroyed = true;
             // Wait destroy is finished before start processing input
             delay(() => {
                 engine.stopProcessingInput = false;

package/src/components/gui/gameover.ce

@@ -34,6 +34,7 @@
     import { getKeyboardControlBind } from "../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
+    const { t } = engine.i18n();
     const guiService = inject(RpgGui);
     const keyboardControls = engine.globalConfig.keyboardControls;
 
@@ -50,12 +51,12 @@
     });
 
     const defaultEntries = [
-        { id: "title", label: "Title Screen" },
-        { id: "load", label: "Load Game" }
+        { id: "title", label: t("rpg.gameover.title-screen") },
+        { id: "load", label: t("rpg.gameover.load-game") }
     ];
 
     const resolveProp = (value) => typeof value === "function" ? value() : value;
-    const titleText = computed(() => resolveProp(title) || "Game Over");
+    const titleText = computed(() => resolveProp(title) || t("rpg.gameover.title"));
     const subtitleText = computed(() => resolveProp(subtitle) || "");
     const localActionsEnabled = computed(() => resolveProp(localActions) === true);
 

package/src/components/gui/menu/equip-menu.ce

@@ -1,6 +1,6 @@
 <DOMContainer width="100%" height="100%">
     <div class="rpg-ui-menu-panel rpg-ui-panel">
-        <div class="rpg-ui-menu-panel-header">Equip</div>
+        <div class="rpg-ui-menu-panel-header">{t("rpg.menu.equip")}</div>
         <div class="rpg-ui-menu-panel-body rpg-ui-menu-panel-body-stacked">
             <div>
                 <div class="rpg-ui-menu-panel-details rpg-ui-panel">
@@ -16,7 +16,7 @@
                         </div>
                         <div>
                             <div class="rpg-ui-menu-panel-details-title">
-                                {detailsItem()?.name || currentSlot()?.label || "Equip"}
+                                {detailsItem()?.name || currentSlot()?.label || t("rpg.menu.equip")}
                             </div>
                             <div class="rpg-ui-menu-panel-details-desc">
                                 {detailsItem()?.description || ""}
@@ -93,6 +93,7 @@
     import { getKeyboardControlBind } from "../../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
+    const { t } = engine.i18n();
     const keyboardControls = engine.globalConfig.keyboardControls;
     const currentPlayer = engine.scene.currentPlayer;
 
@@ -104,8 +105,8 @@
     const slots = computed(() => data().slots);
 
     const defaultSlots = [
-        { id: "weapon", label: "Weapon", types: ["weapon"] },
-        { id: "armor", label: "Armor", types: ["armor"] }
+        { id: "weapon", label: t("rpg.menu.weapons"), types: ["weapon"] },
+        { id: "armor", label: t("rpg.menu.armor"), types: ["armor"] }
     ];
     const resolveProp = (value) => typeof value === "function" ? value() : value;
     const safeEquips = computed(() => {
@@ -170,15 +171,15 @@
         const items = slotItems().map((item) => ({
             ...item,
             kind: "item",
-            tag: itemEquipped(item) ? "Equipped" : ""
+            tag: itemEquipped(item) ? t("rpg.shop.equipped") : ""
         }));
         const equipped = currentEquippedItem();
         if (!equipped) return items;
         return [
             {
                 id: "__unequip__",
-                name: "Unequip",
-                description: "Remove the current equipment",
+                name: t("rpg.menu.unequip"),
+                description: t("rpg.menu.remove-equipment"),
                 kind: "unequip",
                 tag: ""
             },
@@ -197,7 +198,7 @@
         const slot = currentSlot();
         if (!slot) return "";
         const equipped = currentEquippedItem();
-        return equipped ? `${slot.label}: ${equipped.name}` : `${slot.label}: Empty`;
+        return equipped ? `${slot.label}: ${equipped.name}` : `${slot.label}: ${t("rpg.menu.empty")}`;
     });
     const listEmpty = computed(() => listEntries().length === 0);
 

package/src/components/gui/menu/exit-menu.ce

@@ -1,11 +1,11 @@
 <DOMContainer width="100%" height="100%" controls={controls}>
     <div class="rpg-ui-menu-panel rpg-ui-panel">
-        <div class="rpg-ui-menu-panel-header">Exit</div>
+        <div class="rpg-ui-menu-panel-header">{t("rpg.menu.exit")}</div>
         <div class="rpg-ui-menu-panel-body">
             <div class="rpg-ui-menu-panel-details">
-                <div class="rpg-ui-menu-panel-details-title">Leave the game?</div>
+                <div class="rpg-ui-menu-panel-details-title">{t("rpg.menu.leave-game")}</div>
                 <div class="rpg-ui-menu-panel-details-desc">
-                    Press Action to confirm or Escape to go back.
+                    {t("rpg.menu.exit-help")}
                 </div>
             </div>
         </div>
@@ -19,6 +19,7 @@
     import { getKeyboardControlBind } from "../../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
+    const { t } = engine.i18n();
     const keyboardControls = engine.globalConfig.keyboardControls;
     const { onConfirm, onBack } = defineProps();
 

package/src/components/gui/menu/items-menu.ce

@@ -1,6 +1,6 @@
 <DOMContainer width="100%" height="100%">
     <div class="rpg-ui-menu-panel rpg-ui-panel">
-        <div class="rpg-ui-menu-panel-header">Items</div>
+        <div class="rpg-ui-menu-panel-header">{t("rpg.menu.items")}</div>
         <div class="rpg-ui-menu-panel-body rpg-ui-menu-panel-body-stacked">
             <div>
                 @if (currentItem) {
@@ -65,7 +65,7 @@
         @if (confirmOpen) {
             <div class="rpg-ui-menu-confirm">
                 <div class="rpg-ui-menu-confirm-card">
-                    <div class="rpg-ui-menu-confirm-title">Use {confirmItem()?.name}?</div>
+                    <div class="rpg-ui-menu-confirm-title">{t("rpg.menu.use")} {confirmItem()?.name}?</div>
                     <Navigation tabindex={selectedConfirm} controls={confirmControls}>
                         <div class="rpg-ui-menu-confirm-actions">
                             @for ((option,index) of confirmOptions) {
@@ -93,6 +93,7 @@
     import { getKeyboardControlBind } from "../../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
+    const { t } = engine.i18n();
     const keyboardControls = engine.globalConfig.keyboardControls;
 
     const selectedItem = signal(0);
@@ -106,9 +107,9 @@
     const items = computed(() => data().items);
 
     const tabs = [
-        { id: "item", label: "Items" },
-        { id: "weapon", label: "Weapons" },
-        { id: "armor", label: "Armor" }
+        { id: "item", label: t("rpg.menu.items") },
+        { id: "weapon", label: t("rpg.menu.weapons") },
+        { id: "armor", label: t("rpg.menu.armor") }
     ];
 
     const resolveProp = (value) => typeof value === "function" ? value() : value;
@@ -125,8 +126,8 @@
     });
 
     const confirmOptions = [
-        { id: "use", label: "Use" },
-        { id: "cancel", label: "Cancel" }
+        { id: "use", label: t("rpg.menu.use") },
+        { id: "cancel", label: t("rpg.menu.cancel") }
     ];
 
     const nav = createTabindexNavigator(selectedItem, { count: () => filteredItems().length }, "wrap");

package/src/components/gui/menu/main-menu.ce

@@ -2,7 +2,7 @@
     <div class="rpg-ui-main-menu rpg-anim-fade-in">
         <div class="rpg-ui-main-menu-layout">
             <div class="rpg-ui-main-menu-left rpg-ui-menu rpg-ui-panel">
-                <div class="rpg-ui-menu-header">Menu</div>
+                <div class="rpg-ui-menu-header">{t("rpg.menu.title")}</div>
                 <div class="rpg-ui-main-menu-list">
                     @for ((entry,index) of menuEntries()) {
                         <div
@@ -18,14 +18,14 @@
             <div class="rpg-ui-main-menu-right">
                 @if (view() === "menu") {
                     <div class="rpg-ui-panel">
-                        <div class="rpg-ui-main-menu-section-title">Status</div>
+                        <div class="rpg-ui-main-menu-section-title">{t("rpg.menu.status")}</div>
                         <div class="rpg-ui-main-menu-status-card">
                             <div class="rpg-ui-main-menu-status-block">
-                                <div class="rpg-ui-main-menu-status-label">Level</div>
+                                <div class="rpg-ui-main-menu-status-label">{t("rpg.menu.level")}</div>
                                 <div class="rpg-ui-main-menu-status-value">{level()}</div>
                             </div>
                             <div class="rpg-ui-main-menu-status-block">
-                                <div class="rpg-ui-main-menu-status-label">Gold</div>
+                                <div class="rpg-ui-main-menu-status-label">{t("rpg.menu.gold")}</div>
                                 <div class="rpg-ui-main-menu-status-value">{gold()}</div>
                             </div>
                             <div class="rpg-ui-main-menu-status-block">
@@ -47,7 +47,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="rpg-ui-main-menu-section-title">Parameters</div>
+                        <div class="rpg-ui-main-menu-section-title">{t("rpg.menu.parameters")}</div>
                         <div class="rpg-ui-main-menu-params">
                             @for ((param,index) of paramsList) {
                                 <div class="rpg-ui-main-menu-param">
@@ -104,6 +104,7 @@
     import { getKeyboardControlBind } from "../../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
+    const { t } = engine.i18n();
     const currentPlayer = engine.scene.currentPlayer;
     const keyboardControls = engine.globalConfig.keyboardControls;
 
@@ -111,12 +112,12 @@
     const { menus, items, skills, equips, saveLoad } = data();
 
     const defaultMenus = [
-        { id: "items", label: "Items" },
-        { id: "skills", label: "Skills" },
-        { id: "equip", label: "Equip" },
-        { id: "options", label: "Options" },
-        { id: "save", label: "Save" },
-        { id: "exit", label: "Exit" }
+        { id: "items", label: t("rpg.menu.items") },
+        { id: "skills", label: t("rpg.menu.skills") },
+        { id: "equip", label: t("rpg.menu.equip") },
+        { id: "options", label: t("rpg.menu.options") },
+        { id: "save", label: t("rpg.menu.save") },
+        { id: "exit", label: t("rpg.menu.exit") }
     ];
 
     const menuEntries = computed(() => {

package/src/components/gui/menu/options-menu.ce

@@ -1,11 +1,11 @@
 <DOMContainer width="100%" height="100%" controls={controls}>
     <div class="rpg-ui-menu-panel rpg-ui-panel">
-        <div class="rpg-ui-menu-panel-header">Options</div>
+        <div class="rpg-ui-menu-panel-header">{t("rpg.menu.options")}</div>
         <div class="rpg-ui-menu-panel-body">
             <div class="rpg-ui-menu-panel-details">
-                <div class="rpg-ui-menu-panel-details-title">Options</div>
+                <div class="rpg-ui-menu-panel-details-title">{t("rpg.menu.options")}</div>
                 <div class="rpg-ui-menu-panel-details-desc">
-                    Configure your preferences here.
+                    {t("rpg.menu.options-help")}
                 </div>
             </div>
         </div>
@@ -18,6 +18,7 @@
     import { RpgClientEngine } from "../../../RpgClientEngine";
 
     const engine = inject(RpgClientEngine);
+    const { t } = engine.i18n();
     const keyboardControls = engine.globalConfig.keyboardControls;
     const { onBack } = defineProps();
 

package/src/components/gui/menu/skills-menu.ce

@@ -1,6 +1,6 @@
 <DOMContainer width="100%" height="100%">
     <div class="rpg-ui-menu-panel rpg-ui-panel">
-        <div class="rpg-ui-menu-panel-header">Skills</div>
+        <div class="rpg-ui-menu-panel-header">{t("rpg.menu.skills")}</div>
         <div class="rpg-ui-menu-panel-body rpg-ui-menu-panel-body-stacked">
             <div class="rpg-ui-menu-panel-details rpg-ui-panel">
                 @if (currentSkill) {
@@ -38,6 +38,7 @@
     import { RpgClientEngine } from "../../../RpgClientEngine";
 
     const engine = inject(RpgClientEngine);
+    const { t } = engine.i18n();
     const keyboardControls = engine.globalConfig.keyboardControls;
 
     const selectedSkill = signal(0);

package/src/components/gui/notification/notification.ce

@@ -1,4 +1,10 @@
-<DOMContainer width="100%" height="100%" zIndex={100} class="notification">
+<DOMContainer
+    width="100%"
+    height="100%"
+    zIndex={100}
+    class="notification"
+    style="pointer-events: none !important;"
+>
     <div class="rpg-ui-notifications">
         @for ((notif,index) of notifications) {
             <div

package/src/components/gui/save-load.ce

@@ -17,14 +17,14 @@
                         <div class="rpg-ui-save-load-slot-index">{item.label}</div>
                         @if (item.slot) {
                             <div class="rpg-ui-save-load-slot-meta">
-                                <div class="rpg-ui-save-load-slot-line">Level: {item.slot.level ?? "-"}</div>
-                                <div class="rpg-ui-save-load-slot-line">Exp: {item.slot.exp ?? "-"}</div>
-                                <div class="rpg-ui-save-load-slot-line">Map: {item.slot.map ?? "-"}</div>
-                                <div class="rpg-ui-save-load-slot-line">Date: {item.slot.date ?? "-"}</div>
+                                <div class="rpg-ui-save-load-slot-line">{t("rpg.save.level")}: {item.slot.level ?? "-"}</div>
+                                <div class="rpg-ui-save-load-slot-line">{t("rpg.save.exp")}: {item.slot.exp ?? "-"}</div>
+                                <div class="rpg-ui-save-load-slot-line">{t("rpg.save.map")}: {item.slot.map ?? "-"}</div>
+                                <div class="rpg-ui-save-load-slot-line">{t("rpg.save.date")}: {item.slot.date ?? "-"}</div>
                             </div>
                         }
                         @else {
-                            <div class="rpg-ui-save-load-slot-empty">Empty Slot</div>
+                            <div class="rpg-ui-save-load-slot-empty">{t("rpg.save.empty-slot")}</div>
                         }
                     </div>
                 }
@@ -43,6 +43,7 @@
     import { getKeyboardControlBind } from "../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
+    const { t } = engine.i18n();
     const saveClient = inject(SaveClientService);
     const gui = inject(RpgGui);
     const keyboardControls = engine.globalConfig.keyboardControls;
@@ -54,10 +55,10 @@
 
     const { data, onFinish } = defineProps();
 
-    const title = computed(() => data().mode === "save" ? "Save Game" : "Load Game");
+    const title = computed(() => data().mode === "save" ? t("rpg.save.title") : t("rpg.load.title"));
     const subtitle = computed(() => data().mode === "save"
-        ? "Choose a slot to overwrite or create."
-        : "Select a slot to load your progress."
+        ? t("rpg.save.subtitle")
+        : t("rpg.load.subtitle")
     );
 
     const slotsValue = computed(() => localSlots());
@@ -67,7 +68,7 @@
             kind: "slot",
             slot,
             slotIndex: index,
-            label: `Slot ${index + 1}`,
+            label: t("rpg.save.slot", { index: index + 1 }),
             readonly: false
         }));
         if (!data().showAutoSlot) return items;
@@ -79,7 +80,7 @@
                 kind: "auto",
                 slot: autoSlot,
                 slotIndex: index,
-                label: data().autoSlotLabel || "Auto Save",
+                label: data().autoSlotLabel || t("rpg.save.auto"),
                 readonly
             },
             ...items

package/src/components/gui/shop/shop.ce

@@ -30,7 +30,7 @@
                         <div class="rpg-shop-details rpg-shop-details-mode">
                             <div class="rpg-shop-details-header">
                             <div class="rpg-shop-details-icon">🛒</div>
-                            <h2 style="margin: 0;">Choose an action</h2>
+                            <h2 style="margin: 0;">{t("rpg.shop.choose-action")}</h2>
                         </div>
                         <div class="rpg-shop-trade">
                             <Navigation tabindex={selectedModeIndex} controls={modeControls}>
@@ -39,12 +39,12 @@
                                         class="rpg-shop-tab"
                                         class={{active: selectedModeIndex() === 0}}
                                         click={selectMode('buy')}
-                                    >Buy</div>
+                                    >{t("rpg.shop.buy")}</div>
                                     <div
                                         class="rpg-shop-tab"
                                         class={{active: selectedModeIndex() === 1}}
                                         click={selectMode('sell')}
-                                    >Sell</div>
+                                    >{t("rpg.shop.sell")}</div>
                                 </div>
                             </Navigation>
                         </div>
@@ -88,7 +88,7 @@
                                             <div class="rpg-shop-card-qty">x{{ item.quantity }}</div>
                                         }
                                         @if (item.equipped) {
-                                            <div class="rpg-shop-card-tag">Equipped</div>
+                                            <div class="rpg-shop-card-tag">{t("rpg.shop.equipped")}</div>
                                         }
                                     </div>
                                 }
@@ -109,12 +109,12 @@
                                 <h2 style="margin: 0;">{{ currentItem()?.name || "" }}</h2>
                                 <p style="color: #ffd700; font-weight: bold; margin: 8px 0;">{{ currentItem()?.price ?? 0 }} {{ goldTerm }}</p>
                                 @if (currentItem()?.quantity !== undefined) {
-                                    <div class="rpg-shop-details-qty">Qty: x{{ currentItem()?.quantity }}</div>
+                                    <div class="rpg-shop-details-qty">{t("rpg.shop.qty")}: x{{ currentItem()?.quantity }}</div>
                                 }
                             </div>
                             <div>
                                 @if (currentItem()?.equipped) {
-                                    <div class="rpg-shop-equipped">Already equipped</div>
+                                    <div class="rpg-shop-equipped">{t("rpg.shop.already-equipped")}</div>
                                 }
                             </div>
                             <div class="rpg-shop-details-desc">
@@ -137,7 +137,7 @@
                                     </div>
                                 }
                             </div>
-                            <button class="rpg-shop-btn" click={backToMode()}>Back</button>
+                            <button class="rpg-shop-btn" click={backToMode()}>{t("rpg.shop.back")}</button>
                         </div>
                     </div>
                     </div>
@@ -148,10 +148,10 @@
                             <div class="rpg-shop-modal-title">{{ actionLabel }}</div>
                             <div class="rpg-shop-modal-item">{{ currentItem()?.name || "" }}</div>
                             @if (currentItem()?.quantity !== undefined) {
-                                <div class="rpg-shop-modal-qty">Available: x{{ currentItem()?.quantity }}</div>
+                                <div class="rpg-shop-modal-qty">{t("rpg.shop.available")}: x{{ currentItem()?.quantity }}</div>
                             }
                             <div class="rpg-shop-quantity">
-                                <div class="rpg-shop-quantity-label">Quantity</div>
+                                <div class="rpg-shop-quantity-label">{t("rpg.shop.quantity")}</div>
                                 <div class="rpg-shop-quantity-controls">
                                     <button class="rpg-shop-btn" click={changeQuantity(-1)}>-</button>
                                     <div class="rpg-shop-quantity-value">{{ quantity }}</div>
@@ -159,11 +159,11 @@
                                 </div>
                             </div>
                             <div class="rpg-shop-modal-total">
-                                <span>Total</span>
+                                <span>{t("rpg.shop.total")}</span>
                                 <span>{{ totalPrice() }} {{ goldTerm }}</span>
                             </div>
                             <div class="rpg-shop-modal-actions">
-                                <button class="rpg-shop-btn rpg-shop-btn-secondary" click={closeQuantityDialog()}>Cancel</button>
+                                <button class="rpg-shop-btn rpg-shop-btn-secondary" click={closeQuantityDialog()}>{t("rpg.menu.cancel")}</button>
                                 <button class="rpg-shop-btn" click={confirmTrade()}>
                                     {{ actionLabel() }} x{{ quantity() }}
                                 </button>
@@ -183,6 +183,7 @@
     import { getKeyboardControlBind } from "../../../services/actionInput";
 
     const engine = inject(RpgClientEngine)
+    const { t } = engine.i18n()
     const currentPlayer = engine.scene.currentPlayer
     const keyboardControls = engine.globalConfig.keyboardControls
     const iconSheet = (iconId) => ({
@@ -198,11 +199,11 @@
     const selectedModeIndex = signal(0)
     const quantity = signal(1)
     const quantityDialogOpen = signal(false)
-    const defaultMessage = 'Welcome to my shop!'
+    const defaultMessage = t("rpg.shop.default-message")
     const tabs = [
-        { id: 'item', label: 'Items' },
-        { id: 'weapon', label: 'Weapons' },
-        { id: 'armor', label: 'Armor' }
+        { id: 'item', label: t("rpg.menu.items") },
+        { id: 'weapon', label: t("rpg.menu.weapons") },
+        { id: 'armor', label: t("rpg.menu.armor") }
     ]
 
     const { data, onInteraction , onFinish } = defineProps()
@@ -229,7 +230,7 @@
     })
     const currentItem = computed(() => filteredItems()[selectedItem()])
     const gold = computed(() => currentPlayer()._gold())
-    const actionLabel = computed(() => tradeMode() === 'buy' ? 'Buy' : 'Sell')
+    const actionLabel = computed(() => tradeMode() === 'buy' ? t("rpg.shop.buy") : t("rpg.shop.sell"))
     const faceSheet = (graphicId, animationName) => ({
         definition: engine.getSpriteSheet(graphicId),
         playing: animationName || "default"

package/src/components/gui/title-screen.ce

@@ -34,6 +34,7 @@
     import { getKeyboardControlBind } from "../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
+    const { t } = engine.i18n();
     const guiService = inject(RpgGui);
     const keyboardControls = engine.globalConfig.keyboardControls;
 
@@ -52,12 +53,12 @@
     const { entries, title, subtitle, version, saveLoad, localActions } = data();
 
     const defaultEntries = [
-        { id: "start", label: "Start" },
-        { id: "load", label: "Load" }
+        { id: "start", label: t("rpg.title.start") },
+        { id: "load", label: t("rpg.title.load") }
     ];
 
     const resolveProp = (value) => typeof value === "function" ? value() : value;
-    const titleText = computed(() => resolveProp(title) || "RPG");
+    const titleText = computed(() => resolveProp(title) || t("rpg.title.default"));
     const subtitleText = computed(() => resolveProp(subtitle) || "");
     const versionText = computed(() => resolveProp(version) || "");
     const localActionsEnabled = computed(() => resolveProp(localActions) === true);

package/src/components/interaction-components.ce

@@ -0,0 +1,23 @@
+<Container>
+  @for (entry of renderedComponents) {
+    <Container dependencies={entry.dependencies}>
+      <entry.component ...entry.props />
+    </Container>
+  }
+</Container>
+
+<script>
+  import { computed } from "canvasengine";
+  import { RpgClientEngine } from "../RpgClientEngine";
+  import { inject } from "../core/inject";
+
+  const { object, bounds, hitboxBounds, graphicBounds } = defineProps();
+  const client = inject(RpgClientEngine);
+  const sprite = object();
+
+  const renderedComponents = computed(() => client.interactions.getRenderedComponents(sprite, {
+    bounds: typeof bounds === "function" ? bounds() : undefined,
+    hitbox: typeof hitboxBounds === "function" ? hitboxBounds() : undefined,
+    graphic: typeof graphicBounds === "function" ? graphicBounds() : undefined,
+  }));
+</script>