@phalanx-engine/ecs 0.1.0

package/dist/debug/DebugDataProvider.js

@@ -0,0 +1,128 @@
+import { calculateSchemaByteSize } from '../SoASchema';
+const DEFAULT_UPDATE_INTERVAL = 500;
+export class DebugDataProvider {
+    entityManager;
+    pools;
+    updateInterval;
+    subscribers = new Set();
+    intervalId = null;
+    _paused = false;
+    set paused(value) {
+        this._paused = value;
+    }
+    constructor(entityManager, pools, config) {
+        this.entityManager = entityManager;
+        this.pools = pools;
+        this.updateInterval = config?.updateInterval ?? DEFAULT_UPDATE_INTERVAL;
+    }
+    subscribe(callback) {
+        this.subscribers.add(callback);
+        return () => {
+            this.subscribers.delete(callback);
+        };
+    }
+    getSnapshot() {
+        return this.collectSnapshot();
+    }
+    start() {
+        if (this.intervalId !== null)
+            return;
+        if (this.updateInterval <= 0)
+            return;
+        this.intervalId = setInterval(() => {
+            this.push();
+        }, this.updateInterval);
+    }
+    stop() {
+        if (this.intervalId !== null) {
+            clearInterval(this.intervalId);
+            this.intervalId = null;
+        }
+    }
+    dispose() {
+        this.stop();
+        this.subscribers.clear();
+    }
+    push() {
+        if (this.subscribers.size === 0)
+            return;
+        const snapshot = this.collectSnapshot();
+        for (const cb of this.subscribers) {
+            cb(snapshot);
+        }
+    }
+    collectSnapshot() {
+        const soaStores = this.collectSoAStores();
+        return {
+            timestamp: Date.now(),
+            world: {
+                entityCount: this.entityManager.count,
+                soaStoreCount: soaStores.length,
+                paused: this._paused,
+            },
+            entities: this.collectEntities(),
+            soaStores,
+            pools: this.collectPools(),
+        };
+    }
+    collectEntities() {
+        const entities = this.entityManager.getAllEntities();
+        const result = [];
+        for (const entity of entities) {
+            const components = [];
+            for (const [typeSymbol, component] of entity.getComponents()) {
+                const data = {};
+                for (const key of Object.keys(component)) {
+                    if (key === 'type')
+                        continue;
+                    data[key] = component[key];
+                }
+                components.push({
+                    typeName: typeSymbol.description ?? 'unknown',
+                    typeSymbol,
+                    data,
+                });
+            }
+            result.push({
+                id: entity.id,
+                destroyed: entity.isDestroyed,
+                components,
+            });
+        }
+        return result;
+    }
+    collectSoAStores() {
+        const stores = this.entityManager.getAllSoAStores();
+        const result = [];
+        for (const store of stores.values()) {
+            const schema = store.schema;
+            const entities = [];
+            for (const entityId of store.entityIds()) {
+                const fields = store.get(entityId);
+                if (fields) {
+                    entities.push({ entityId, fields: fields });
+                }
+            }
+            result.push({
+                name: schema.type.description ?? 'unknown',
+                fieldNames: [...schema.fieldNames],
+                fieldTypes: { ...schema.fieldTypes },
+                count: store.count,
+                capacity: store.capacity,
+                bytesPerEntity: calculateSchemaByteSize(schema),
+                entities,
+            });
+        }
+        return result;
+    }
+    collectPools() {
+        if (!this.pools)
+            return [];
+        const result = [];
+        const stats = this.pools.getStats();
+        for (const [typeKey, poolStats] of stats) {
+            result.push({ typeKey, stats: { ...poolStats } });
+        }
+        return result;
+    }
+}

package/dist/debug/DebugPanel.d.ts

@@ -0,0 +1,57 @@
+import type { DebugDataProvider } from './DebugDataProvider';
+import type { DebugPanelConfig } from './types';
+export declare class DebugPanel {
+    private readonly provider;
+    private readonly toggleKey;
+    private readonly unsubscribe;
+    private readonly keydownHandler;
+    private readonly mouseMoveHandler;
+    private readonly mouseUpHandler;
+    private readonly root;
+    private readonly titleBar;
+    private readonly titleText;
+    private readonly toggleBtn;
+    private readonly body;
+    private readonly worldSection;
+    private readonly entityCountEl;
+    private readonly soaCountEl;
+    private readonly pausedEl;
+    private readonly entitiesSection;
+    private readonly entitiesHeader;
+    private readonly entitiesBody;
+    private readonly entitiesSummary;
+    private readonly soaSection;
+    private readonly soaHeader;
+    private readonly soaBody;
+    private readonly soaSummary;
+    private readonly poolSection;
+    private readonly poolHeader;
+    private readonly poolBody;
+    private readonly poolSummary;
+    private collapsed;
+    private entitiesSectionCollapsed;
+    private soaSectionCollapsed;
+    private poolSectionCollapsed;
+    private expandedEntities;
+    private dragging;
+    private dragOffsetX;
+    private dragOffsetY;
+    constructor(provider: DebugDataProvider, config?: DebugPanelConfig);
+    destroy(): void;
+    get element(): HTMLDivElement;
+    private renderSnapshot;
+    private renderEntities;
+    private renderSoAStores;
+    private renderPoolStats;
+    private toggleCollapse;
+    private updateToggleBtn;
+    private applySectionCollapse;
+    private buildCollapsibleSection;
+    private createLabel;
+    private createSeparator;
+    private formatValue;
+    private applyRootStyles;
+    private applyTitleBarStyles;
+    private applyToggleBtnStyles;
+}
+//# sourceMappingURL=DebugPanel.d.ts.map

package/dist/debug/DebugPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebugPanel.d.ts","sourceRoot":"","sources":["../../src/debug/DebugPanel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,KAAK,EAKV,gBAAgB,EACjB,MAAM,SAAS,CAAC;AAejB,qBAAa,UAAU;IACrB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAS;IACnC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAa;IACzC,OAAO,CAAC,QAAQ,CAAC,cAAc,CAA6B;IAC5D,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAA0B;IAC3D,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAa;IAG5C,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAiB;IACtC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAiB;IAC1C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAkB;IAC5C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAkB;IAC5C,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAiB;IAGtC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAiB;IAC9C,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAkB;IAChD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAkB;IAC7C,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAkB;IAE3C,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAiB;IACjD,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAiB;IAChD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAiB;IAC9C,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAkB;IAElD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAiB;IAC5C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAiB;IAC3C,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAiB;IACzC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAkB;IAE7C,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAiB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAiB;IAC5C,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAiB;IAC1C,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAkB;IAG9C,OAAO,CAAC,SAAS,CAAU;IAC3B,OAAO,CAAC,wBAAwB,CAAS;IACzC,OAAO,CAAC,mBAAmB,CAAS;IACpC,OAAO,CAAC,oBAAoB,CAAS;IACrC,OAAO,CAAC,gBAAgB,CAA0B;IAGlD,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,WAAW,CAAK;gBAEZ,QAAQ,EAAE,iBAAiB,EAAE,MAAM,CAAC,EAAE,gBAAgB;IAmK3D,OAAO,IAAI,IAAI;IAatB,IAAW,OAAO,IAAI,cAAc,CAEnC;IAID,OAAO,CAAC,cAAc;IAoCtB,OAAO,CAAC,cAAc;IAiEtB,OAAO,CAAC,eAAe;IA4FvB,OAAO,CAAC,eAAe;IAmEvB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,oBAAoB;IAc5B,OAAO,CAAC,uBAAuB;IA6C/B,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,eAAe;IAiBvB,OAAO,CAAC,mBAAmB;IAe3B,OAAO,CAAC,oBAAoB;CAO7B"}

package/dist/debug/DebugPanel.js

@@ -0,0 +1,482 @@
+const FONT_MONO = "'Consolas', 'Monaco', 'Courier New', monospace";
+const COLOR_BG = 'rgba(15, 15, 20, 0.92)';
+const COLOR_TEXT = '#c8ccd0';
+const COLOR_ACCENT = '#4fc3f7';
+const COLOR_WARNING = '#ffb74d';
+export class DebugPanel {
+    provider;
+    toggleKey;
+    unsubscribe;
+    keydownHandler;
+    mouseMoveHandler;
+    mouseUpHandler;
+    root;
+    titleBar;
+    titleText;
+    toggleBtn;
+    body;
+    worldSection;
+    entityCountEl;
+    soaCountEl;
+    pausedEl;
+    entitiesSection;
+    entitiesHeader;
+    entitiesBody;
+    entitiesSummary;
+    soaSection;
+    soaHeader;
+    soaBody;
+    soaSummary;
+    poolSection;
+    poolHeader;
+    poolBody;
+    poolSummary;
+    collapsed;
+    entitiesSectionCollapsed = false;
+    soaSectionCollapsed = false;
+    poolSectionCollapsed = false;
+    expandedEntities = new Set();
+    dragging = false;
+    dragOffsetX = 0;
+    dragOffsetY = 0;
+    constructor(provider, config) {
+        this.provider = provider;
+        this.toggleKey = config?.toggleKey ?? '`';
+        this.collapsed = config?.startCollapsed ?? false;
+        this.root = document.createElement('div');
+        this.applyRootStyles();
+        this.titleBar = document.createElement('div');
+        this.applyTitleBarStyles();
+        this.titleText = document.createElement('span');
+        this.titleText.textContent = '\u2699 Phalanx Debug';
+        this.toggleBtn = document.createElement('span');
+        this.applyToggleBtnStyles();
+        this.updateToggleBtn();
+        this.titleBar.appendChild(this.titleText);
+        this.titleBar.appendChild(this.toggleBtn);
+        this.root.appendChild(this.titleBar);
+        this.body = document.createElement('div');
+        this.body.style.padding = '6px 8px';
+        this.body.style.maxHeight = '80vh';
+        this.body.style.overflowY = 'auto';
+        this.body.style.display = this.collapsed ? 'none' : 'block';
+        this.root.appendChild(this.body);
+        this.worldSection = document.createElement('div');
+        this.worldSection.style.marginBottom = '6px';
+        this.worldSection.style.paddingBottom = '4px';
+        this.worldSection.style.borderBottom = '1px solid rgba(255,255,255,0.1)';
+        const worldLabel = document.createElement('div');
+        worldLabel.style.fontSize = '12px';
+        worldLabel.style.fontWeight = 'bold';
+        worldLabel.style.color = COLOR_ACCENT;
+        worldLabel.style.marginBottom = '2px';
+        worldLabel.textContent = 'World Overview';
+        this.worldSection.appendChild(worldLabel);
+        const worldDataRow = document.createElement('div');
+        worldDataRow.style.fontSize = '11px';
+        this.entityCountEl = document.createElement('span');
+        this.soaCountEl = document.createElement('span');
+        this.pausedEl = document.createElement('span');
+        worldDataRow.appendChild(this.createLabel('Entities: '));
+        worldDataRow.appendChild(this.entityCountEl);
+        worldDataRow.appendChild(this.createSeparator());
+        worldDataRow.appendChild(this.createLabel('SoA Stores: '));
+        worldDataRow.appendChild(this.soaCountEl);
+        worldDataRow.appendChild(this.createSeparator());
+        worldDataRow.appendChild(this.pausedEl);
+        this.worldSection.appendChild(worldDataRow);
+        this.body.appendChild(this.worldSection);
+        const entitiesResult = this.buildCollapsibleSection('Entities');
+        this.entitiesSection = entitiesResult.section;
+        this.entitiesHeader = entitiesResult.header;
+        this.entitiesBody = entitiesResult.body;
+        this.entitiesSummary = entitiesResult.summary;
+        this.body.appendChild(this.entitiesSection);
+        const soaResult = this.buildCollapsibleSection('SoA Stores');
+        this.soaSection = soaResult.section;
+        this.soaHeader = soaResult.header;
+        this.soaBody = soaResult.body;
+        this.soaSummary = soaResult.summary;
+        this.body.appendChild(this.soaSection);
+        const poolResult = this.buildCollapsibleSection('Pool Stats');
+        this.poolSection = poolResult.section;
+        this.poolHeader = poolResult.header;
+        this.poolBody = poolResult.body;
+        this.poolSummary = poolResult.summary;
+        this.body.appendChild(this.poolSection);
+        document.body.appendChild(this.root);
+        this.unsubscribe = this.provider.subscribe((snapshot) => {
+            this.renderSnapshot(snapshot);
+        });
+        this.renderSnapshot(this.provider.getSnapshot());
+        this.titleBar.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            this.dragging = true;
+            this.dragOffsetX = e.clientX - this.root.offsetLeft;
+            this.dragOffsetY = e.clientY - this.root.offsetTop;
+        });
+        this.mouseMoveHandler = (e) => {
+            if (!this.dragging)
+                return;
+            this.root.style.left = (e.clientX - this.dragOffsetX) + 'px';
+            this.root.style.top = (e.clientY - this.dragOffsetY) + 'px';
+            this.root.style.right = 'auto';
+        };
+        this.mouseUpHandler = () => {
+            this.dragging = false;
+        };
+        document.addEventListener('mousemove', this.mouseMoveHandler);
+        document.addEventListener('mouseup', this.mouseUpHandler);
+        this.keydownHandler = (e) => {
+            if (this.toggleKey === '')
+                return;
+            const isToggleMatch = e.key === this.toggleKey ||
+                e.code === this.toggleKey ||
+                (this.toggleKey === '`' && e.code === 'Backquote');
+            if (!isToggleMatch)
+                return;
+            const tag = e.target?.tagName;
+            if (tag === 'INPUT' || tag === 'TEXTAREA')
+                return;
+            this.toggleCollapse();
+        };
+        document.addEventListener('keydown', this.keydownHandler);
+        this.toggleBtn.addEventListener('mousedown', (e) => {
+            e.stopPropagation();
+        });
+        this.toggleBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.toggleCollapse();
+        });
+        this.entitiesHeader.addEventListener('click', () => {
+            this.entitiesSectionCollapsed = !this.entitiesSectionCollapsed;
+            this.applySectionCollapse(this.entitiesHeader, this.entitiesBody, this.entitiesSectionCollapsed);
+        });
+        this.soaHeader.addEventListener('click', () => {
+            this.soaSectionCollapsed = !this.soaSectionCollapsed;
+            this.applySectionCollapse(this.soaHeader, this.soaBody, this.soaSectionCollapsed);
+        });
+        this.poolHeader.addEventListener('click', () => {
+            this.poolSectionCollapsed = !this.poolSectionCollapsed;
+            this.applySectionCollapse(this.poolHeader, this.poolBody, this.poolSectionCollapsed);
+        });
+    }
+    destroy() {
+        this.unsubscribe();
+        document.removeEventListener('keydown', this.keydownHandler);
+        document.removeEventListener('mousemove', this.mouseMoveHandler);
+        document.removeEventListener('mouseup', this.mouseUpHandler);
+        if (this.root.parentNode) {
+            this.root.parentNode.removeChild(this.root);
+        }
+    }
+    get element() {
+        return this.root;
+    }
+    renderSnapshot(snapshot) {
+        this.entityCountEl.textContent = String(snapshot.world.entityCount);
+        this.soaCountEl.textContent = String(snapshot.world.soaStoreCount);
+        if (snapshot.world.paused) {
+            this.pausedEl.textContent = 'PAUSED';
+            this.pausedEl.style.color = COLOR_WARNING;
+            this.pausedEl.style.fontWeight = 'bold';
+        }
+        else {
+            this.pausedEl.textContent = 'Running';
+            this.pausedEl.style.color = COLOR_TEXT;
+            this.pausedEl.style.fontWeight = 'normal';
+        }
+        this.entitiesSummary.textContent = `(${snapshot.entities.length} entities)`;
+        this.soaSummary.textContent = `(${snapshot.soaStores.length} stores)`;
+        this.poolSummary.textContent = `(${snapshot.pools.length} pools)`;
+        if (!this.entitiesSectionCollapsed) {
+            this.renderEntities(snapshot.entities);
+        }
+        if (!this.soaSectionCollapsed) {
+            this.renderSoAStores(snapshot.soaStores);
+        }
+        if (!this.poolSectionCollapsed) {
+            this.renderPoolStats(snapshot.pools);
+        }
+    }
+    renderEntities(entities) {
+        this.entitiesBody.innerHTML = '';
+        for (const entity of entities) {
+            const row = document.createElement('div');
+            row.style.cursor = 'pointer';
+            row.style.padding = '2px 0';
+            row.style.fontSize = '11px';
+            row.style.borderBottom = '1px solid rgba(255,255,255,0.05)';
+            const componentNames = entity.components.map((c) => c.typeName).join(', ');
+            const label = document.createElement('span');
+            label.textContent = `[ID: ${entity.id}] ${componentNames}`;
+            row.appendChild(label);
+            const isExpanded = this.expandedEntities.has(entity.id);
+            row.addEventListener('click', () => {
+                if (this.expandedEntities.has(entity.id)) {
+                    this.expandedEntities.delete(entity.id);
+                }
+                else {
+                    this.expandedEntities.add(entity.id);
+                }
+                this.renderEntities(this.provider.getSnapshot().entities);
+            });
+            this.entitiesBody.appendChild(row);
+            if (isExpanded) {
+                const detail = document.createElement('div');
+                detail.style.paddingLeft = '12px';
+                detail.style.fontSize = '11px';
+                detail.style.color = '#a0a4a8';
+                detail.style.marginBottom = '4px';
+                for (const comp of entity.components) {
+                    const compHeader = document.createElement('div');
+                    compHeader.style.color = COLOR_ACCENT;
+                    compHeader.style.marginTop = '2px';
+                    compHeader.textContent = comp.typeName;
+                    detail.appendChild(compHeader);
+                    for (const [key, value] of Object.entries(comp.data)) {
+                        const kvRow = document.createElement('div');
+                        kvRow.style.paddingLeft = '8px';
+                        const keySpan = document.createElement('span');
+                        keySpan.style.color = '#888';
+                        keySpan.textContent = `${key}: `;
+                        const valSpan = document.createElement('span');
+                        valSpan.textContent = this.formatValue(value);
+                        kvRow.appendChild(keySpan);
+                        kvRow.appendChild(valSpan);
+                        detail.appendChild(kvRow);
+                    }
+                }
+                this.entitiesBody.appendChild(detail);
+            }
+        }
+    }
+    renderSoAStores(stores) {
+        this.soaBody.innerHTML = '';
+        for (const store of stores) {
+            const storeDiv = document.createElement('div');
+            storeDiv.style.marginBottom = '6px';
+            storeDiv.style.paddingBottom = '4px';
+            storeDiv.style.borderBottom = '1px solid rgba(255,255,255,0.05)';
+            const nameEl = document.createElement('div');
+            nameEl.style.color = COLOR_ACCENT;
+            nameEl.style.fontSize = '11px';
+            nameEl.style.fontWeight = 'bold';
+            nameEl.textContent = store.name;
+            storeDiv.appendChild(nameEl);
+            const layoutEl = document.createElement('div');
+            layoutEl.style.fontSize = '11px';
+            layoutEl.style.color = '#888';
+            const fieldDesc = store.fieldNames
+                .map((n) => `${n}: ${store.fieldTypes[n]}`)
+                .join(', ');
+            layoutEl.textContent = `Fields: ${fieldDesc}`;
+            storeDiv.appendChild(layoutEl);
+            const utilPct = store.capacity > 0
+                ? ((store.count / store.capacity) * 100).toFixed(0)
+                : '0';
+            const capacityEl = document.createElement('div');
+            capacityEl.style.fontSize = '11px';
+            capacityEl.textContent = `Count: ${store.count}/${store.capacity} (${utilPct}% utilised)`;
+            storeDiv.appendChild(capacityEl);
+            if (store.entities.length > 0) {
+                const gridEl = document.createElement('div');
+                gridEl.style.fontSize = '11px';
+                gridEl.style.marginTop = '2px';
+                gridEl.style.overflowX = 'auto';
+                const headerRow = document.createElement('div');
+                headerRow.style.display = 'flex';
+                headerRow.style.gap = '8px';
+                headerRow.style.color = '#888';
+                headerRow.style.borderBottom = '1px solid rgba(255,255,255,0.1)';
+                headerRow.style.paddingBottom = '1px';
+                headerRow.style.marginBottom = '1px';
+                const idHeader = document.createElement('span');
+                idHeader.style.minWidth = '40px';
+                idHeader.textContent = 'ID';
+                headerRow.appendChild(idHeader);
+                for (const fieldName of store.fieldNames) {
+                    const fh = document.createElement('span');
+                    fh.style.minWidth = '60px';
+                    fh.textContent = fieldName;
+                    headerRow.appendChild(fh);
+                }
+                gridEl.appendChild(headerRow);
+                for (const entityData of store.entities) {
+                    const dataRow = document.createElement('div');
+                    dataRow.style.display = 'flex';
+                    dataRow.style.gap = '8px';
+                    const idCell = document.createElement('span');
+                    idCell.style.minWidth = '40px';
+                    idCell.textContent = String(entityData.entityId);
+                    dataRow.appendChild(idCell);
+                    for (const fieldName of store.fieldNames) {
+                        const cell = document.createElement('span');
+                        cell.style.minWidth = '60px';
+                        cell.textContent = this.formatValue(entityData.fields[fieldName]);
+                        dataRow.appendChild(cell);
+                    }
+                    gridEl.appendChild(dataRow);
+                }
+                storeDiv.appendChild(gridEl);
+            }
+            this.soaBody.appendChild(storeDiv);
+        }
+    }
+    renderPoolStats(pools) {
+        this.poolBody.innerHTML = '';
+        if (pools.length === 0) {
+            const emptyEl = document.createElement('div');
+            emptyEl.style.fontSize = '11px';
+            emptyEl.style.color = '#888';
+            emptyEl.textContent = 'No pools registered';
+            this.poolBody.appendChild(emptyEl);
+            return;
+        }
+        const table = document.createElement('table');
+        table.style.width = '100%';
+        table.style.fontSize = '11px';
+        table.style.borderCollapse = 'collapse';
+        const thead = document.createElement('thead');
+        const headerRow = document.createElement('tr');
+        const columns = ['typeKey', 'available', 'totalCreated', 'acquireCount', 'releaseCount', 'missCount'];
+        for (const col of columns) {
+            const th = document.createElement('th');
+            th.style.textAlign = 'left';
+            th.style.padding = '2px 4px';
+            th.style.borderBottom = '1px solid rgba(255,255,255,0.15)';
+            th.style.color = '#888';
+            th.style.fontWeight = 'normal';
+            th.textContent = col;
+            headerRow.appendChild(th);
+        }
+        thead.appendChild(headerRow);
+        table.appendChild(thead);
+        const tbody = document.createElement('tbody');
+        for (const pool of pools) {
+            const tr = document.createElement('tr');
+            const tdKey = document.createElement('td');
+            tdKey.style.padding = '2px 4px';
+            tdKey.textContent = pool.typeKey;
+            tr.appendChild(tdKey);
+            const statValues = [
+                pool.stats.available,
+                pool.stats.totalCreated,
+                pool.stats.acquireCount,
+                pool.stats.releaseCount,
+                pool.stats.missCount,
+            ];
+            for (const val of statValues) {
+                const td = document.createElement('td');
+                td.style.padding = '2px 4px';
+                td.textContent = String(val);
+                tr.appendChild(td);
+            }
+            tbody.appendChild(tr);
+        }
+        table.appendChild(tbody);
+        this.poolBody.appendChild(table);
+    }
+    toggleCollapse() {
+        this.collapsed = !this.collapsed;
+        this.body.style.display = this.collapsed ? 'none' : 'block';
+        this.updateToggleBtn();
+    }
+    updateToggleBtn() {
+        this.toggleBtn.textContent = this.collapsed ? '[+]' : '[\u2212]';
+    }
+    applySectionCollapse(header, body, isCollapsed) {
+        body.style.display = isCollapsed ? 'none' : 'block';
+        const arrow = header.querySelector('[data-role="arrow"]');
+        if (arrow) {
+            arrow.textContent = isCollapsed ? '\u25B6' : '\u25BC';
+        }
+    }
+    buildCollapsibleSection(title) {
+        const section = document.createElement('div');
+        section.style.marginBottom = '4px';
+        const header = document.createElement('div');
+        header.style.cursor = 'pointer';
+        header.style.fontSize = '12px';
+        header.style.fontWeight = 'bold';
+        header.style.color = COLOR_ACCENT;
+        header.style.padding = '2px 0';
+        header.style.userSelect = 'none';
+        const arrow = document.createElement('span');
+        arrow.setAttribute('data-role', 'arrow');
+        arrow.textContent = '\u25BC';
+        arrow.style.marginRight = '4px';
+        arrow.style.fontSize = '10px';
+        const titleSpan = document.createElement('span');
+        titleSpan.textContent = title;
+        const summary = document.createElement('span');
+        summary.style.fontWeight = 'normal';
+        summary.style.fontSize = '11px';
+        summary.style.color = '#888';
+        summary.style.marginLeft = '6px';
+        header.appendChild(arrow);
+        header.appendChild(titleSpan);
+        header.appendChild(summary);
+        const body = document.createElement('div');
+        body.style.paddingLeft = '4px';
+        section.appendChild(header);
+        section.appendChild(body);
+        return { section, header, body, summary };
+    }
+    createLabel(text) {
+        const el = document.createElement('span');
+        el.style.color = '#888';
+        el.textContent = text;
+        return el;
+    }
+    createSeparator() {
+        const el = document.createElement('span');
+        el.style.margin = '0 6px';
+        el.style.color = '#555';
+        el.textContent = '|';
+        return el;
+    }
+    formatValue(value) {
+        if (typeof value === 'bigint') {
+            return `${value}n`;
+        }
+        return String(value);
+    }
+    applyRootStyles() {
+        const s = this.root.style;
+        s.position = 'fixed';
+        s.top = '8px';
+        s.right = '8px';
+        s.width = '360px';
+        s.backgroundColor = COLOR_BG;
+        s.color = COLOR_TEXT;
+        s.fontFamily = FONT_MONO;
+        s.fontSize = '11px';
+        s.zIndex = '99999';
+        s.borderRadius = '4px';
+        s.border = '1px solid rgba(255,255,255,0.1)';
+        s.boxShadow = '0 2px 12px rgba(0,0,0,0.5)';
+        s.overflow = 'hidden';
+    }
+    applyTitleBarStyles() {
+        const s = this.titleBar.style;
+        s.backgroundColor = 'rgba(30, 30, 40, 0.95)';
+        s.padding = '4px 8px';
+        s.cursor = 'move';
+        s.userSelect = 'none';
+        s.display = 'flex';
+        s.justifyContent = 'space-between';
+        s.alignItems = 'center';
+        s.fontSize = '12px';
+        s.fontWeight = 'bold';
+        s.color = COLOR_ACCENT;
+        s.minHeight = '20px';
+    }
+    applyToggleBtnStyles() {
+        const s = this.toggleBtn.style;
+        s.cursor = 'pointer';
+        s.fontSize = '12px';
+        s.color = COLOR_TEXT;
+        s.marginLeft = '8px';
+    }
+}

package/dist/debug/index.d.ts

@@ -0,0 +1,4 @@
+export { DebugDataProvider } from './DebugDataProvider';
+export { DebugPanel } from './DebugPanel';
+export type { DebugSnapshot, DebugEntitySnapshot, DebugComponentSnapshot, DebugSoAStoreSnapshot, DebugPoolSnapshot, DebugDataProviderConfig, DebugPanelConfig, } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/debug/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/debug/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EACV,aAAa,EACb,mBAAmB,EACnB,sBAAsB,EACtB,qBAAqB,EACrB,iBAAiB,EACjB,uBAAuB,EACvB,gBAAgB,GACjB,MAAM,SAAS,CAAC"}

package/dist/debug/index.js

@@ -0,0 +1,2 @@
+export { DebugDataProvider } from './DebugDataProvider';
+export { DebugPanel } from './DebugPanel';