@downdraft/engine 0.3.0 → 0.4.0-alpha.0

package/core/src/render/sab-canvas-overlay.ts

@@ -1,122 +0,0 @@
-// ============================================================================
-// SabCanvasOverlay — DOM <canvas> overlay backed by a SharedArrayBuffer bitmap
-//
-// Generalized from overburden's MapCanvas. Provides the generic shell:
-//   - A visible <canvas> fixed-positioned over the game canvas
-//     (pointer-events: none, configurable z-index, hidden while opacity <= 0).
-//   - An offscreen "bitmap" canvas at a fixed data resolution that is repainted
-//     only when a SAB sequence counter changes (via getSeq + redrawBitmap).
-//   - Per-frame window resize tracking and opacity control.
-//
-// The game supplies the compositing + drawing logic via callbacks; the overlay
-// owns all DOM plumbing.
-// ============================================================================
-
-export interface SabCanvasOverlayOptions {
-  /** DOM id for the visible canvas. Default: "sab-canvas-overlay" */
-  id?: string;
-  /** CSS z-index. Default: 55 (above the game surface, below DOM overlays) */
-  zIndex?: number;
-  /** Offscreen bitmap resolution. If omitted, no bitmap canvas is created. */
-  bitmapWidth?: number;
-  bitmapHeight?: number;
-  /** CSS image-rendering for the visible canvas. Default: "pixelated" */
-  imageRendering?: "pixelated" | "auto";
-  /**
-   * Monotonic sequence number for the backing data (e.g. a SAB seq counter).
-   * The bitmap is repainted only when this value changes. Omit to repaint
-   * every visible frame.
-   */
-  getSeq?: () => number;
-  /**
-   * Repaint the offscreen bitmap canvas. Called only when getSeq() reports
-   * a new value (requires bitmapWidth/bitmapHeight).
-   */
-  redrawBitmap?: (ctx: CanvasRenderingContext2D, bitmapW: number, bitmapH: number) => void;
-  /**
-   * Draw the visible canvas each visible frame, after the bitmap has been
-   * refreshed. `bitmap` is the offscreen bitmap canvas (or null when no
-   * bitmap was configured).
-   */
-  draw: (ctx: CanvasRenderingContext2D, bitmap: HTMLCanvasElement | null, w: number, h: number) => void;
-}
-
-export class SabCanvasOverlay {
-  readonly canvas: HTMLCanvasElement;
-  protected ctx: CanvasRenderingContext2D;
-  /** Offscreen bitmap canvas (fixed data resolution). Null when unconfigured. */
-  readonly bitmapCanvas: HTMLCanvasElement | null = null;
-  protected bitmapCtx: CanvasRenderingContext2D | null = null;
-  private opts: SabCanvasOverlayOptions;
-  private lastSeq = -1;
-
-  constructor(opts: SabCanvasOverlayOptions) {
-    this.opts = opts;
-
-    this.canvas = document.createElement("canvas");
-    this.canvas.id = opts.id ?? "sab-canvas-overlay";
-    this.canvas.style.position = "fixed";
-    this.canvas.style.top = "0";
-    this.canvas.style.left = "0";
-    this.canvas.style.width = "100%";
-    this.canvas.style.height = "100%";
-    this.canvas.style.pointerEvents = "none";
-    this.canvas.style.zIndex = String(opts.zIndex ?? 55);
-    this.canvas.style.display = "none"; // hidden until opacity > 0
-    this.canvas.style.imageRendering = opts.imageRendering ?? "pixelated";
-    this.ctx = this.canvas.getContext("2d")!;
-
-    if (opts.bitmapWidth !== undefined && opts.bitmapHeight !== undefined) {
-      this.bitmapCanvas = document.createElement("canvas");
-      this.bitmapCanvas.width = opts.bitmapWidth;
-      this.bitmapCanvas.height = opts.bitmapHeight;
-      this.bitmapCtx = this.bitmapCanvas.getContext("2d")!;
-    }
-  }
-
-  /** Attach the canvas to the DOM (call once during init). */
-  mount(parent: HTMLElement = document.body): void {
-    parent.appendChild(this.canvas);
-  }
-
-  /**
-   * Per-frame update. Call from the render loop.
-   * Hides the canvas while `opacity <= 0`; otherwise resizes the canvas to the
-   * window, repaints the bitmap when the seq counter advanced, and invokes
-   * the draw callback.
-   */
-  update(opacity: number): void {
-    if (opacity <= 0) {
-      this.canvas.style.display = "none";
-      return;
-    }
-    this.canvas.style.display = "block";
-    this.canvas.style.opacity = String(opacity);
-
-    // Resize the visible canvas to match the window if needed.
-    const w = window.innerWidth;
-    const h = window.innerHeight;
-    if (this.canvas.width !== w || this.canvas.height !== h) {
-      this.canvas.width = w;
-      this.canvas.height = h;
-    }
-
-    // Repaint the bitmap if the backing data has a new seq value.
-    const seq = this.opts.getSeq?.();
-    if (this.bitmapCtx && (seq === undefined || seq !== this.lastSeq)) {
-      if (seq !== undefined) this.lastSeq = seq;
-      this.opts.redrawBitmap?.(this.bitmapCtx, this.bitmapCanvas!.width, this.bitmapCanvas!.height);
-    }
-
-    this.opts.draw(this.ctx, this.bitmapCanvas, w, h);
-  }
-
-  /** Mark the bitmap stale so it repaints on the next visible frame. */
-  invalidate(): void {
-    this.lastSeq = -1;
-  }
-
-  dispose(): void {
-    this.canvas.remove();
-  }
-}

package/dist/core/src/render/sab-canvas-overlay.js

@@ -1,83 +0,0 @@
-// ============================================================================
-// SabCanvasOverlay — DOM <canvas> overlay backed by a SharedArrayBuffer bitmap
-//
-// Generalized from overburden's MapCanvas. Provides the generic shell:
-//   - A visible <canvas> fixed-positioned over the game canvas
-//     (pointer-events: none, configurable z-index, hidden while opacity <= 0).
-//   - An offscreen "bitmap" canvas at a fixed data resolution that is repainted
-//     only when a SAB sequence counter changes (via getSeq + redrawBitmap).
-//   - Per-frame window resize tracking and opacity control.
-//
-// The game supplies the compositing + drawing logic via callbacks; the overlay
-// owns all DOM plumbing.
-// ============================================================================
-export class SabCanvasOverlay {
-    canvas;
-    ctx;
-    /** Offscreen bitmap canvas (fixed data resolution). Null when unconfigured. */
-    bitmapCanvas = null;
-    bitmapCtx = null;
-    opts;
-    lastSeq = -1;
-    constructor(opts) {
-        this.opts = opts;
-        this.canvas = document.createElement("canvas");
-        this.canvas.id = opts.id ?? "sab-canvas-overlay";
-        this.canvas.style.position = "fixed";
-        this.canvas.style.top = "0";
-        this.canvas.style.left = "0";
-        this.canvas.style.width = "100%";
-        this.canvas.style.height = "100%";
-        this.canvas.style.pointerEvents = "none";
-        this.canvas.style.zIndex = String(opts.zIndex ?? 55);
-        this.canvas.style.display = "none"; // hidden until opacity > 0
-        this.canvas.style.imageRendering = opts.imageRendering ?? "pixelated";
-        this.ctx = this.canvas.getContext("2d");
-        if (opts.bitmapWidth !== undefined && opts.bitmapHeight !== undefined) {
-            this.bitmapCanvas = document.createElement("canvas");
-            this.bitmapCanvas.width = opts.bitmapWidth;
-            this.bitmapCanvas.height = opts.bitmapHeight;
-            this.bitmapCtx = this.bitmapCanvas.getContext("2d");
-        }
-    }
-    /** Attach the canvas to the DOM (call once during init). */
-    mount(parent = document.body) {
-        parent.appendChild(this.canvas);
-    }
-    /**
-     * Per-frame update. Call from the render loop.
-     * Hides the canvas while `opacity <= 0`; otherwise resizes the canvas to the
-     * window, repaints the bitmap when the seq counter advanced, and invokes
-     * the draw callback.
-     */
-    update(opacity) {
-        if (opacity <= 0) {
-            this.canvas.style.display = "none";
-            return;
-        }
-        this.canvas.style.display = "block";
-        this.canvas.style.opacity = String(opacity);
-        // Resize the visible canvas to match the window if needed.
-        const w = window.innerWidth;
-        const h = window.innerHeight;
-        if (this.canvas.width !== w || this.canvas.height !== h) {
-            this.canvas.width = w;
-            this.canvas.height = h;
-        }
-        // Repaint the bitmap if the backing data has a new seq value.
-        const seq = this.opts.getSeq?.();
-        if (this.bitmapCtx && (seq === undefined || seq !== this.lastSeq)) {
-            if (seq !== undefined)
-                this.lastSeq = seq;
-            this.opts.redrawBitmap?.(this.bitmapCtx, this.bitmapCanvas.width, this.bitmapCanvas.height);
-        }
-        this.opts.draw(this.ctx, this.bitmapCanvas, w, h);
-    }
-    /** Mark the bitmap stale so it repaints on the next visible frame. */
-    invalidate() {
-        this.lastSeq = -1;
-    }
-    dispose() {
-        this.canvas.remove();
-    }
-}

package/dist/modules/devtools/src/debug-overlay.js

@@ -1,181 +0,0 @@
-// ============================================================================
-// DebugOverlay — 2D canvas overlay for chunk grid + velocity arrows
-// Generic rendering logic; game provides data via IDebugOverlayData interface.
-// ============================================================================
-import { calculateViewProj, CanvasResizeWatcher } from "@downdraft/engine";
-export class DebugOverlay {
-    canvas;
-    overlay;
-    ctx;
-    showChunkGrid = false;
-    showVelocityArrows = false;
-    resizeWatcher;
-    constructor(surface) {
-        // DOM-overlay widget — the canvas/element members it touches
-        // (parentElement, 2d overlay canvas) are DOM-host concepts; on native
-        // they degrade to the compat stubs (display:none anyway).
-        const canvas = surface;
-        this.canvas = canvas;
-        this.overlay = document.createElement("canvas");
-        this.overlay.className = "debug-overlay";
-        this.overlay.style.cssText = `
-      position: absolute;
-      top: 0; left: 0;
-      width: 100%; height: 100%;
-      pointer-events: none;
-      z-index: 0;
-      display: none;
-    `;
-        const parent = canvas.parentElement;
-        if (parent) {
-            parent.style.position = parent.style.position || "relative";
-            parent.appendChild(this.overlay);
-        }
-        else {
-            document.body.appendChild(this.overlay);
-        }
-        this.ctx = this.overlay.getContext("2d");
-        this.resizeWatcher = new CanvasResizeWatcher(canvas, {
-            onResize: (w, h) => {
-                if (this.overlay.width !== w || this.overlay.height !== h) {
-                    this.overlay.width = w;
-                    this.overlay.height = h;
-                }
-            },
-        });
-    }
-    setShowChunkGrid(show) {
-        this.showChunkGrid = show;
-        this.updateDisplay();
-    }
-    setShowVelocityArrows(show) {
-        this.showVelocityArrows = show;
-        this.updateDisplay();
-    }
-    isChunkGridVisible() {
-        return this.showChunkGrid;
-    }
-    isVelocityArrowsVisible() {
-        return this.showVelocityArrows;
-    }
-    updateDisplay() {
-        const active = this.showChunkGrid || this.showVelocityArrows;
-        this.overlay.style.display = active ? "block" : "none";
-        if (!active) {
-            this.ctx.clearRect(0, 0, this.overlay.width, this.overlay.height);
-        }
-    }
-    projectToScreen(worldX, worldY, worldZ, viewProj, canvasW, canvasH) {
-        const x = viewProj[0] * worldX + viewProj[4] * worldY + viewProj[8] * worldZ + viewProj[12];
-        const y = viewProj[1] * worldX + viewProj[5] * worldY + viewProj[9] * worldZ + viewProj[13];
-        const w = viewProj[3] * worldX + viewProj[7] * worldY + viewProj[11] * worldZ + viewProj[15];
-        if (w <= 0)
-            return { x: 0, y: 0, behind: true };
-        const ndcX = x / w;
-        const ndcY = y / w;
-        const screenX = (ndcX + 1) * 0.5 * canvasW;
-        const screenY = (1 - ndcY) * 0.5 * canvasH;
-        return { x: screenX, y: screenY, behind: false };
-    }
-    update(camera, data) {
-        if (!this.showChunkGrid && !this.showVelocityArrows)
-            return;
-        const ctx = this.ctx;
-        const canvasW = this.overlay.width;
-        const canvasH = this.overlay.height;
-        ctx.clearRect(0, 0, canvasW, canvasH);
-        const viewProj = calculateViewProj(camera);
-        if (this.showChunkGrid) {
-            this.renderChunkGrid(ctx, camera, viewProj, canvasW, canvasH, data);
-        }
-        if (this.showVelocityArrows) {
-            this.renderVelocityArrows(ctx, viewProj, canvasW, canvasH, data);
-        }
-    }
-    renderChunkGrid(ctx, camera, viewProj, canvasW, canvasH, data) {
-        const playerPos = data.getPlayerPosition();
-        if (!playerPos)
-            return;
-        const { chunkSize, chunksVisible } = data.getChunkGridConfig();
-        const playerChunkX = Math.floor(playerPos.x / chunkSize);
-        const playerChunkZ = Math.floor(playerPos.z / chunkSize);
-        const half = Math.ceil(chunksVisible / 2);
-        ctx.strokeStyle = "rgba(100, 200, 255, 0.35)";
-        ctx.lineWidth = 1;
-        ctx.font = "10px monospace";
-        ctx.fillStyle = "rgba(100, 200, 255, 0.6)";
-        for (let cx = playerChunkX - half; cx <= playerChunkX + half; cx++) {
-            for (let cz = playerChunkZ - half; cz <= playerChunkZ + half; cz++) {
-                const worldX = cx * chunkSize;
-                const worldZ = cz * chunkSize;
-                const corners = [
-                    this.projectToScreen(worldX, 0, worldZ, viewProj, canvasW, canvasH),
-                    this.projectToScreen(worldX + chunkSize, 0, worldZ, viewProj, canvasW, canvasH),
-                    this.projectToScreen(worldX + chunkSize, 0, worldZ + chunkSize, viewProj, canvasW, canvasH),
-                    this.projectToScreen(worldX, 0, worldZ + chunkSize, viewProj, canvasW, canvasH),
-                ];
-                if (corners.some(c => c === null || c.behind))
-                    continue;
-                ctx.beginPath();
-                ctx.moveTo(corners[0].x, corners[0].y);
-                ctx.lineTo(corners[1].x, corners[1].y);
-                ctx.lineTo(corners[2].x, corners[2].y);
-                ctx.lineTo(corners[3].x, corners[3].y);
-                ctx.closePath();
-                ctx.stroke();
-                const centerProj = this.projectToScreen(worldX + chunkSize / 2, 0, worldZ + chunkSize / 2, viewProj, canvasW, canvasH);
-                if (centerProj && !centerProj.behind) {
-                    const dx = (worldX + chunkSize / 2) - camera.position[0];
-                    const dz = (worldZ + chunkSize / 2) - camera.position[2];
-                    const dist = Math.sqrt(dx * dx + dz * dz);
-                    if (dist < chunkSize * half) {
-                        ctx.fillText(`${cx},${cz}`, centerProj.x - 15, centerProj.y);
-                    }
-                }
-            }
-        }
-    }
-    renderVelocityArrows(ctx, viewProj, canvasW, canvasH, data) {
-        const entityCount = data.getEntityCount();
-        ctx.strokeStyle = "rgba(255, 200, 50, 0.8)";
-        ctx.fillStyle = "rgba(255, 200, 50, 0.8)";
-        ctx.lineWidth = 2;
-        for (let i = 0; i < entityCount; i++) {
-            const pos = data.getEntityPosition(i);
-            const vel = data.getEntityVelocity(i);
-            if (!pos || !vel)
-                continue;
-            const speed = Math.sqrt(vel.x * vel.x + vel.y * vel.y + vel.z * vel.z);
-            if (speed < 0.1)
-                continue;
-            const scale = 2.0;
-            const endX = pos.x + vel.x * scale;
-            const endY = pos.y + vel.y * scale;
-            const endZ = pos.z + vel.z * scale;
-            const startProj = this.projectToScreen(pos.x, pos.y, pos.z, viewProj, canvasW, canvasH);
-            const endProj = this.projectToScreen(endX, endY, endZ, viewProj, canvasW, canvasH);
-            if (!startProj || startProj.behind || !endProj || endProj.behind)
-                continue;
-            ctx.beginPath();
-            ctx.moveTo(startProj.x, startProj.y);
-            ctx.lineTo(endProj.x, endProj.y);
-            ctx.stroke();
-            const dx = endProj.x - startProj.x;
-            const dy = endProj.y - startProj.y;
-            const angle = Math.atan2(dy, dx);
-            const headLen = 6;
-            ctx.beginPath();
-            ctx.moveTo(endProj.x, endProj.y);
-            ctx.lineTo(endProj.x - headLen * Math.cos(angle - Math.PI / 6), endProj.y - headLen * Math.sin(angle - Math.PI / 6));
-            ctx.lineTo(endProj.x - headLen * Math.cos(angle + Math.PI / 6), endProj.y - headLen * Math.sin(angle + Math.PI / 6));
-            ctx.closePath();
-            ctx.fill();
-            ctx.font = "10px monospace";
-            ctx.fillText(`${speed.toFixed(1)} m/s`, endProj.x + 4, endProj.y - 4);
-        }
-    }
-    destroy() {
-        this.resizeWatcher.destroy();
-        this.overlay.remove();
-    }
-}

package/dist/modules/devtools/src/doctor-panel.js

@@ -1,163 +0,0 @@
-// ============================================================================
-// downdraft doctor — devtools panel for module graph diagnostics
-//
-// Displays the resolved module graph, resource table, system schedule,
-// diagnostics (unresolved requires, version conflicts, leaks), and the
-// cross-thread dependency report (sim + renderer).
-// ============================================================================
-/** Escape untrusted strings before interpolating into innerHTML — mod
- *  manifests are third-party content and must not be able to inject markup. */
-function esc(s) {
-    return String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-}
-export function createDoctorPanelExtension(opts = {}) {
-    return {
-        id: "downdraft-doctor",
-        tabLabel: "Doctor",
-        tabTooltip: "Module graph diagnostics: resolved dependencies, resource table, version conflicts, leak detection",
-        order: 5,
-        html: `
-      <div class="dd-doctor">
-        <div class="dd-doctor__header">
-          <h2>downdraft doctor</h2>
-          <button class="dd-doctor__refresh">Refresh</button>
-        </div>
-        <div class="dd-doctor__summary"></div>
-        <div class="dd-doctor__plugins"></div>
-        <div class="dd-doctor__user-plugins"></div>
-        <div class="dd-doctor__resources"></div>
-        <div class="dd-doctor__issues"></div>
-      </div>
-    `,
-        css: `
-      .dd-doctor { padding: 12px; font-family: monospace; font-size: 12px; color: #ccc; }
-      .dd-doctor h2 { margin: 0 0 8px; font-size: 16px; color: #4fc3f7; }
-      .dd-doctor__header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
-      .dd-doctor__refresh { padding: 4px 12px; background: #333; color: #ccc; border: 1px solid #555; border-radius: 4px; cursor: pointer; }
-      .dd-doctor__refresh:hover { background: #444; }
-      .dd-doctor__summary { margin-bottom: 16px; padding: 8px; background: #1a1a2e; border-radius: 4px; }
-      .dd-doctor__summary div { margin: 2px 0; }
-      .dd-doctor__plugins h3, .dd-doctor__resources h3, .dd-doctor__issues h3, .dd-doctor__user-plugins h3 { color: #4fc3f7; margin: 12px 0 4px; font-size: 13px; }
-      .dd-doctor__badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; margin-right: 4px; }
-      .dd-doctor__badge--format { background: #2a3a4a; color: #64b5f6; }
-      .dd-doctor__badge--tier { background: #3a2a4a; color: #ce93d8; }
-      .dd-doctor__badge--thread { background: #2a4a3a; color: #81c784; }
-      .dd-doctor__badge--perm { background: #4a3a2a; color: #ffb74d; }
-      .dd-doctor__status--active { color: #81c784; }
-      .dd-doctor__status--error { color: #ef5350; }
-      .dd-doctor__status--loading, .dd-doctor__status--pending { color: #ffb74d; }
-      .dd-doctor__status--disabled { color: #888; }
-      .dd-doctor__table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
-      .dd-doctor__table th { text-align: left; padding: 4px 8px; background: #1a1a2e; color: #888; font-weight: normal; }
-      .dd-doctor__table td { padding: 4px 8px; border-bottom: 1px solid #222; }
-      .dd-doctor__table .dd-thread-sim { color: #81c784; }
-      .dd-doctor__table .dd-thread-renderer { color: #64b5f6; }
-      .dd-doctor__table .dd-thread-shared { color: #ffb74d; }
-      .dd-doctor__issue { padding: 6px 8px; margin: 4px 0; border-radius: 4px; }
-      .dd-doctor__issue--error { background: #3e1e1e; color: #ef5350; }
-      .dd-doctor__issue--warning { background: #3e3a1e; color: #ffb74d; }
-      .dd-doctor__issue--ok { background: #1e3e2a; color: #81c784; }
-    `,
-        script: `(() => {
-      const helpers = arguments[0];
-      const container = helpers.container;
-      const opts = window.__ddDoctorOpts || {};
-      let refreshTimer = null;
-
-      function render() {
-        const simModules = opts.getSimModules ? opts.getSimModules() : [];
-        const rendererModules = opts.getRendererModules ? opts.getRendererModules() : [];
-        let report = opts.getReport ? opts.getReport() : null;
-        if (!report && (simModules.length || rendererModules.length)) {
-          // Build report inline if no pre-built report provider
-          const { buildCrossThreadReport } = window.__ddCrossThread || {};
-          if (buildCrossThreadReport) {
-            report = buildCrossThreadReport(simModules, rendererModules);
-          }
-        }
-        if (!report) {
-          report = { modules: [...simModules, ...rendererModules], unresolved: [], shared: [], versionConflicts: [] };
-        }
-
-        // Summary
-        const summary = container.querySelector('.dd-doctor__summary');
-        const simCount = report.modules.filter(p => p.thread === 'sim').length;
-        const rendererCount = report.modules.filter(p => p.thread === 'renderer').length;
-        const sharedCount = report.shared.length;
-        const unresolvedCount = report.unresolved.length;
-        const conflictCount = report.versionConflicts.length;
-        summary.innerHTML = [
-          '<div>Sim modules: <b>' + simCount + '</b></div>',
-          '<div>Renderer modules: <b>' + rendererCount + '</b></div>',
-          '<div>Shared resources: <b>' + sharedCount + '</b></div>',
-          '<div>Unresolved requires: <b style="color:' + (unresolvedCount ? '#ef5350' : '#81c784') + '">' + unresolvedCount + '</b></div>',
-          '<div>Version conflicts: <b style="color:' + (conflictCount ? '#ef5350' : '#81c784') + '">' + conflictCount + '</b></div>',
-        ].join('');
-
-        // Modules table
-        const pluginsDiv = container.querySelector('.dd-doctor__plugins');
-        if (report.modules.length === 0) {
-          pluginsDiv.innerHTML = '<h3>Modules</h3><p>No modules registered.</p>';
-        } else {
-          let html = '<h3>Modules (' + report.modules.length + ')</h3>';
-          html += '<table class="dd-doctor__table"><thead><tr><th>Name</th><th>Version</th><th>Thread</th><th>Provides</th><th>Requires</th><th>Status</th></tr></thead><tbody>';
-          for (const p of report.modules) {
-            const threadClass = 'dd-thread-' + esc(p.thread);
-            html += '<tr><td>' + esc(p.name) + '</td><td>' + esc(p.version) + '</td><td class="' + threadClass + '">' + esc(p.thread) + '</td><td>' + esc(p.provides.join(', ') || '—') + '</td><td>' + esc(p.requires.join(', ') || '—') + '</td><td>' + (p.active ? '✓ active' : 'inactive') + '</td></tr>';
-          }
-          html += '</tbody></table>';
-          pluginsDiv.innerHTML = html;
-        }
-
-        // User-authored plugins (modding system)
-        const userPluginsDiv = container.querySelector('.dd-doctor__user-plugins');
-        const plugins = opts.getPlugins ? opts.getPlugins() : [];
-        if (plugins.length === 0) {
-          userPluginsDiv.innerHTML = '';
-        } else {
-          let phtml = '<h3>Plugins (' + plugins.length + ')</h3>';
-          phtml += '<table class="dd-doctor__table"><thead><tr><th>ID</th><th>Version</th><th>Format</th><th>Tier</th><th>Thread</th><th>Permissions</th><th>Status</th></tr></thead><tbody>';
-          for (const p of plugins) {
-            const fmtBadge = '<span class="dd-doctor__badge dd-doctor__badge--format">' + esc(p.format) + '</span>';
-            const tierBadge = '<span class="dd-doctor__badge dd-doctor__badge--tier">' + esc(p.tier) + '</span>';
-            const threadBadge = '<span class="dd-doctor__badge dd-doctor__badge--thread">' + esc(p.thread) + '</span>';
-            const permBadges = p.permissions.map(function(perm) { return '<span class="dd-doctor__badge dd-doctor__badge--perm">' + esc(perm) + '</span>'; }).join('');
-            const statusClass = 'dd-doctor__status--' + esc(p.status);
-            const statusText = esc(p.status + (p.error ? ': ' + p.error : ''));
-            phtml += '<tr><td>' + esc(p.id) + '</td><td>' + esc(p.version) + '</td><td>' + fmtBadge + '</td><td>' + tierBadge + '</td><td>' + threadBadge + '</td><td>' + (permBadges || '—') + '</td><td class="' + statusClass + '">' + statusText + '</td></tr>';
-          }
-          phtml += '</tbody></table>';
-          userPluginsDiv.innerHTML = phtml;
-        }
-
-        // Issues
-        const issuesDiv = container.querySelector('.dd-doctor__issues');
-        let issuesHtml = '<h3>Diagnostics</h3>';
-        if (report.unresolved.length > 0) {
-          issuesHtml += '<div class="dd-doctor__issue dd-doctor__issue--error">Unresolved requires: ' + esc(report.unresolved.join(', ')) + '</div>';
-        }
-        if (report.versionConflicts.length > 0) {
-          for (const vc of report.versionConflicts) {
-            issuesHtml += '<div class="dd-doctor__issue dd-doctor__issue--error">Version conflict: ' + esc(vc.name) + ' (sim=' + esc(vc.simVersion) + ', renderer=' + esc(vc.rendererVersion) + ')</div>';
-          }
-        }
-        if (report.shared.length > 0) {
-          issuesHtml += '<div class="dd-doctor__issue dd-doctor__issue--ok">Shared resources: ' + esc(report.shared.join(', ')) + '</div>';
-        }
-        if (report.unresolved.length === 0 && report.versionConflicts.length === 0) {
-          issuesHtml += '<div class="dd-doctor__issue dd-doctor__issue--ok">✓ No issues detected</div>';
-        }
-        issuesDiv.innerHTML = issuesHtml;
-      }
-
-      container.querySelector('.dd-doctor__refresh').addEventListener('click', render);
-      render();
-
-      return {
-        onActivate() { refreshTimer = setInterval(render, 2000); },
-        onDeactivate() { if (refreshTimer) { clearInterval(refreshTimer); refreshTimer = null; } },
-        onDestroy() { if (refreshTimer) clearInterval(refreshTimer); }
-      };
-    })`,
-    };
-}

package/dist/modules/devtools/src/label-overlay.js

@@ -1,129 +0,0 @@
-// ============================================================================
-// LabelOverlay — HTML-based billboard labels for dev mode
-// Generic DOM management + projection; game provides labels via ILabelProvider.
-// ============================================================================
-import { calculateViewProj } from "@downdraft/engine";
-const MAX_LABELS = 512;
-export class LabelOverlay {
-    container;
-    labels = new Map();
-    active = false;
-    canvas;
-    provider = null;
-    constructor(surface) {
-        // DOM-overlay widget — the canvas/element members it touches
-        // (parentElement, 2d overlay canvas) are DOM-host concepts; on native
-        // they degrade to the compat stubs (display:none anyway).
-        const canvas = surface;
-        this.canvas = canvas;
-        this.container = document.createElement("div");
-        this.container.className = "label-overlay";
-        this.container.style.cssText = `
-      position: absolute;
-      top: 0; left: 0;
-      width: 100%; height: 100%;
-      pointer-events: none;
-      overflow: hidden;
-      z-index: 0;
-      display: none;
-    `;
-        const parent = canvas.parentElement;
-        if (parent) {
-            parent.style.position = parent.style.position || "relative";
-            parent.appendChild(this.container);
-        }
-        else {
-            document.body.appendChild(this.container);
-        }
-    }
-    setProvider(provider) {
-        this.provider = provider;
-    }
-    setActive(active) {
-        this.active = active;
-        this.container.style.display = active ? "block" : "none";
-        if (!active) {
-            this.clearLabels();
-        }
-    }
-    isActive() {
-        return this.active;
-    }
-    clearLabels() {
-        for (const entry of this.labels.values()) {
-            entry.el.remove();
-        }
-        this.labels.clear();
-    }
-    getOrCreateLabel(key) {
-        let entry = this.labels.get(key);
-        if (entry)
-            return entry.el;
-        if (this.labels.size >= MAX_LABELS)
-            return null;
-        const el = document.createElement("div");
-        el.className = "dev-label";
-        el.style.cssText = `
-      position: absolute;
-      font-family: monospace;
-      font-size: 11px;
-      color: #fff;
-      background: rgba(0, 0, 0, 0.65);
-      border-radius: 3px;
-      padding: 1px 5px;
-      white-space: nowrap;
-      pointer-events: none;
-      transform: translate(-50%, -100%);
-      will-change: transform, left, top;
-      border: 1px solid rgba(255, 255, 255, 0.15);
-    `;
-        this.container.appendChild(el);
-        this.labels.set(key, { el });
-        return el;
-    }
-    projectToScreen(worldX, worldY, worldZ, viewProj, canvasW, canvasH) {
-        const x = viewProj[0] * worldX + viewProj[4] * worldY + viewProj[8] * worldZ + viewProj[12];
-        const y = viewProj[1] * worldX + viewProj[5] * worldY + viewProj[9] * worldZ + viewProj[13];
-        const w = viewProj[3] * worldX + viewProj[7] * worldY + viewProj[11] * worldZ + viewProj[15];
-        if (w <= 0)
-            return { x: 0, y: 0, behind: true };
-        const ndcX = x / w;
-        const ndcY = y / w;
-        const screenX = (ndcX + 1) * 0.5 * canvasW;
-        const screenY = (1 - ndcY) * 0.5 * canvasH;
-        return { x: screenX, y: screenY, behind: false };
-    }
-    update(camera) {
-        if (!this.active || !this.provider)
-            return;
-        const viewProj = calculateViewProj(camera);
-        const canvasW = this.canvas.clientWidth;
-        const canvasH = this.canvas.clientHeight;
-        const labels = this.provider.getLabels();
-        const usedKeys = new Set();
-        for (let _i = 0, _it = labels, _n = _it.length; _i < _n; _i++) {
-            const label = _it[_i];
-            usedKeys.add(label.key);
-            const proj = this.projectToScreen(label.x, label.y, label.z, viewProj, canvasW, canvasH);
-            if (!proj || proj.behind)
-                continue;
-            const el = this.getOrCreateLabel(label.key);
-            if (!el)
-                continue;
-            el.textContent = label.text;
-            el.style.left = `${proj.x}px`;
-            el.style.top = `${proj.y}px`;
-            el.style.color = label.color;
-            el.style.display = "block";
-        }
-        for (const [key, entry] of this.labels.entries()) {
-            if (!usedKeys.has(key)) {
-                entry.el.style.display = "none";
-            }
-        }
-    }
-    destroy() {
-        this.clearLabels();
-        this.container.remove();
-    }
-}