phaser-editor-plugin

# Phaser Editor v5 plugin development This repository is a template for third-party Phaser Editor v5 plugins. Use this skill whenever you add or change plugin functionality. ## First: read the right doc The repo's `docs/` folder is the source of truth for patterns. **Read the relevant doc before writing code** — don't rely on memory for the colibri API. 1. Orientation: [`AGENTS.md`](../../../AGENTS.md) and [`docs/architecture.md`](../../../docs/architecture.md). 2. Pick the extension point: [`docs/extension-points.md`](../../../docs/extension-points.md). 3. Read the matching recipe in `docs/recipes/`: - [add a command](../../../docs/recipes/add-a-command.md) - [add a custom editor](../../../docs/recipes/add-a-custom-editor.md) - [add a content type & New File wizard](../../../docs/recipes/add-a-content-type-and-new-file.md) - [add Inspector properties](../../../docs/recipes/add-inspector-properties.md) - [add styles (theme-correct)](../../../docs/recipes/add-styles.md) ## Non-negotiables - Everything is registered in `registerExtensions(reg)` via `reg.addExtension(new SomeExtension(...))`. Edit `myplugin.example/src/ExamplePlugin.ts`. - One plugin = **one TypeScript namespace**. No `import`/`export` between plugin files; no bundler; no runtime npm. - The editor API lives only in `types/colibri.d.ts` and `types/phasereditor2d.files.d.ts`. **Grep them to confirm any API** — if it isn't there, it isn't available. Never edit them to make code compile. - IDs are namespaced: `"<pluginId>.<Name>"`. - UI must be theme-correct (separate layout from per-theme color; ship light and dark). Register CSS in `plugin.json` `styles`. ## Workflow ``` - [ ] Read AGENTS.md + the matching docs/recipe - [ ] Find the closest existing example in myplugin.example/src and copy its shape - [ ] Confirm API names by grepping types/*.d.ts - [ ] Add code in src/ (same namespace) and register it in ExamplePlugin.ts - [ ] npm run build (must pass with no type errors) ``` ## Best reference: the working example `myplugin.example/` is a complete plugin. Mirror its structure: `ExamplePlugin.ts` (a command + all registrations) and `src/editors/` (a custom editor with content type, New File wizard, Outline, and Inspector).