@where-stars-drift/core 1.0.0

package/dist/src/entities/supernova.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @fileoverview Defines the Supernova class for a visual pulse effect.
+ */
+import type { BlackHle } from './black-hole';
+export declare const SUPERNOVA_CONFIG: {
+    MAX_LIFE: number;
+    RADIUS_MULTIPLIER: number;
+    INITIAL_RADIUS_MULTIPLIER: number;
+    COLOR: string;
+    SHADOW_BLUR: number;
+};
+export declare class Supernova {
+    x: number;
+    y: number;
+    radius: number;
+    maxRadius: number;
+    life: number;
+    maxLife: number;
+    color: string;
+    initialRadius: number;
+    parent: BlackHle | null;
+    constructor(x: number, y: number, parentRadius: number, parent?: BlackHle | null);
+    isAlive(): boolean;
+    update(): void;
+    draw(ctx: CanvasRenderingContext2D): void;
+}

package/dist/src/entities/supernova.js

@@ -0,0 +1,54 @@
+/**
+ * @fileoverview Defines the Supernova class for a visual pulse effect.
+ */
+// --- Supernova Configuration ---
+export const SUPERNOVA_CONFIG = {
+    MAX_LIFE: 60, // 1 second in frames
+    RADIUS_MULTIPLIER: 2.5,
+    INITIAL_RADIUS_MULTIPLIER: 0.2,
+    COLOR: 'rgba(255, 255, 255, 0.8)',
+    SHADOW_BLUR: 30,
+};
+export class Supernova {
+    constructor(x, y, parentRadius, parent = null) {
+        this.x = x;
+        this.y = y;
+        this.initialRadius = parentRadius * SUPERNOVA_CONFIG.INITIAL_RADIUS_MULTIPLIER;
+        this.radius = this.initialRadius;
+        this.maxRadius = parentRadius * SUPERNOVA_CONFIG.RADIUS_MULTIPLIER;
+        this.maxLife = SUPERNOVA_CONFIG.MAX_LIFE;
+        this.life = this.maxLife;
+        this.color = SUPERNOVA_CONFIG.COLOR;
+        this.parent = parent;
+    }
+    isAlive() {
+        return this.life > 0;
+    }
+    update() {
+        this.life--;
+        if (this.parent) {
+            this.x = this.parent.x;
+            this.y = this.parent.y;
+        }
+        const progress = (this.maxLife - this.life) / this.maxLife; // 0 to 1
+        // Ease-out cubic function for radius expansion
+        this.radius = this.initialRadius + (this.maxRadius - this.initialRadius) * (1 - Math.pow(1 - progress, 3));
+    }
+    draw(ctx) {
+        const progress = this.life / this.maxLife; // 1 to 0
+        const alpha = progress * 0.8; // Fade out
+        ctx.save();
+        ctx.globalAlpha = alpha;
+        ctx.shadowColor = this.color;
+        ctx.shadowBlur = SUPERNOVA_CONFIG.SHADOW_BLUR;
+        const gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius);
+        gradient.addColorStop(0, 'rgba(255, 255, 255, 0)');
+        gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.5)');
+        gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
+        ctx.fillStyle = gradient;
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.restore();
+    }
+}

package/dist/src/index.d.ts

@@ -0,0 +1,20 @@
+export { WhereStarsDrift, type SimulationConfig, type SimulationStats } from './where-stars-drift';
+export { Star } from './entities/star';
+export { Pulsar } from './entities/pulsar';
+export { RingedPlanet } from './entities/ringed-planet';
+export { BlackHole, BlackHle, type BlackHoleType } from './entities/black-hole';
+export { Starship, type ShipState, type ShipClass } from './entities/starship';
+export { Fleet } from './entities/fleet';
+export { type Clan } from './entities/clans';
+export { formationRegistry, type Formation, type StrictFormation, type FreeFormation } from './entities/formations';
+export { Comet } from './entities/comet';
+export { Nebula } from './entities/nebula';
+export { Supernova } from './entities/supernova';
+export { SectorGrid } from './entities/sector-grid';
+export { LayerController, type Layer } from './controllers/layer-controller';
+export { PhysicsController } from './controllers/physics-controller';
+export { StarshipController } from './controllers/starship-controller';
+export { StarController } from './controllers/star-controller';
+export { EffectsController } from './controllers/effects-controller';
+export { SIMULATION_CONFIG, DEBUG_CONFIG } from './config/simulation';
+export { GRID_CONFIG } from './config/grid';

package/dist/src/index.js

@@ -0,0 +1,19 @@
+export { WhereStarsDrift } from './where-stars-drift';
+export { Star } from './entities/star';
+export { Pulsar } from './entities/pulsar';
+export { RingedPlanet } from './entities/ringed-planet';
+export { BlackHole, BlackHle } from './entities/black-hole';
+export { Starship } from './entities/starship';
+export { Fleet } from './entities/fleet';
+export { formationRegistry } from './entities/formations';
+export { Comet } from './entities/comet';
+export { Nebula } from './entities/nebula';
+export { Supernova } from './entities/supernova';
+export { SectorGrid } from './entities/sector-grid';
+export { LayerController } from './controllers/layer-controller';
+export { PhysicsController } from './controllers/physics-controller';
+export { StarshipController } from './controllers/starship-controller';
+export { StarController } from './controllers/star-controller';
+export { EffectsController } from './controllers/effects-controller';
+export { SIMULATION_CONFIG, DEBUG_CONFIG } from './config/simulation';
+export { GRID_CONFIG } from './config/grid';

package/dist/src/lib/energy-stream.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @fileoverview Defines the energy stream rendering function.
+ */
+import type { BlackHle } from '../entities/black-hole';
+export declare const drawEnergyStream: (ctx: CanvasRenderingContext2D, hole: BlackHle, target: BlackHle, pulseTime: number, frameCount: number) => void;

package/dist/src/lib/energy-stream.js

@@ -0,0 +1,98 @@
+/**
+ * @fileoverview Defines the energy stream rendering function.
+ */
+import { BLACK_HOLE_CONFIG } from '../entities/black-hole';
+export const drawEnergyStream = (ctx, hole, target, pulseTime, frameCount) => {
+    const dx = target.x - hole.x;
+    const dy = target.y - hole.y;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    const angle = Math.atan2(dy, dx);
+    const perpAngle = angle + Math.PI / 2;
+    let glowColor;
+    let baseR, baseG, baseB;
+    switch (hole.type) {
+        case 'VORTEX':
+            glowColor = BLACK_HOLE_CONFIG.VORTEX.VORTEX_COLOR_INNER;
+            [baseR, baseG, baseB] = [255, 100, 0];
+            break;
+        case 'WARPED_DISK':
+            glowColor = BLACK_HOLE_CONFIG.WARPED_DISK.DISK_COLOR_INNER;
+            [baseR, baseG, baseB] = [255, 220, 150];
+            break;
+        case 'ACCRETION_DISK':
+            glowColor = `rgba(200, 220, 255, 0.8)`;
+            [baseR, baseG, baseB] = [200, 220, 255];
+            break;
+        case 'LENSING':
+        default:
+            glowColor = `rgba(255, 255, 255, 0.7)`;
+            [baseR, baseG, baseB] = [255, 255, 255];
+            break;
+    }
+    const pulse = (Math.sin(pulseTime * hole.pulseFrequency + hole.pulsePhase) + 1) / 2; // 0 to 1
+    const startX = hole.x;
+    const startY = hole.y;
+    ctx.save();
+    ctx.globalCompositeOperation = 'lighter';
+    ctx.lineCap = 'round';
+    // --- Emission Nozzle ---
+    if (frameCount % 5 === 0) {
+        const nozzleLengthMultiplier = Math.random() * 7 + 3;
+        const potentialNozzleLength = hole.radius * nozzleLengthMultiplier;
+        hole.nozzleLength = Math.min(potentialNozzleLength, (4 / 5) * dist);
+        const nozzleTipX = startX + Math.cos(angle) * hole.nozzleLength;
+        const nozzleTipY = startY + Math.sin(angle) * hole.nozzleLength;
+        const nozzleGradient = ctx.createLinearGradient(startX, startY, nozzleTipX, nozzleTipY);
+        nozzleGradient.addColorStop(0, `rgba(${baseR}, ${baseG}, ${baseB}, ${0.1 + pulse * 0.2})`);
+        nozzleGradient.addColorStop(1, `rgba(${baseR}, ${baseG}, ${baseB}, 0)`);
+        hole.nozzleColor = nozzleGradient;
+    }
+    if (hole.nozzleLength > 0 && hole.nozzleColor) {
+        const nozzleTipX = startX + Math.cos(angle) * hole.nozzleLength;
+        const nozzleTipY = startY + Math.sin(angle) * hole.nozzleLength;
+        const nozzleBaseWidth = hole.radius * 2;
+        ctx.beginPath();
+        ctx.moveTo(nozzleTipX, nozzleTipY);
+        ctx.lineTo(startX + Math.cos(perpAngle) * nozzleBaseWidth / 2, startY + Math.sin(perpAngle) * nozzleBaseWidth / 2);
+        ctx.lineTo(startX - Math.cos(perpAngle) * nozzleBaseWidth / 2, startY - Math.sin(perpAngle) * nozzleBaseWidth / 2);
+        ctx.closePath();
+        ctx.fillStyle = hole.nozzleColor;
+        ctx.shadowColor = glowColor;
+        ctx.shadowBlur = 30;
+        ctx.fill();
+    }
+    // --- Main Stream ---
+    const endX = startX + dx;
+    const endY = startY + dy;
+    const minThicknessFactor = 0.3;
+    const maxThicknessFactor = 3.5;
+    const distanceFactor = Math.max(0, 1 - dist / BLACK_HOLE_CONFIG.ENERGY_STREAM_DISTANCE);
+    const thicknessMultiplier = minThicknessFactor + (maxThicknessFactor - minThicknessFactor) * distanceFactor;
+    // --- Outer Glow ---
+    const outerGlowAlpha = 0.2 + pulse * 0.3;
+    ctx.shadowColor = glowColor;
+    ctx.shadowBlur = 25;
+    const gradientOuter = ctx.createLinearGradient(startX, startY, endX, endY);
+    gradientOuter.addColorStop(0, `rgba(${baseR}, ${baseG}, ${baseB}, ${outerGlowAlpha * 0.7})`);
+    gradientOuter.addColorStop(0.95, `rgba(${baseR}, ${baseG}, ${baseB}, 0)`);
+    ctx.strokeStyle = gradientOuter;
+    ctx.lineWidth = hole.radius * (0.2 + pulse * 0.15) * thicknessMultiplier;
+    ctx.beginPath();
+    ctx.moveTo(startX, startY);
+    ctx.lineTo(endX, endY);
+    ctx.stroke();
+    // --- Inner Core ---
+    const innerGlowAlpha = 0.4 + pulse * 0.6;
+    ctx.shadowColor = `rgba(${baseR}, ${baseG}, ${baseB}, ${0.5 + pulse * 0.5})`;
+    ctx.shadowBlur = 12;
+    const gradientInner = ctx.createLinearGradient(startX, startY, endX, endY);
+    gradientInner.addColorStop(0, `rgba(${baseR}, ${baseG}, ${baseB}, ${innerGlowAlpha})`);
+    gradientInner.addColorStop(0.95, `rgba(${baseR}, ${baseG}, ${baseB}, 0)`);
+    ctx.strokeStyle = gradientInner;
+    ctx.lineWidth = hole.radius * 0.1 * thicknessMultiplier;
+    ctx.beginPath();
+    ctx.moveTo(startX, startY);
+    ctx.lineTo(endX, endY);
+    ctx.stroke();
+    ctx.restore();
+};

package/dist/src/lib/quadtree.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @fileoverview Defines the Quadtree class for spatial partitioning.
+ */
+import type { BoundedBody } from '../base/bounded-body';
+export declare const QUADTREE_CONFIG: {
+    MAX_OBJECTS: number;
+    MAX_LEVELS: number;
+};
+interface Rectangle {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare class Quadtree {
+    private maxObjects;
+    private maxLevels;
+    private level;
+    private bounds;
+    private objects;
+    private nodes;
+    constructor(bounds: Rectangle, level?: number);
+    clear(): void;
+    private split;
+    private getIndex;
+    insert(body: BoundedBody): void;
+    query(range: BoundedBody): BoundedBody[];
+    private intersects;
+    draw(ctx: CanvasRenderingContext2D): void;
+}
+export {};

package/dist/src/lib/quadtree.js

@@ -0,0 +1,124 @@
+// --- Quadtree Configuration ---
+export const QUADTREE_CONFIG = {
+    MAX_OBJECTS: 10,
+    MAX_LEVELS: 5,
+};
+export class Quadtree {
+    constructor(bounds, level = 0) {
+        this.maxObjects = QUADTREE_CONFIG.MAX_OBJECTS;
+        this.maxLevels = QUADTREE_CONFIG.MAX_LEVELS;
+        this.level = level;
+        this.bounds = bounds;
+        this.objects = [];
+        this.nodes = [];
+    }
+    clear() {
+        this.objects = [];
+        this.nodes = [];
+    }
+    split() {
+        const nextLevel = this.level + 1;
+        const subWidth = this.bounds.width / 2;
+        const subHeight = this.bounds.height / 2;
+        const x = this.bounds.x;
+        const y = this.bounds.y;
+        // Top right
+        this.nodes[0] = new Quadtree({ x: x + subWidth, y: y, width: subWidth, height: subHeight }, nextLevel);
+        // Top left
+        this.nodes[1] = new Quadtree({ x: x, y: y, width: subWidth, height: subHeight }, nextLevel);
+        // Bottom left
+        this.nodes[2] = new Quadtree({ x: x, y: y + subHeight, width: subWidth, height: subHeight }, nextLevel);
+        // Bottom right
+        this.nodes[3] = new Quadtree({ x: x + subWidth, y: y + subHeight, width: subWidth, height: subHeight }, nextLevel);
+    }
+    getIndex(body) {
+        let index = -1;
+        const verticalMidpoint = this.bounds.x + (this.bounds.width / 2);
+        const horizontalMidpoint = this.bounds.y + (this.bounds.height / 2);
+        const topQuadrant = body.y < horizontalMidpoint && body.y + body.boundingRadius < horizontalMidpoint;
+        const bottomQuadrant = body.y > horizontalMidpoint;
+        if (body.x < verticalMidpoint && body.x + body.boundingRadius < verticalMidpoint) {
+            if (topQuadrant) {
+                index = 1; // Top left
+            }
+            else if (bottomQuadrant) {
+                index = 2; // Bottom left
+            }
+        }
+        else if (body.x > verticalMidpoint) {
+            if (topQuadrant) {
+                index = 0; // Top right
+            }
+            else if (bottomQuadrant) {
+                index = 3; // Bottom right
+            }
+        }
+        return index;
+    }
+    insert(body) {
+        if (this.nodes.length) {
+            const index = this.getIndex(body);
+            if (index !== -1) {
+                this.nodes[index].insert(body);
+                return;
+            }
+        }
+        this.objects.push(body);
+        if (this.objects.length > this.maxObjects && this.level < this.maxLevels) {
+            if (!this.nodes.length) {
+                this.split();
+            }
+            let i = 0;
+            while (i < this.objects.length) {
+                const index = this.getIndex(this.objects[i]);
+                if (index !== -1) {
+                    this.nodes[index].insert(this.objects.splice(i, 1)[0]);
+                }
+                else {
+                    i++;
+                }
+            }
+        }
+    }
+    query(range) {
+        let found = [];
+        const { x, y, boundingRadius } = range;
+        const queryBounds = {
+            x: x - boundingRadius,
+            y: y - boundingRadius,
+            width: boundingRadius * 2,
+            height: boundingRadius * 2,
+        };
+        if (!this.intersects(this.bounds, queryBounds)) {
+            return [];
+        }
+        found = found.concat(this.objects);
+        if (this.nodes.length) {
+            const index = this.getIndex(range);
+            if (index !== -1) {
+                found = found.concat(this.nodes[index].query(range));
+            }
+            else {
+                for (let i = 0; i < this.nodes.length; i++) {
+                    found = found.concat(this.nodes[i].query(range));
+                }
+            }
+        }
+        return found;
+    }
+    intersects(rect1, rect2) {
+        return (rect1.x < rect2.x + rect2.width &&
+            rect1.x + rect1.width > rect2.x &&
+            rect1.y < rect2.y + rect2.height &&
+            rect1.y + rect1.height > rect2.y);
+    }
+    draw(ctx) {
+        ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
+        ctx.strokeRect(this.bounds.x, this.bounds.y, this.bounds.width, this.bounds.height);
+        if (this.nodes.length) {
+            for (let i = 0; i < this.nodes.length; i++) {
+                this.nodes[i].draw(ctx);
+            }
+        }
+    }
+}

package/dist/src/lib/simplified-stream.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @fileoverview Defines a simplified, performant energy stream for star-to-hole effects.
+ */
+import type { Star } from '../entities/star';
+import type { BlackHle } from '../entities/black-hole';
+export declare const drawSimpleStarStream: (ctx: CanvasRenderingContext2D, star: Star, hole: BlackHle) => void;

package/dist/src/lib/simplified-stream.js

@@ -0,0 +1,19 @@
+export const drawSimpleStarStream = (ctx, star, hole) => {
+    const dx = hole.x - star.x;
+    const dy = hole.y - star.y;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    // Fade the stream as it gets closer to the hole
+    const maxDist = hole.radius + 50;
+    const alpha = Math.max(0, 1 - (dist / maxDist)) * 0.5;
+    if (alpha <= 0)
+        return;
+    ctx.save();
+    ctx.beginPath();
+    ctx.moveTo(star.x, star.y);
+    ctx.lineTo(hole.x, hole.y);
+    ctx.strokeStyle = star.color;
+    ctx.globalAlpha = alpha;
+    ctx.lineWidth = star.radius * 0.8;
+    ctx.stroke();
+    ctx.restore();
+};

package/dist/src/types.d.ts

@@ -0,0 +1,14 @@
+import type { Starship } from './entities/starship';
+import type { Formation } from './entities/formations';
+import type { Clan } from './entities/clans';
+import type { Fleet } from './entities/fleet';
+import type { Star } from './entities/star';
+import type { BlackHle } from './entities/black-hole';
+export type CatalogData = {
+    starships: Starship[];
+    formations: Formation[];
+    clans: Clan[];
+    fleets: Fleet[];
+    stars: Star[];
+    blackHoles: BlackHle[];
+};

package/dist/src/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/ui/black-holes-panel.d.ts

@@ -0,0 +1,2 @@
+import { BlackHole } from '../entities/black-hole';
+export declare function drawBlackHoleCatalog(ctx: CanvasRenderingContext2D, startY: number, blackHoleCatalog: BlackHole[], pulseTime: number, frameCount: number): number;

package/dist/src/ui/black-holes-panel.js

@@ -0,0 +1,76 @@
+import { PANEL_CONFIG } from './panel-config';
+const DESCRIPTIONS = {
+    STANDARD: 'A simple black hole with a soft, ethereal glow.',
+    LENSING: 'Features a bright, sharp ring of light caused by gravitational lensing.',
+    ACCRETION_DISK: 'Characterized by a stable, flat disk of matter with a bright central line and relativistic jets.',
+    WARPED_DISK: 'Shows a dynamic, warped accretion disk that gives a 3D perspective.',
+    VORTEX: 'A highly active black hole with swirling arms of super-heated gas.',
+};
+function drawBlackHoleParameters(ctx, hole, x, y) {
+    ctx.font = 'bold 12px "Roboto Mono", monospace';
+    ctx.fillStyle = '#fff';
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'top';
+    ctx.fillText(hole.type, x, y);
+    // Draw description
+    ctx.font = '11px "Roboto Mono", monospace';
+    ctx.fillStyle = PANEL_CONFIG.ACCENT_COLOR;
+    const description = DESCRIPTIONS[hole.type] || 'A mysterious gravitational anomaly.';
+    const words = description.split(' ');
+    let line = '';
+    let currentY = y + 20; // Start description lower
+    for (let n = 0; n < words.length; n++) {
+        const testLine = line + words[n] + ' ';
+        const metrics = ctx.measureText(testLine);
+        if (metrics.width > 200 && n > 0) { // Wrap text
+            ctx.fillText(line, x, currentY);
+            line = words[n] + ' ';
+            currentY += 12;
+        }
+        else {
+            line = testLine;
+        }
+    }
+    ctx.fillText(line, x, currentY);
+    currentY += 20;
+    // Draw parameters
+    ctx.font = '10px "Roboto Mono", monospace';
+    const lineHeight = 12;
+    const params = [
+        { label: 'Type', value: hole.type },
+        { label: 'Base Radius', value: hole.baseRadius.toFixed(2) },
+        { label: 'Mass', value: hole.mass.toFixed(2) },
+        { label: 'Merge State', value: `${hole.mergeState}` },
+    ];
+    params.forEach(param => {
+        ctx.fillStyle = PANEL_CONFIG.ACCENT_COLOR;
+        ctx.fillText(`${param.label}:`, x, currentY);
+        ctx.fillStyle = PANEL_CONFIG.TEXT_COLOR;
+        ctx.fillText(param.value, x + 70, currentY);
+        currentY += lineHeight;
+    });
+}
+export function drawBlackHoleCatalog(ctx, startY, blackHoleCatalog, pulseTime, frameCount) {
+    let currentY = startY + PANEL_CONFIG.PADDING;
+    ctx.font = PANEL_CONFIG.GROUP_FONT;
+    ctx.fillStyle = PANEL_CONFIG.TEXT_COLOR;
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'top';
+    ctx.fillText('All Black Hole Types', PANEL_CONFIG.X + PANEL_CONFIG.PADDING, currentY);
+    currentY += PANEL_CONFIG.GROUP_HEADER_HEIGHT;
+    blackHoleCatalog.forEach(sampleHole => {
+        const drawingAreaHeight = 80;
+        const rowY = currentY + drawingAreaHeight / 2;
+        const xPos = PANEL_CONFIG.X + PANEL_CONFIG.PADDING + 30;
+        ctx.save();
+        // Position the drawing relative to the catalog panel
+        ctx.translate(xPos, rowY);
+        // sampleHole.update(ctx, 0, 0, frameCount); // This is expensive, disable animation in catalog
+        sampleHole.draw(ctx, 0, 0); // Pass static pulseTime and frameCount
+        ctx.restore();
+        // Draw Title
+        drawBlackHoleParameters(ctx, sampleHole, xPos + 70, rowY - 35);
+        currentY += drawingAreaHeight + 45; // Add padding between entries
+    });
+    return currentY - startY;
+}

package/dist/src/ui/clans-panel.d.ts

@@ -0,0 +1,2 @@
+import type { Clan } from '../entities/clans';
+export declare function drawClanCatalog(ctx: CanvasRenderingContext2D, startY: number, clans: Clan[]): number;

package/dist/src/ui/clans-panel.js

@@ -0,0 +1,20 @@
+import { PANEL_CONFIG } from './panel-config';
+export function drawClanCatalog(ctx, startY, clans) {
+    ctx.font = PANEL_CONFIG.ROW_FONT;
+    clans.forEach((clan, i) => {
+        const y = startY + (i * PANEL_CONFIG.ROW_HEIGHT) + PANEL_CONFIG.PADDING + 15;
+        // Draw clan icon
+        ctx.save();
+        ctx.translate(PANEL_CONFIG.X + PANEL_CONFIG.PADDING + 10, y);
+        ctx.fillStyle = clan.color;
+        ctx.strokeStyle = clan.color;
+        clan.icon(ctx, 12);
+        ctx.restore();
+        // Draw text
+        ctx.fillStyle = PANEL_CONFIG.TEXT_COLOR;
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(`${clan.name} (Fleets: ${clan.fleets.length}, Ships: ${clan.starships.length})`, PANEL_CONFIG.X + PANEL_CONFIG.PADDING + 30, y);
+    });
+    return (clans.length * PANEL_CONFIG.ROW_HEIGHT) + (PANEL_CONFIG.PADDING * 2);
+}

package/dist/src/ui/debug-panel-controller.d.ts

@@ -0,0 +1,41 @@
+import type { Formation } from '../entities/formations';
+import type { CatalogData } from '../types';
+export declare class DebugPanelController {
+    private ctx;
+    private activeTab;
+    private tabs;
+    private shipCatalog;
+    private formationCatalog;
+    private starCatalog;
+    private blackHoleCatalog;
+    private panelY;
+    private panelHeight;
+    private scrollTop;
+    private contentHeight;
+    private starFactory;
+    private blackHoleFactory;
+    private isDraggingScrollbar;
+    private dragStartY;
+    private dragStartScrollTop;
+    private scrollbarThumb;
+    private scrollbarTrack;
+    private showFormationShips;
+    constructor(ctx: CanvasRenderingContext2D, allFormations: Formation[]);
+    private initializeTabs;
+    private cacheShipClasses;
+    private cacheFormations;
+    private cacheStarVariations;
+    private cacheBlackHoleTypes;
+    private calculatePanelDimensions;
+    isMouseOver(x: number, y: number): boolean;
+    handleScroll(deltaY: number): void;
+    isDragging(): boolean;
+    handleMouseDown(x: number, y: number): void;
+    handleMouseMove(x: number, y: number): void;
+    handleMouseUp(): void;
+    handleResize(): void;
+    draw(data: CatalogData, pulseTime: number, frameCount: number): void;
+    private drawPanelBase;
+    private drawTabs;
+    private drawScrollbar;
+}