@flight-framework/devtools 1.0.0 → 1.0.1

package/README.md

@@ -1,6 +1,18 @@
 # @flight-framework/devtools
 
-Developer tools for Flight Framework debugging and inspection.
+Developer tools for Flight Framework. Inspect routes, debug server actions, and monitor performance.
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Quick Start](#quick-start)
+- [Features](#features)
+- [Configuration](#configuration)
+- [Browser Extension](#browser-extension)
+- [API](#api)
+- [License](#license)
+
+---
 
 ## Installation
 
@@ -8,7 +20,9 @@ Developer tools for Flight Framework debugging and inspection.
 npm install -D @flight-framework/devtools
 ```
 
-## Usage
+---
+
+## Quick Start
 
 ```typescript
 // flight.config.ts
@@ -22,28 +36,185 @@ export default defineConfig({
 });
 ```
 
+Access the devtools panel at `/__devtools` in development mode.
+
+---
+
 ## Features
 
-- Route inspection
-- Component tree visualization
-- Server action debugging
-- Cache inspection
-- Performance metrics
-- Network requests
+### Route Inspector
+- View all registered routes
+- See route parameters and patterns
+- Test route matching
 
-## Browser Extension
+### Component Tree
+- Visualize component hierarchy
+- Inspect props and state
+- Highlight rendering
+
+### Server Actions
+- Log all server action calls
+- View request/response payloads
+- Measure execution time
+
+### Cache Inspector
+- View cached entries
+- Inspect TTL and hit rates
+- Manually invalidate entries
+
+### Network Monitor
+- Track API requests
+- View request/response headers
+- Measure response times
+
+### Performance
+- Core Web Vitals (LCP, FID, CLS)
+- Hydration timing
+- Bundle size analysis
+
+---
+
+## Contributing
+
+See the main [CONTRIBUTING.md](../../CONTRIBUTING.md) for guidelines.
+
+---
+
+## New in V2: Enhanced Panels
 
-Install the Flight DevTools browser extension for Chrome or Firefox to view the devtools panel.
+### Hydration Panel
+
+Track island hydration timing and status:
+
+```typescript
+import { subscribeToHydration, setupHydrationTracking } from '@flight-framework/devtools/hydration';
+
+// Auto-track hydration events
+setupHydrationTracking();
+
+// Subscribe to updates
+subscribeToHydration((islands, metrics) => {
+    console.log(`Hydrated: ${metrics.hydratedCount}/${metrics.totalIslands}`);
+    console.log(`Avg time: ${metrics.averageHydrationTime}ms`);
+});
+```
+
+### Bundle Panel
+
+Monitor chunk loading and sizes:
+
+```typescript
+import { subscribeToBundles, setupBundleTracking } from '@flight-framework/devtools/bundle';
+
+// Auto-track via Performance API
+setupBundleTracking();
+
+// Subscribe to updates
+subscribeToBundles((chunks, metrics) => {
+    console.log(`Total size: ${metrics.totalSize} bytes`);
+    console.log(`Loaded: ${metrics.loadedChunks} chunks`);
+});
+```
+
+### Enhanced Cache Panel
+
+Advanced cache inspection with tag support:
+
+```typescript
+import { subscribeToCache, invalidateByTag } from '@flight-framework/devtools/cache';
+
+// Subscribe to cache updates
+subscribeToCache((entries, metrics) => {
+    console.log(`Hit rate: ${metrics.hitRate}%`);
+    console.log(`Tags: ${metrics.uniqueTags.join(', ')}`);
+});
+
+// Invalidate by tag
+invalidateByTag('user-data');
+```
+
+---
 
 ## Configuration
 
 ```typescript
 devtools({
+    // Enable in development only (default)
     enabled: process.env.NODE_ENV !== 'production',
+    
+    // Devtools server port
     port: 9229,
+    
+    // Open devtools automatically
+    open: false,
+    
+    // Features to enable
+    features: {
+        routes: true,
+        components: true,
+        actions: true,
+        cache: true,
+        network: true,
+        performance: true,
+    },
+    
+    // Overlay position
+    position: 'bottom-right',
+});
+```
+
+---
+
+## Browser Extension
+
+Install the Flight DevTools browser extension for an integrated debugging experience:
+
+- **Chrome**: [Flight DevTools](https://chrome.google.com/webstore/...)
+- **Firefox**: [Flight DevTools](https://addons.mozilla.org/...)
+
+The extension adds a "Flight" panel to your browser's developer tools.
+
+---
+
+## API
+
+### Programmatic Access
+
+```typescript
+import { getDevtools } from '@flight-framework/devtools';
+
+const devtools = getDevtools();
+
+// Log custom event
+devtools.log('custom', { message: 'Hello' });
+
+// Add custom panel
+devtools.addPanel('my-panel', {
+    title: 'My Panel',
+    render: () => '<div>Custom content</div>',
 });
 ```
 
+### React Hook
+
+```tsx
+import { useDevtools } from '@flight-framework/devtools/react';
+
+function MyComponent() {
+    const { log, measure } = useDevtools();
+    
+    const handleClick = () => {
+        const end = measure('click-handler');
+        // ... do work
+        end();
+    };
+    
+    return <button onClick={handleClick}>Click</button>;
+}
+```
+
+---
+
 ## License
 
 MIT

package/dist/bundle-panel.d.ts

@@ -0,0 +1,88 @@
+/**
+ * @flight-framework/devtools - Bundle Panel
+ *
+ * Visualizes bundle composition within DevTools.
+ * Shows chunk breakdown, sizes, and loading status.
+ */
+/**
+ * Information about a loaded chunk
+ */
+export interface ChunkInfo {
+    /** Chunk name/identifier */
+    name: string;
+    /** Chunk URL */
+    url: string;
+    /** Size in bytes (uncompressed) */
+    size: number;
+    /** Gzip size if available */
+    gzipSize?: number;
+    /** Loading status */
+    status: 'pending' | 'loading' | 'loaded' | 'error';
+    /** Load time in ms */
+    loadTime?: number;
+    /** Whether this is an entry chunk */
+    isEntry: boolean;
+    /** Whether this is a dynamic import */
+    isDynamic: boolean;
+    /** Parse time if available */
+    parseTime?: number;
+    /** Modules in this chunk */
+    modules?: string[];
+}
+/**
+ * Bundle metrics
+ */
+export interface BundleMetrics {
+    /** Total number of chunks */
+    totalChunks: number;
+    /** Number of loaded chunks */
+    loadedChunks: number;
+    /** Total size of all chunks */
+    totalSize: number;
+    /** Total gzip size */
+    totalGzipSize: number;
+    /** Entry chunks size */
+    entrySize: number;
+    /** Dynamic chunks size (lazy loaded) */
+    dynamicSize: number;
+    /** Total load time for all chunks */
+    totalLoadTime: number;
+    /** Largest chunk */
+    largestChunk?: ChunkInfo;
+}
+/**
+ * Register a chunk
+ */
+export declare function registerChunk(info: ChunkInfo): void;
+/**
+ * Update chunk status
+ */
+export declare function updateChunkStatus(name: string, status: ChunkInfo['status'], loadTime?: number): void;
+/**
+ * Subscribe to bundle updates
+ */
+export declare function subscribeToBundles(callback: (chunks: ChunkInfo[], metrics: BundleMetrics) => void): () => void;
+/**
+ * Get current bundle state
+ */
+export declare function getBundleState(): {
+    chunks: ChunkInfo[];
+    metrics: BundleMetrics;
+};
+/**
+ * Clear all tracked chunks
+ */
+export declare function clearBundleState(): void;
+/**
+ * Setup automatic chunk tracking via Performance API
+ */
+export declare function setupBundleTracking(): void;
+/**
+ * Generate HTML for the bundle panel
+ */
+export declare function renderBundlePanel(chunksList: ChunkInfo[], metrics: BundleMetrics): string;
+/**
+ * CSS styles for the bundle panel
+ */
+export declare const bundlePanelStyles = "\n.flight-dt-bundle-panel {\n    padding: 8px;\n}\n\n.flight-dt-bundle-summary {\n    display: flex;\n    gap: 16px;\n    padding: 8px;\n    background: rgba(255, 255, 255, 0.05);\n    border-radius: 6px;\n    margin-bottom: 12px;\n}\n\n.flight-dt-bundle-breakdown {\n    margin-bottom: 12px;\n}\n\n.flight-dt-breakdown-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 6px;\n}\n\n.flight-dt-breakdown-label {\n    width: 60px;\n    font-size: 11px;\n    color: #888;\n}\n\n.flight-dt-breakdown-bar {\n    flex: 1;\n    height: 8px;\n    background: rgba(255, 255, 255, 0.1);\n    border-radius: 4px;\n    overflow: hidden;\n}\n\n.flight-dt-breakdown-fill {\n    height: 100%;\n    border-radius: 4px;\n}\n\n.flight-dt-breakdown-fill--entry {\n    background: #3b82f6;\n}\n\n.flight-dt-breakdown-fill--dynamic {\n    background: #8b5cf6;\n}\n\n.flight-dt-breakdown-value {\n    width: 70px;\n    text-align: right;\n    font-size: 11px;\n    color: #888;\n    font-family: monospace;\n}\n\n.flight-dt-chunks-list {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n.flight-dt-chunk {\n    padding: 6px 8px;\n    background: rgba(255, 255, 255, 0.03);\n    border-radius: 4px;\n    border-left: 2px solid #666;\n}\n\n.flight-dt-chunk--entry {\n    border-left-color: #3b82f6;\n}\n\n.flight-dt-chunk--dynamic {\n    border-left-color: #8b5cf6;\n}\n\n.flight-dt-chunk-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 4px;\n}\n\n.flight-dt-chunk-name {\n    font-family: monospace;\n    font-size: 11px;\n    color: #e0e0e0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 200px;\n}\n\n.flight-dt-chunk-size {\n    font-family: monospace;\n    font-size: 11px;\n    color: #888;\n}\n\n.flight-dt-chunk-bar {\n    height: 4px;\n    background: rgba(255, 255, 255, 0.1);\n    border-radius: 2px;\n    overflow: hidden;\n}\n\n.flight-dt-chunk-bar-fill {\n    height: 100%;\n    background: #22c55e;\n    border-radius: 2px;\n}\n\n.flight-dt-chunk-time {\n    font-size: 10px;\n    color: #666;\n    font-family: monospace;\n}\n\n.flight-dt-chunks-more {\n    text-align: center;\n    font-size: 11px;\n    color: #666;\n    padding: 8px;\n}\n";
+//# sourceMappingURL=bundle-panel.d.ts.map

package/dist/bundle-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-panel.d.ts","sourceRoot":"","sources":["../src/bundle-panel.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH;;GAEG;AACH,MAAM,WAAW,SAAS;IACtB,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAC;IAEb,gBAAgB;IAChB,GAAG,EAAE,MAAM,CAAC;IAEZ,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAC;IAEb,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,qBAAqB;IACrB,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEnD,sBAAsB;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,qCAAqC;IACrC,OAAO,EAAE,OAAO,CAAC;IAEjB,uCAAuC;IACvC,SAAS,EAAE,OAAO,CAAC;IAEnB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC1B,6BAA6B;IAC7B,WAAW,EAAE,MAAM,CAAC;IAEpB,8BAA8B;IAC9B,YAAY,EAAE,MAAM,CAAC;IAErB,+BAA+B;IAC/B,SAAS,EAAE,MAAM,CAAC;IAElB,sBAAsB;IACtB,aAAa,EAAE,MAAM,CAAC;IAEtB,wBAAwB;IACxB,SAAS,EAAE,MAAM,CAAC;IAElB,wCAAwC;IACxC,WAAW,EAAE,MAAM,CAAC;IAEpB,qCAAqC;IACrC,aAAa,EAAE,MAAM,CAAC;IAEtB,oBAAoB;IACpB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC5B;AAsCD;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI,CAGnD;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAC7B,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,EAC3B,QAAQ,CAAC,EAAE,MAAM,GAClB,IAAI,CAWN;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAC9B,QAAQ,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,aAAa,KAAK,IAAI,GAChE,MAAM,IAAI,CAOZ;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI;IAC9B,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,OAAO,EAAE,aAAa,CAAC;CAC1B,CAMA;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,IAAI,CAGvC;AAMD;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,IAAI,CA8C1C;AAmCD;;GAEG;AACH,wBAAgB,iBAAiB,CAC7B,UAAU,EAAE,SAAS,EAAE,EACvB,OAAO,EAAE,aAAa,GACvB,MAAM,CAiER;AASD;;GAEG;AACH,eAAO,MAAM,iBAAiB,kzEAmI7B,CAAC"}

package/dist/bundle-panel.js

@@ -0,0 +1,371 @@
+/**
+ * @flight-framework/devtools - Bundle Panel
+ *
+ * Visualizes bundle composition within DevTools.
+ * Shows chunk breakdown, sizes, and loading status.
+ */
+// ============================================================================
+// State Management
+// ============================================================================
+const chunks = new Map();
+const subscribers = new Set();
+function notify() {
+    const chunksList = Array.from(chunks.values());
+    const metrics = calculateMetrics(chunksList);
+    for (const callback of subscribers) {
+        callback(chunksList, metrics);
+    }
+}
+function calculateMetrics(chunksList) {
+    const loaded = chunksList.filter(c => c.status === 'loaded');
+    const sorted = [...loaded].sort((a, b) => b.size - a.size);
+    return {
+        totalChunks: chunksList.length,
+        loadedChunks: loaded.length,
+        totalSize: chunksList.reduce((sum, c) => sum + c.size, 0),
+        totalGzipSize: chunksList.reduce((sum, c) => sum + (c.gzipSize || c.size * 0.3), 0),
+        entrySize: chunksList.filter(c => c.isEntry).reduce((sum, c) => sum + c.size, 0),
+        dynamicSize: chunksList.filter(c => c.isDynamic).reduce((sum, c) => sum + c.size, 0),
+        totalLoadTime: loaded.reduce((sum, c) => sum + (c.loadTime || 0), 0),
+        largestChunk: sorted[0],
+    };
+}
+// ============================================================================
+// Public API
+// ============================================================================
+/**
+ * Register a chunk
+ */
+export function registerChunk(info) {
+    chunks.set(info.name, info);
+    notify();
+}
+/**
+ * Update chunk status
+ */
+export function updateChunkStatus(name, status, loadTime) {
+    const chunk = chunks.get(name);
+    if (!chunk)
+        return;
+    chunk.status = status;
+    if (loadTime !== undefined) {
+        chunk.loadTime = loadTime;
+    }
+    chunks.set(name, chunk);
+    notify();
+}
+/**
+ * Subscribe to bundle updates
+ */
+export function subscribeToBundles(callback) {
+    subscribers.add(callback);
+    const chunksList = Array.from(chunks.values());
+    callback(chunksList, calculateMetrics(chunksList));
+    return () => subscribers.delete(callback);
+}
+/**
+ * Get current bundle state
+ */
+export function getBundleState() {
+    const chunksList = Array.from(chunks.values());
+    return {
+        chunks: chunksList,
+        metrics: calculateMetrics(chunksList),
+    };
+}
+/**
+ * Clear all tracked chunks
+ */
+export function clearBundleState() {
+    chunks.clear();
+    notify();
+}
+// ============================================================================
+// Auto-instrumentation
+// ============================================================================
+/**
+ * Setup automatic chunk tracking via Performance API
+ */
+export function setupBundleTracking() {
+    if (typeof window === 'undefined')
+        return;
+    // Track dynamically loaded scripts
+    const observer = new PerformanceObserver((list) => {
+        for (const perfEntry of list.getEntries()) {
+            const entry = perfEntry;
+            if (perfEntry.entryType === 'resource' && entry.initiatorType === 'script') {
+                const name = extractChunkName(perfEntry.name);
+                registerChunk({
+                    name,
+                    url: perfEntry.name,
+                    size: entry.transferSize || entry.encodedBodySize || 0,
+                    gzipSize: entry.encodedBodySize || undefined,
+                    status: 'loaded',
+                    loadTime: perfEntry.duration,
+                    isEntry: isEntryChunk(perfEntry.name),
+                    isDynamic: isDynamicChunk(perfEntry.name),
+                });
+            }
+        }
+    });
+    observer.observe({ entryTypes: ['resource'] });
+    // Track already-loaded scripts
+    if (performance.getEntriesByType) {
+        const resources = performance.getEntriesByType('resource');
+        for (const entry of resources) {
+            if (entry.initiatorType === 'script') {
+                const name = extractChunkName(entry.name);
+                registerChunk({
+                    name,
+                    url: entry.name,
+                    size: entry.transferSize || entry.encodedBodySize || 0,
+                    gzipSize: entry.encodedBodySize || undefined,
+                    status: 'loaded',
+                    loadTime: entry.duration,
+                    isEntry: isEntryChunk(entry.name),
+                    isDynamic: isDynamicChunk(entry.name),
+                });
+            }
+        }
+    }
+}
+function extractChunkName(url) {
+    try {
+        const pathname = new URL(url).pathname;
+        const segments = pathname.split('/');
+        return segments[segments.length - 1] || pathname;
+    }
+    catch {
+        return url;
+    }
+}
+function isEntryChunk(url) {
+    const name = extractChunkName(url).toLowerCase();
+    return name.includes('index') || name.includes('entry') || name.includes('main');
+}
+function isDynamicChunk(url) {
+    const name = extractChunkName(url).toLowerCase();
+    return name.includes('chunk') || name.includes('async') || /[a-f0-9]{8}/.test(name);
+}
+// ============================================================================
+// Panel Rendering
+// ============================================================================
+/**
+ * Format bytes for display
+ */
+function formatBytes(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+}
+/**
+ * Generate HTML for the bundle panel
+ */
+export function renderBundlePanel(chunksList, metrics) {
+    const sortedChunks = [...chunksList].sort((a, b) => b.size - a.size);
+    // Calculate bar widths relative to largest chunk
+    const maxSize = metrics.largestChunk?.size || 1;
+    return `
+        <div class="flight-dt-bundle-panel">
+            <div class="flight-dt-bundle-summary">
+                <div class="flight-dt-metric">
+                    <span class="flight-dt-metric-value">${formatBytes(metrics.totalSize)}</span>
+                    <span class="flight-dt-metric-label">Total Size</span>
+                </div>
+                <div class="flight-dt-metric">
+                    <span class="flight-dt-metric-value">${formatBytes(metrics.totalGzipSize)}</span>
+                    <span class="flight-dt-metric-label">Gzip Size</span>
+                </div>
+                <div class="flight-dt-metric">
+                    <span class="flight-dt-metric-value">${metrics.totalChunks}</span>
+                    <span class="flight-dt-metric-label">Chunks</span>
+                </div>
+                <div class="flight-dt-metric">
+                    <span class="flight-dt-metric-value">${metrics.totalLoadTime.toFixed(0)}ms</span>
+                    <span class="flight-dt-metric-label">Load Time</span>
+                </div>
+            </div>
+
+            <div class="flight-dt-bundle-breakdown">
+                <div class="flight-dt-breakdown-row">
+                    <span class="flight-dt-breakdown-label">Entry</span>
+                    <div class="flight-dt-breakdown-bar">
+                        <div class="flight-dt-breakdown-fill flight-dt-breakdown-fill--entry" 
+                             style="width: ${(metrics.entrySize / metrics.totalSize) * 100}%"></div>
+                    </div>
+                    <span class="flight-dt-breakdown-value">${formatBytes(metrics.entrySize)}</span>
+                </div>
+                <div class="flight-dt-breakdown-row">
+                    <span class="flight-dt-breakdown-label">Dynamic</span>
+                    <div class="flight-dt-breakdown-bar">
+                        <div class="flight-dt-breakdown-fill flight-dt-breakdown-fill--dynamic" 
+                             style="width: ${(metrics.dynamicSize / metrics.totalSize) * 100}%"></div>
+                    </div>
+                    <span class="flight-dt-breakdown-value">${formatBytes(metrics.dynamicSize)}</span>
+                </div>
+            </div>
+
+            <div class="flight-dt-chunks-list">
+                ${sortedChunks.slice(0, 10).map(chunk => `
+                    <div class="flight-dt-chunk ${chunk.isEntry ? 'flight-dt-chunk--entry' : ''} ${chunk.isDynamic ? 'flight-dt-chunk--dynamic' : ''}">
+                        <div class="flight-dt-chunk-header">
+                            <span class="flight-dt-chunk-name" title="${escapeHtml(chunk.url)}">${escapeHtml(chunk.name)}</span>
+                            <span class="flight-dt-chunk-size">${formatBytes(chunk.size)}</span>
+                        </div>
+                        <div class="flight-dt-chunk-bar">
+                            <div class="flight-dt-chunk-bar-fill" style="width: ${(chunk.size / maxSize) * 100}%"></div>
+                        </div>
+                        ${chunk.loadTime ? `<span class="flight-dt-chunk-time">${chunk.loadTime.toFixed(0)}ms</span>` : ''}
+                    </div>
+                `).join('')}
+                ${sortedChunks.length > 10 ? `<div class="flight-dt-chunks-more">+ ${sortedChunks.length - 10} more chunks</div>` : ''}
+            </div>
+
+            ${sortedChunks.length === 0 ? '<div class="flight-dt-empty">No chunks detected</div>' : ''}
+        </div>
+    `;
+}
+function escapeHtml(str) {
+    return str
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+}
+/**
+ * CSS styles for the bundle panel
+ */
+export const bundlePanelStyles = `
+.flight-dt-bundle-panel {
+    padding: 8px;
+}
+
+.flight-dt-bundle-summary {
+    display: flex;
+    gap: 16px;
+    padding: 8px;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 6px;
+    margin-bottom: 12px;
+}
+
+.flight-dt-bundle-breakdown {
+    margin-bottom: 12px;
+}
+
+.flight-dt-breakdown-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 6px;
+}
+
+.flight-dt-breakdown-label {
+    width: 60px;
+    font-size: 11px;
+    color: #888;
+}
+
+.flight-dt-breakdown-bar {
+    flex: 1;
+    height: 8px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.flight-dt-breakdown-fill {
+    height: 100%;
+    border-radius: 4px;
+}
+
+.flight-dt-breakdown-fill--entry {
+    background: #3b82f6;
+}
+
+.flight-dt-breakdown-fill--dynamic {
+    background: #8b5cf6;
+}
+
+.flight-dt-breakdown-value {
+    width: 70px;
+    text-align: right;
+    font-size: 11px;
+    color: #888;
+    font-family: monospace;
+}
+
+.flight-dt-chunks-list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.flight-dt-chunk {
+    padding: 6px 8px;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 4px;
+    border-left: 2px solid #666;
+}
+
+.flight-dt-chunk--entry {
+    border-left-color: #3b82f6;
+}
+
+.flight-dt-chunk--dynamic {
+    border-left-color: #8b5cf6;
+}
+
+.flight-dt-chunk-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 4px;
+}
+
+.flight-dt-chunk-name {
+    font-family: monospace;
+    font-size: 11px;
+    color: #e0e0e0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 200px;
+}
+
+.flight-dt-chunk-size {
+    font-family: monospace;
+    font-size: 11px;
+    color: #888;
+}
+
+.flight-dt-chunk-bar {
+    height: 4px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 2px;
+    overflow: hidden;
+}
+
+.flight-dt-chunk-bar-fill {
+    height: 100%;
+    background: #22c55e;
+    border-radius: 2px;
+}
+
+.flight-dt-chunk-time {
+    font-size: 10px;
+    color: #666;
+    font-family: monospace;
+}
+
+.flight-dt-chunks-more {
+    text-align: center;
+    font-size: 11px;
+    color: #666;
+    padding: 8px;
+}
+`;
+//# sourceMappingURL=bundle-panel.js.map