Diagnostic Overlay

TurboWarp extension · v0.1.1

Diagnostics people can read safely.

Validate one structured diagnostic, render escaped SVG, and keep a non-interactive overlay aligned with the TurboWarp stage.

Validate

Strict input

Severity, code, message, optional detail, and source location are normalized before rendering.

Render

Safe SVG text

Untrusted strings are XML-escaped and never become element names, attributes, colors, or URLs.

Display

Stage-aligned overlay

The host follows renderer canvas size changes and uses pointer-events: none.

Install the reviewed build

pnpm add --save-exact @kubohiroya/turbowarp-diagnostic-overlay@0.1.1

For the standalone extension, load this pinned URL without sandboxing:

https://cdn.jsdelivr.net/npm/@kubohiroya/turbowarp-diagnostic-overlay@0.1.1/dist/diagnostic-overlay.js

Composition API

Importing the package does not register a TurboWarp extension. The composition root explicitly creates the extension and controller, then registers it once.

import {createDiagnosticOverlayComposition} from
  '@kubohiroya/turbowarp-diagnostic-overlay/composition';

const {extension, controller} = createDiagnosticOverlayComposition(Scratch);
Scratch.extensions.register(extension);
controller.show({severity: 'error', code: 'APP001', message: 'Check the input.'});

The pure renderer is also available from /svg-renderer. See the complete 0.1 contract, also available in Japanese.

Lifecycle

A new diagnostic replaces the current one. Project load clears it. Runtime disposal releases DOM observers and listeners. Project stop intentionally leaves it visible.

Caller responsibilities

The caller discovers diagnostics, decides whether to stop Scratch threads or the VM, and owns persistence. This package does not know any application-specific DSL.