Extract the dialog box into the @workadventure/npc-dialog-box package

[moufmouf]

Stacked on #2.

What

The dialog box moves out of the map's src/ into packages/npc-dialog-box, an npm workspace named @workadventure/npc-dialog-box. The map consumes it exactly like the future published package will be consumed; when it moves to its own GitHub repository, only the workspace wiring in the root package.json changes to a regular version.

How the HTML problem is solved

The hard part was shipping npc-dialog.html in the library while getting it into the consumer's Vite build. The answer is twofold:

1. The package's own build makes the page self-contained: build.mjs bundles the iframe-side code (typewriter UI, styles, player-variable protocol) into a minified IIFE and inlines it into the HTML template. dist/npc-dialog.html has zero build-time dependencies on the consumer.
2. A Vite plugin ships in the package (@workadventure/npc-dialog-box/vite): in build it emitFiles the page under the stable name npc-dialog.html at the dist root — exactly what openDialog's default dialogUrl resolves to relative to the map — and in dev it serves the identical bytes at the same URL via a configureServer middleware. Optional assets: [...] copies map-specific files (the avatar) alongside.

Consumer integration is one line per Vite config:

plugins: [ npcDialogBox({ assets: ["npc-avatar.png"] }), ...getMapsOptimizers(...) ]

Consequences for the map

• Root npc-dialog.html and the npcDialog rollup input entry are gone; the wrapper page and its iframe_api.js referrer-loader now live in the package template.
• The default avatar <template> trick is gone: the map passes avatar: "npc-avatar.png" to openDialog instead.
• prepare builds the package on npm install, so CI (npm install && npm run buildmap) keeps working unchanged.
• A manual escape hatch exists (@workadventure/npc-dialog-box/npc-dialog.html export + the dialogUrl option) for setups that can't use the plugin.

Testing

• npm install builds the workspace package; tsc and npm run buildmap pass; dist/ contains npc-dialog.html (self-contained) and npc-avatar.png with stable names.
• Dev server verified on a second port: the plugin serves /npc-dialog.html (correct content-type) and /npc-avatar.png; /src/main.ts bundling resolves the bare package import.
• The built page was exercised in a browser harness with a mocked WA API: typewriter, click-anywhere, space key, avatar loading and step events all behave as before.
• Note for local dev: restart npm run dev after checking out this branch so the dev server picks up the new plugin.

🤖 Generated with Claude Code