@rpgjs/client 5.0.0-beta.24 → 5.0.0-beta.26

package/src/Gui/Gui.ts

@@ -1,7 +1,7 @@
 import { Context, inject } from "@signe/di";
 import { signal, Signal, WritableSignal } from "canvasengine";
 import { AbstractWebsocket, WebSocketToken } from "../services/AbstractSocket";
-import { DialogboxComponent, ShopComponent, SaveLoadComponent, MainMenuComponent, NotificationComponent, TitleScreenComponent, GameoverComponent } from "../components/gui";
+import { DialogboxComponent, ShopComponent, SaveLoadComponent, MainMenuComponent, NotificationComponent, TitleScreenComponent, GameoverComponent, InputComponent } from "../components/gui";
 import { combineLatest, Subscription } from "rxjs";
 import { PrebuiltGui } from "@rpgjs/common";
 
@@ -176,6 +176,10 @@ export class RpgGui {
       name: PrebuiltGui.Gameover,
       component: GameoverComponent,
     });
+    this.add({
+      name: PrebuiltGui.Input,
+      component: InputComponent,
+    });
 
     this.registerOptimisticReducer(PrebuiltGui.MainMenu, mainMenuOptimisticReducer);
   }

package/src/RpgClient.ts

@@ -259,7 +259,8 @@ export interface RpgSceneHooks<Scene> {
     onRemoveSprite?: (scene: Scene, sprite: RpgComponent) => any
 
      /**
-     * Before the scene is loaded
+     * Before the scene is loaded. Async hooks are awaited while the previous
+     * scene is still mounted, allowing transition UI to cover it before teardown.
      * 
      * @prop { (scene: RpgScene) => any } [onBeforeLoading]
      * @memberof RpgSceneHooks

package/src/RpgClientEngine.ts

@@ -170,7 +170,40 @@ export class RpgClientEngine<T = any> {
   componentAnimations: any[] = [];
   clientVisuals = new ClientVisualRegistry();
   projectiles: ProjectileManager;
+  /**
+   * Read the latest pointer position tracked by the client canvas. World
+   * coordinates are suitable for action payloads and map interactions.
+   *
+   * @title pointer
+   * @prop pointer: ClientPointerContext
+   * @memberof RpgClientEngine
+   * @example
+   * ```ts
+   * const target = engine.pointer.world()
+   * if (target) engine.processAction('projectile:shoot', { target })
+   * ```
+   */
   pointer: ClientPointerContext = createClientPointerContext();
+  /**
+   * Register client-only pointer behaviors for map sprites. Interactions remain
+   * local unless a behavior explicitly sends an action to the server.
+   *
+   * See the [client interactions guide](../../guide/interactions.md) for hover,
+   * selection, hit testing, drag-and-drop, overlays, and network rules.
+   *
+   * @title interactions
+   * @prop interactions: RpgClientInteractions
+   * @memberof RpgClientEngine
+   * @example
+   * ```ts
+   * engine.interactions.use('Guard', {
+   *   cursor: 'pointer',
+   *   click(ctx) {
+   *     ctx.action('guard:talk', { eventId: ctx.target.id })
+   *   }
+   * })
+   * ```
+   */
   interactions: RpgClientInteractions = new RpgClientInteractions(this);
   private spritesheetResolver?: (id: string | number) => any | Promise<any>;
   private soundResolver?: (id: string) => any | Promise<any>;
@@ -218,6 +251,8 @@ export class RpgClientEngine<T = any> {
   private pingInterval: any = null;
   private readonly PING_INTERVAL_MS = 5000; // Send ping every 5 seconds
   private lastInputTime = 0;
+  private latestDirectionalInput?: RpgMovementInput;
+  private pendingMapTransferInput?: RpgMovementInput;
   private readonly MOVE_PATH_RESEND_INTERVAL_MS = 120;
   private readonly MAX_MOVE_TRAJECTORY_POINTS = 240;
   private lastMovePathSentAt = 0;
@@ -231,6 +266,7 @@ export class RpgClientEngine<T = any> {
   private sceneResetQueued = false;
   private mapTransitionInProgress = false;
   private currentMapRoomId?: string;
+  private activeMapStreamController?: { attach(map: RpgClientMap): void; detach(): void };
   private socketListenersInitialized = false;
   private clientReadyForMapChanges = false;
   private pendingMapChanges: any[] = [];
@@ -383,6 +419,7 @@ export class RpgClientEngine<T = any> {
     this.sceneMap.loadPhysic();
     this.resolveSceneMapComponent();
 
+    this.loadMapService.initialize?.();
     const saveClient = inject(SaveClientService);
     saveClient.initialize();
     this.initListeners();
@@ -888,11 +925,23 @@ export class RpgClientEngine<T = any> {
     })
   }
 
-  private beginMapTransfer(nextMapId?: string) {
+  private beginMapTransfer(
+    nextMapId?: string,
+    continueMovement = false,
+  ) {
+    this.pendingMapTransferInput = continueMovement
+      ? this.latestDirectionalInput
+      : undefined;
     this.mapTransitionInProgress = true;
     this.currentMapRoomId = nextMapId;
     this.sceneResetQueued = false;
-    this.clearClientPredictionStates();
+    this.clearMapTransferPredictionStates();
+  }
+
+  private resetSceneForMapTransfer(nextMapId?: string) {
+    // The before-loading hook has now covered the previous scene. Unmount it
+    // before reconnecting so stale map content cannot appear behind the loader.
+    this.sceneMap.data.set(null);
     this.sceneMap.weatherState.set(null);
     this.sceneMap.lightingState.set(null);
     this.sceneMap.clearLightSpots();
@@ -936,7 +985,7 @@ export class RpgClientEngine<T = any> {
 
   private handleChangeMap(data: any) {
     const nextMapId = typeof data?.mapId === "string" ? data.mapId : undefined;
-    this.beginMapTransfer(nextMapId);
+    this.beginMapTransfer(nextMapId, data?.continueMovement === true);
     const transferToken = typeof data?.transferToken === "string" ? data.transferToken : undefined;
     this.loadScene(data.mapId, transferToken);
   }
@@ -1067,10 +1116,25 @@ export class RpgClientEngine<T = any> {
   }
 
   private async loadScene(mapId: string, transferToken?: string) {
+    // Keep the previous scene mounted while async before-loading hooks install
+    // and animate their transition UI. The hook contract is awaited, allowing
+    // modules to report when the old scene is fully covered.
     await lastValueFrom(this.hooks.callHooks("client-sceneMap-onBeforeLoading", this.sceneMap));
 
-    // Clear client prediction states when changing maps
-    this.clearClientPredictionStates();
+    this.activeMapStreamController?.detach();
+    this.activeMapStreamController = undefined;
+    if (this.mapTransitionInProgress) {
+      this.resetSceneForMapTransfer(mapId);
+    }
+
+    // A session-transferred player keeps the last acknowledged input frame on
+    // the server. Preserve the client's monotonic frame sequence so movement
+    // sent in the destination room is not discarded as stale.
+    if (this.mapTransitionInProgress) {
+      this.clearMapTransferPredictionStates();
+    } else {
+      this.clearClientPredictionStates();
+    }
 
     // Reset all conditions for new map loading
     this.mapLoadCompleted$.next(false);
@@ -1095,6 +1159,7 @@ export class RpgClientEngine<T = any> {
     }
     catch (error) {
       this.mapTransitionInProgress = false;
+      this.pendingMapTransferInput = undefined;
       this.stopPingPong();
       await this.callConnectError(error);
       throw error;
@@ -1130,6 +1195,33 @@ export class RpgClientEngine<T = any> {
     this.mapTransitionInProgress = false;
     this.sceneMap.configureClientPrediction(this.predictionEnabled);
     this.sceneMap.loadPhysic()
+    if (res?.streamController) {
+      const controller = res.streamController;
+      this.activeMapStreamController = controller;
+      controller.attach(this.sceneMap);
+    }
+    const transferInput = this.pendingMapTransferInput;
+    this.pendingMapTransferInput = undefined;
+    if (transferInput !== undefined) {
+      void this.resumeMapTransferMovement(transferInput, mapId);
+    }
+  }
+
+  private async resumeMapTransferMovement(
+    input: RpgMovementInput,
+    mapId: string,
+  ): Promise<void> {
+    const repeatCount = 4;
+    const repeatIntervalMs = 50;
+    for (let index = 0; index < repeatCount; index += 1) {
+      if (this.mapTransitionInProgress || this.currentMapRoomId !== mapId) return;
+      await this.processInput({ input });
+      if (index < repeatCount - 1) {
+        await new Promise<void>((resolve) =>
+          setTimeout(resolve, repeatIntervalMs),
+        );
+      }
+    }
   }
 
   addSpriteSheet<T = any>(spritesheetClass: any, id?: string): any {
@@ -1860,6 +1952,9 @@ export class RpgClientEngine<T = any> {
       ? normalizeDashInput(input, currentPlayer?.direction?.())
       : input;
     if (!movementInput) return;
+    if (!isDashInput(movementInput)) {
+      this.latestDirectionalInput = movementInput;
+    }
     if (isDashInput(movementInput)) {
       const cooldown = movementInput.cooldown ?? DEFAULT_DASH_COOLDOWN_MS;
       if (timestamp < this.dashLockedUntil) return;
@@ -1897,7 +1992,26 @@ export class RpgClientEngine<T = any> {
       : Date.now();
   }
 
-  async processDash(input: Partial<RpgDashInput> = {}) {
+  /**
+   * Start a predicted dash for the current player and send it through the
+   * authoritative movement channel.
+   *
+   * @title processDash
+   * @method processDash(input?: Partial<RpgDashInput>): Promise<void>
+   * @param input - Optional direction, speed, duration, and cooldown overrides.
+   * @returns A promise resolved after the dash input has been processed locally.
+   * @memberof RpgClientEngine
+   * @example
+   * ```ts
+   * await engine.processDash({
+   *   direction: { x: 1, y: 0 },
+   *   additionalSpeed: 10,
+   *   duration: 220,
+   *   cooldown: 600,
+   * })
+   * ```
+   */
+  async processDash(input: Partial<RpgDashInput> = {}): Promise<void> {
     const currentPlayer = this.sceneMap.getCurrentPlayer() as any;
     const fallbackDirection =
       typeof currentPlayer?.direction === "function"
@@ -1908,6 +2022,24 @@ export class RpgClientEngine<T = any> {
     await this.processInput({ input: dashInput });
   }
 
+  /**
+   * Send an action intent to the authoritative server. Client-provided data
+   * must be validated by the receiving player input handler or action.
+   *
+   * @title processAction
+   * @method processAction(action: RpgActionName | RpgActionInput, data?: any): void
+   * @param action - Action name/control value, or a normalized action object.
+   * @param data - Optional serializable context sent with an action name.
+   * @returns Nothing.
+   * @memberof RpgClientEngine
+   * @example
+   * ```ts
+   * engine.processAction('projectile:shoot', {
+   *   target: engine.pointer.world(),
+   *   source: 'map-click',
+   * })
+   * ```
+   */
   processAction(action: RpgActionName, data?: any): void;
   processAction(action: RpgActionInput): void;
   processAction(action: RpgActionName | RpgActionInput, data?: any): void {
@@ -2298,6 +2430,15 @@ export class RpgClientEngine<T = any> {
     this.lastMovePathSentFrame = 0;
   }
 
+  private clearMapTransferPredictionStates(): void {
+    this.prediction?.clearPendingInputs();
+    this.frameOffset = 0;
+    this.pendingPredictionFrames = [];
+    this.lastClientPhysicsStepAt = 0;
+    this.lastMovePathSentAt = 0;
+    this.lastMovePathSentFrame = this.inputFrameCounter;
+  }
+
   /**
    * Stop local movement immediately and discard pending predicted movement.
    *

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

@@ -31,6 +31,15 @@
                                 </div>
                             </Navigation>
                         }
+                        @if (hasInput()) {
+                            <InputField
+                                data={dialogInput}
+                                layout="dialog"
+                                showMessage={false}
+                                submit={submitInput}
+                                cancel={cancelInput}
+                            />
+                        }
                     </div>
                     @if (hasFace()) {
                         <div class="rpg-ui-dialog-face">
@@ -57,6 +66,7 @@
     import { RpgClientEngine } from "../../../RpgClientEngine";
     import { delay } from "@rpgjs/common";
     import { getKeyboardControlBind } from "../../../services/actionInput";
+    import InputField from "../input-field.ce";
 
     const engine = inject(RpgClientEngine);
     const currentPlayer = engine.scene.currentPlayer
@@ -82,6 +92,8 @@
     const position = computed(() => dialogData().position);
     const typewriterEffect = computed(() => dialogData().typewriterEffect);
     const fullWidth = computed(() => dialogData().fullWidth || false);
+    const dialogInput = computed(() => dialogData().input || null);
+    const hasInput = computed(() => !!dialogInput());
 
     const resolveProp = (value) => typeof value === "function" ? value() : value;
     const normalizeOpenId = (value) => {
@@ -149,7 +161,7 @@
 
 
     const hasChoices = computed(() => dialogChoices().length > 0);
-    const showIndicator = computed(() => !hasChoices() && !isTyping());
+    const showIndicator = computed(() => !hasChoices() && !hasInput() && !isTyping());
     const nav = createTabindexNavigator(selectedItem, { count: () => dialogChoices().length }, 'wrap');
 
     function selectChoice(index) {
@@ -168,6 +180,10 @@
     };
 
     const closeDialog = () => {
+        if (hasInput()) {
+            onInteraction?.("cancel");
+            return;
+        }
         _onFinish();
     };
 
@@ -180,6 +196,14 @@
         _onFinish(index);
     };
 
+    const submitInput = (payload) => {
+        onInteraction?.("submit", payload);
+    };
+
+    const cancelInput = () => {
+        onInteraction?.("cancel");
+    };
+
     const canAcceptAction = () => Date.now() - openedAt >= ACTION_OPEN_GUARD_MS;
 
     const controls = signal({
@@ -231,6 +255,7 @@
                     finishTyping();
                     return;
                 }
+                if (hasInput()) return;
                 if (hasChoices()) return;
                 _onFinish();
             }

package/src/components/gui/index.ts

@@ -12,6 +12,8 @@ import ExitMenuComponent from "./menu/exit-menu.ce";
 import NotificationComponent from "./notification/notification.ce";
 import TitleScreenComponent from "./title-screen.ce";
 import GameoverComponent from "./gameover.ce";
+import InputComponent from "./input.ce";
+import InputFieldComponent from "./input-field.ce";
 
 export {
     DialogboxComponent,
@@ -27,5 +29,7 @@ export {
     ExitMenuComponent,
     NotificationComponent,
     TitleScreenComponent,
-    GameoverComponent
+    GameoverComponent,
+    InputComponent,
+    InputFieldComponent
 }

package/src/components/gui/input-field.ce

@@ -0,0 +1,106 @@
+<form
+  class="rpg-ui-input-form"
+  data-layout={layout()}
+  submit={submitForm}
+  keydown={handleKeydown}
+>
+  @if (showMessage()) {
+    <label class="rpg-ui-input-message" for={fieldId()}>{formData().message}</label>
+  }
+  @if (formData().control === "textarea") {
+    <textarea
+      id={fieldId()}
+      class="rpg-ui-input rpg-ui-input-dialog-field"
+      name="value"
+      value={value}
+      placeholder={formData().placeholder || ""}
+      rows={formData().rows || 4}
+      minlength={formData().minLength}
+      maxlength={formData().maxLength}
+      aria-required={formData().required ? "true" : "false"}
+    ></textarea>
+  }
+  @else {
+    <input
+      id={fieldId()}
+      class="rpg-ui-input rpg-ui-input-dialog-field"
+      name="value"
+      type={formData().type || "text"}
+      value={value}
+      placeholder={formData().placeholder || ""}
+      min={formData().min}
+      max={formData().max}
+      step={formData().step}
+      minlength={formData().minLength}
+      maxlength={formData().maxLength}
+      aria-required={formData().required ? "true" : "false"}
+    />
+  }
+  @if (errorText()) {
+    <div class="rpg-ui-input-error" role="alert">{errorText()}</div>
+  }
+  <div class="rpg-ui-input-actions">
+    @if (showCancelButton()) {
+      <button class="rpg-ui-btn rpg-ui-input-button rpg-ui-input-button-cancel" type="button" click={cancelForm}>
+        {formData().cancelText || t("rpg.input.cancel")}
+      </button>
+    }
+    <button
+      class="rpg-ui-btn rpg-ui-input-button rpg-ui-input-button-confirm"
+      data-variant="primary"
+      type="submit"
+    >
+      {formData().confirmText || t("rpg.input.confirm")}
+    </button>
+  </div>
+</form>
+
+<script>
+  import { computed, effect, signal } from "canvasengine";
+  import { inject } from "../../core/inject";
+  import { RpgClientEngine } from "../../RpgClientEngine";
+
+  const engine = inject(RpgClientEngine);
+  const { t } = engine.i18n();
+  const { data, layout, showMessage } = defineProps({
+    layout: "standalone",
+    showMessage: true,
+  });
+  const { submit, cancel } = defineEmits();
+  const formData = computed(() => data() || {});
+  const value = signal(String(formData().defaultValue ?? ""));
+  const fieldId = computed(() => `rpg-input-value-${layout()}`);
+  const errorText = computed(() => formData().errorKey
+    ? t(formData().errorKey, formData().errorParams || {})
+    : ""
+  );
+  const showCancelButton = computed(() => formData().cancelButton !== false);
+  let focused = false;
+
+  function submitForm(event, collectedData) {
+    const submittedValue = collectedData && Object.prototype.hasOwnProperty.call(collectedData, "value")
+      ? collectedData.value
+      : event?.currentTarget?.elements?.value?.value ?? value();
+    value.set(String(submittedValue ?? ""));
+    submit({ value: submittedValue ?? "" });
+  }
+
+  function cancelForm() {
+    cancel();
+  }
+
+  function handleKeydown(event) {
+    if (event?.key !== "Escape") return;
+    event.preventDefault?.();
+    event.stopPropagation?.();
+    cancelForm();
+  }
+
+  effect(() => {
+    if (focused) return;
+    focused = true;
+    setTimeout(() => {
+      document.getElementById(fieldId())?.focus?.();
+    });
+  });
+</script>

package/src/components/gui/input.ce

@@ -0,0 +1,26 @@
+<DOMContainer width="100%" height="100%">
+  <div class="rpg-ui-input-layer">
+    <div class="rpg-ui-input-dialog rpg-ui-window rpg-anim-fade-in">
+      @if (title()) {
+        <div class="rpg-ui-window-title">{title()}</div>
+      }
+      <InputField data={data} layout="standalone" submit={submit} cancel={cancel} />
+    </div>
+  </div>
+</DOMContainer>
+
+<script>
+  import { computed } from "canvasengine";
+  import InputField from "./input-field.ce";
+
+  const { data, onInteraction } = defineProps();
+  const title = computed(() => data().title || "");
+
+  function submit(payload) {
+    onInteraction?.("submit", payload);
+  }
+
+  function cancel() {
+    onInteraction?.("cancel");
+  }
+</script>

package/src/components/scenes/draw-map.ce

@@ -9,7 +9,7 @@
 
   <Container>
     @if (map() && sceneComponent()) {
-      <sceneComponent() data={map().data} params={map().params} />
+      <sceneComponent() data={map()?.data ?? emptySceneData} params={map()?.params ?? emptySceneParams} />
     }
   </Container>
 
@@ -38,6 +38,7 @@
 
 <script>
     import { computed, effect } from 'canvasengine'
+    import './weather-lifecycle-compat'
     import { inject } from "../../core/inject";
     import { RpgClientEngine } from "../../RpgClientEngine";
     import { Weather } from '@canvasengine/presets'
@@ -47,6 +48,8 @@
     const componentAnimations = engine.componentAnimations
     const projectiles = engine.projectiles.current
     const map = engine.sceneMap?.data
+    const emptySceneData = { params: {} }
+    const emptySceneParams = {}
     const sceneComponent = computed(() => map()?.component)
     const weather = engine.sceneMap.weather
     const backgroundMusic = computed(() => {

package/src/components/scenes/weather-lifecycle-compat.ts

@@ -0,0 +1,8 @@
+import "@canvasengine/presets";
+import { createComponent } from "canvasengine";
+import { patchWeatherTickLifecycle } from "./weather-tick-lifecycle";
+
+for (const tag of ["RainTextureLayer", "RainImpactLayer"]) {
+  const probe = createComponent(tag);
+  patchWeatherTickLifecycle(Object.getPrototypeOf(probe.componentInstance));
+}

package/src/components/scenes/weather-tick-lifecycle.spec.ts

@@ -0,0 +1,60 @@
+import { describe, expect, it, vi } from "vitest";
+import { patchWeatherTickLifecycle } from "./weather-tick-lifecycle";
+
+function deferred() {
+  let resolve!: () => void;
+  const promise = new Promise<void>((done) => {
+    resolve = done;
+  });
+  return { promise, resolve };
+}
+
+describe("patchWeatherTickLifecycle", () => {
+  it("stops a tick subscription created by a mount that finishes after destroy", async () => {
+    const started = deferred();
+    const mounted = deferred();
+    const unsubscribe = vi.fn();
+    const prototype = {
+      async onMount(this: any) {
+        started.resolve();
+        await mounted.promise;
+        this.tickSubscription = { unsubscribe };
+      },
+      onDestroy() {},
+    };
+    patchWeatherTickLifecycle(prototype);
+
+    const instance = Object.create(prototype);
+    const mounting = instance.onMount();
+    await started.promise;
+    instance.onDestroy();
+    mounted.resolve();
+    await mounting;
+
+    expect(unsubscribe).toHaveBeenCalledOnce();
+    expect(instance.tickSubscription).toBeUndefined();
+  });
+
+  it("serializes remounts and replaces the previous tick subscription", async () => {
+    const subscriptions = [
+      { unsubscribe: vi.fn() },
+      { unsubscribe: vi.fn() },
+    ];
+    const prototype = {
+      mountCount: 0,
+      async onMount(this: any) {
+        await Promise.resolve();
+        this.tickSubscription = subscriptions[this.mountCount++];
+      },
+      onDestroy() {},
+    };
+    patchWeatherTickLifecycle(prototype);
+
+    const instance = Object.create(prototype);
+    await Promise.all([instance.onMount(), instance.onMount()]);
+
+    expect(subscriptions[0].unsubscribe).toHaveBeenCalledOnce();
+    expect(subscriptions[1].unsubscribe).not.toHaveBeenCalled();
+    expect(instance.tickSubscription).toBe(subscriptions[1]);
+  });
+});

package/src/components/scenes/weather-tick-lifecycle.ts

@@ -0,0 +1,69 @@
+const PATCHED = Symbol.for("@rpgjs/client/weather-tick-lifecycle-patched");
+const DISPOSED = Symbol("weather-tick-lifecycle-disposed");
+const MOUNT_QUEUE = Symbol("weather-tick-lifecycle-mount-queue");
+
+type TickSubscription = {
+  unsubscribe?: () => void;
+};
+
+type TickSubscriptionInstance = {
+  destroyed?: boolean;
+  tickSubscription?: TickSubscription;
+  [DISPOSED]?: boolean;
+  [MOUNT_QUEUE]?: Promise<void>;
+};
+
+type TickSubscriptionPrototype = {
+  [PATCHED]?: boolean;
+  onMount?: (...args: any[]) => unknown;
+  onDestroy?: (...args: any[]) => unknown;
+};
+
+function stopTickSubscription(instance: TickSubscriptionInstance) {
+  instance.tickSubscription?.unsubscribe?.();
+  instance.tickSubscription = undefined;
+}
+
+/**
+ * CanvasEngine presets 2.0.0 can finish mounting a rain layer after that layer
+ * has already been destroyed. The late mount then leaves a tick subscription
+ * operating on a destroyed Pixi object. It can also overwrite an existing
+ * subscription when mounts overlap.
+ *
+ * Keep this compatibility patch local to the affected preset prototypes. It
+ * can be removed once the preset owns the same lifecycle guarantees.
+ */
+export function patchWeatherTickLifecycle(prototype: TickSubscriptionPrototype) {
+  if (!prototype || prototype[PATCHED]) return;
+
+  const originalOnMount = prototype.onMount;
+  const originalOnDestroy = prototype.onDestroy;
+  if (!originalOnMount || !originalOnDestroy) return;
+
+  Object.defineProperty(prototype, PATCHED, { value: true });
+
+  prototype.onMount = function (this: TickSubscriptionInstance, ...args: any[]) {
+    const mount = async () => {
+      if (this[DISPOSED] || this.destroyed) return;
+
+      stopTickSubscription(this);
+      await originalOnMount.apply(this, args);
+
+      if (this[DISPOSED] || this.destroyed) {
+        stopTickSubscription(this);
+      }
+    };
+
+    const pendingMount = (this[MOUNT_QUEUE] ?? Promise.resolve())
+      .catch(() => undefined)
+      .then(mount);
+    this[MOUNT_QUEUE] = pendingMount;
+    return pendingMount;
+  };
+
+  prototype.onDestroy = function (this: TickSubscriptionInstance, ...args: any[]) {
+    this[DISPOSED] = true;
+    stopTickSubscription(this);
+    return originalOnDestroy.apply(this, args);
+  };
+}

package/src/i18n.spec.ts

@@ -4,7 +4,7 @@ import { describe, expect, test } from "vitest";
 import { Context, injector } from "@signe/di";
 import { getOrCreateI18nService } from "@rpgjs/common";
 import { provideClientModules } from "./module";
-import { provideI18n } from "./i18n";
+import { provideI18n, RpgClientBuiltinI18n } from "./i18n";
 
 describe("client i18n", () => {
   test("merges client module translations with game overrides", async () => {
@@ -35,5 +35,6 @@ describe("client i18n", () => {
 
     expect(service.t("menu.title", undefined, "fr")).toBe("Titre du jeu");
     expect(service.t("menu.module-only", undefined, "fr")).toBe("Module");
+    expect(RpgClientBuiltinI18n.en["rpg.transition.loading"]).toBe("Loading area…");
   });
 });