@ereo/dev-inspector 0.1.6

package/README.md

@@ -0,0 +1,222 @@
+# @ereo/dev-inspector
+
+Visual route inspector and DevTools for EreoJS framework development. Provides comprehensive UI for exploring routes, data pipelines, islands, and cache during development.
+
+## Installation
+
+```bash
+bun add -D @ereo/dev-inspector
+```
+
+## Quick Start
+
+### Route Inspector Only
+
+```typescript
+import { createDevInspector } from '@ereo/dev-inspector';
+import { defineConfig } from '@ereo/core';
+
+export default defineConfig({
+  plugins: [
+    createDevInspector({
+      mountPath: '/__ereo', // default
+    }),
+  ],
+});
+```
+
+Visit `http://localhost:3000/__ereo` to open the route inspector.
+
+### Full DevTools Panel
+
+```typescript
+import { createDevToolsPlugin } from '@ereo/dev-inspector';
+import { defineConfig } from '@ereo/core';
+
+export default defineConfig({
+  plugins: [
+    createDevToolsPlugin({
+      mountPath: '/__devtools',
+      dataPipeline: true,
+      routes: true,
+      islands: true,
+      cache: true,
+      position: 'bottom-right',
+    }),
+  ],
+});
+```
+
+A floating button appears on your page. Click it to open the DevTools panel.
+
+## Features
+
+### Route Inspector
+
+Visual interface for exploring routes at `/__ereo`:
+
+- Route paths with file locations
+- Render mode badges (SSR, SSG, CSR, API, RSC)
+- Feature tags (loader, action, islands count, auth)
+- Search filtering by path
+- Statistics cards (total, SSR, SSG, API counts)
+
+### DevTools Panel
+
+Comprehensive development panel with five tabs:
+
+1. **Data Pipeline** - Loader timeline visualization with waterfall detection
+2. **Routes** - Route list with filtering by render mode
+3. **Islands** - Hydration status and strategy breakdown
+4. **Cache** - Cache entries, tags, TTL, and hit rates
+5. **HMR** - Hot Module Replacement event history
+
+## API Reference
+
+### createDevInspector(config?)
+
+Creates the route inspector plugin.
+
+```typescript
+interface InspectorConfig {
+  /** Path to mount inspector (default: '/__ereo') */
+  mountPath?: string;
+  /** Enable route testing (reserved for future use) */
+  enableTesting?: boolean;
+  /** Show loader data (reserved for future use) */
+  showLoaderData?: boolean;
+}
+```
+
+**Note**: Currently only `mountPath` is functional. Other options are reserved for future implementation.
+
+### createDevToolsPlugin(config?)
+
+Creates the full DevTools panel plugin.
+
+```typescript
+interface DevToolsConfig {
+  /** Mount path for DevTools panel (default: '/__devtools') */
+  mountPath?: string;
+  /** Enable data pipeline visualization (default: true) */
+  dataPipeline?: boolean;
+  /** Enable routes visualization (default: true) */
+  routes?: boolean;
+  /** Enable islands visualization (default: true) */
+  islands?: boolean;
+  /** Enable cache visualization (default: true) */
+  cache?: boolean;
+  /** Position of overlay button (default: 'bottom-right') */
+  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+}
+```
+
+### Utility Functions
+
+```typescript
+// Generate inspector HTML from route info
+generateInspectorHTML(routes: RouteInfo[]): string
+
+// Convert framework routes to RouteInfo format
+createRouteInfo(routes: Route[]): RouteInfo[]
+
+// Format routes as CLI tree output
+formatRouteTree(routes: RouteInfo[]): string
+
+// DevTools HTML generators
+generateDevToolsPanelHTML(data: DevToolsPanelData): string
+generateDataPipelineHTML(data: DataPipelineVisualization): string
+generateRoutesTabHTML(routes: RouteVisualization[]): string
+generateIslandsTabHTML(islands: IslandVisualization[]): string
+generateCacheTabHTML(cache: CacheVisualization): string
+```
+
+## Type Exports
+
+```typescript
+export type {
+  InspectorConfig,
+  RouteInfo,
+  DevToolsConfig,
+  DataPipelineVisualization,
+  IslandVisualization,
+  CacheVisualization,
+  HMREvent,
+  LoaderTiming,
+  CacheEntry,
+} from '@ereo/dev-inspector';
+```
+
+## CLI Output Example
+
+```typescript
+import { createRouteInfo, formatRouteTree } from '@ereo/dev-inspector';
+
+const routes = router.getRoutes();
+const info = createRouteInfo(routes);
+console.log(formatRouteTree(info));
+
+// Output:
+// Route Tree:
+//
+//   ⚡ / [loader]
+//      → src/routes/index.tsx
+//   📄 /about
+//      → src/routes/about.ssg.tsx
+//   🔌 /api/posts [loader, action]
+//      → src/routes/api/posts.api.ts
+```
+
+Render mode icons:
+- ⚡ SSR (Server-Side Rendering)
+- 📄 SSG (Static Site Generation)
+- 💻 CSR (Client-Side Rendering)
+- 🔌 API
+- 🚀 RSC (React Server Components)
+- • Unknown/Custom
+
+## Production Usage
+
+Exclude DevTools from production builds:
+
+```typescript
+const plugins = [];
+
+if (process.env.NODE_ENV === 'development') {
+  const { createDevToolsPlugin } = await import('@ereo/dev-inspector');
+  plugins.push(createDevToolsPlugin());
+}
+
+const app = createApp({ plugins });
+```
+
+## API Endpoints
+
+The DevTools plugin exposes the following HTTP endpoints:
+
+| Endpoint | Method | Description |
+|----------|--------|-------------|
+| `/__devtools` | GET | DevTools panel HTML |
+| `/__devtools/api/routes` | GET | JSON array of route data |
+| `/__devtools/api/pipeline` | GET | JSON array of pipeline metrics history |
+| `/__devtools/api/hmr` | GET | JSON array of HMR events |
+| `/__devtools/api/pipeline/record` | POST | Record custom pipeline metrics |
+
+The Route Inspector exposes:
+
+| Endpoint | Method | Description |
+|----------|--------|-------------|
+| `/__ereo` | GET | Route inspector HTML |
+| `/__ereo/api/routes` | GET | JSON array of routes |
+
+## Documentation
+
+For full documentation, visit [https://ereo.dev/docs/dev-inspector](https://ereo.dev/docs/dev-inspector)
+
+## Part of EreoJS
+
+This package is part of the [EreoJS monorepo](https://github.com/anthropics/ereo-js).
+
+## License
+
+MIT

package/dist/devtools/CacheTab.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @ereo/dev-inspector - Cache Tab
+ *
+ * Visualize cache entries, tags, TTL, and hit rates.
+ */
+import type { CacheVisualization } from './types';
+/**
+ * Generate HTML for the Cache tab.
+ */
+export declare function generateCacheTabHTML(cache: CacheVisualization): string;
+/**
+ * CSS styles for the Cache tab.
+ */
+export declare const CACHE_TAB_STYLES = "\n  .cache-container {\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    background: #0f172a;\n    color: #e2e8f0;\n    padding: 1.5rem;\n    border-radius: 12px;\n  }\n\n  .cache-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 1.5rem;\n    padding-bottom: 1rem;\n    border-bottom: 1px solid #334155;\n  }\n\n  .cache-header h3 {\n    margin: 0;\n    font-size: 1.25rem;\n    font-weight: 600;\n  }\n\n  .cache-stats {\n    display: flex;\n    gap: 1.5rem;\n  }\n\n  .stat {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .stat-value {\n    font-size: 1.5rem;\n    font-weight: 700;\n    color: #3b82f6;\n  }\n\n  .stat-label {\n    font-size: 0.75rem;\n    color: #64748b;\n    text-transform: uppercase;\n  }\n\n  .hit-rate.excellent { color: #10b981; }\n  .hit-rate.good { color: #3b82f6; }\n  .hit-rate.fair { color: #f59e0b; }\n  .hit-rate.poor { color: #ef4444; }\n\n  .cache-tabs {\n    display: flex;\n    gap: 0.5rem;\n    margin-bottom: 1rem;\n  }\n\n  .cache-tab {\n    padding: 0.5rem 1rem;\n    background: #1e293b;\n    border: none;\n    border-radius: 6px;\n    color: #94a3b8;\n    font-size: 0.875rem;\n    cursor: pointer;\n    transition: all 0.2s;\n  }\n\n  .cache-tab:hover {\n    color: #f8fafc;\n  }\n\n  .cache-tab.active {\n    background: #3b82f6;\n    color: white;\n  }\n\n  .cache-table,\n  .tags-table {\n    background: #1e293b;\n    border-radius: 8px;\n    overflow: hidden;\n  }\n\n  .cache-table-header,\n  .tags-table-header {\n    display: grid;\n    grid-template-columns: 2fr 1fr 80px 80px 60px 70px;\n    gap: 1rem;\n    padding: 0.75rem 1rem;\n    background: #0f172a;\n    font-size: 0.75rem;\n    color: #64748b;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n  }\n\n  .tags-table-header {\n    grid-template-columns: 1fr 80px 80px 80px 80px 50px;\n  }\n\n  .cache-entry-row,\n  .tag-row {\n    display: grid;\n    grid-template-columns: 2fr 1fr 80px 80px 60px 70px;\n    gap: 1rem;\n    padding: 0.75rem 1rem;\n    border-bottom: 1px solid #0f172a;\n    align-items: center;\n    font-size: 0.875rem;\n  }\n\n  .tag-row {\n    grid-template-columns: 1fr 80px 80px 80px 80px 50px;\n  }\n\n  .cache-entry-row:hover,\n  .tag-row:hover {\n    background: #334155;\n  }\n\n  .entry-key {\n    font-family: 'Monaco', 'Menlo', monospace;\n    font-size: 0.75rem;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .entry-tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.25rem;\n  }\n\n  .tag {\n    padding: 0.125rem 0.375rem;\n    background: #334155;\n    border-radius: 4px;\n    font-size: 0.625rem;\n    color: #94a3b8;\n  }\n\n  .tag-badge {\n    padding: 0.25rem 0.5rem;\n    background: #3b82f6;\n    border-radius: 4px;\n    font-size: 0.75rem;\n    color: white;\n  }\n\n  .entry-ttl.expired { color: #ef4444; }\n  .entry-ttl.expiring-soon { color: #f59e0b; }\n  .entry-ttl.healthy { color: #10b981; }\n\n  .entry-actions,\n  .tag-actions {\n    display: flex;\n    gap: 0.25rem;\n  }\n\n  .entry-action,\n  .tag-action {\n    padding: 0.25rem;\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    font-size: 0.875rem;\n    border-radius: 4px;\n    transition: background 0.2s;\n  }\n\n  .entry-action:hover,\n  .tag-action:hover {\n    background: #334155;\n  }\n\n  .no-entries {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 3rem;\n    color: #64748b;\n  }\n\n  .no-entries-icon {\n    font-size: 3rem;\n    margin-bottom: 1rem;\n  }\n\n  .cache-actions {\n    display: flex;\n    gap: 0.5rem;\n    justify-content: flex-end;\n    margin-top: 1rem;\n  }\n\n  .action-btn {\n    padding: 0.5rem 1rem;\n    background: #3b82f6;\n    border: none;\n    border-radius: 6px;\n    color: white;\n    font-size: 0.875rem;\n    cursor: pointer;\n    transition: background 0.2s;\n  }\n\n  .action-btn:hover {\n    background: #2563eb;\n  }\n\n  .action-btn.danger {\n    background: #ef4444;\n  }\n\n  .action-btn.danger:hover {\n    background: #dc2626;\n  }\n";
+/**
+ * React component placeholder.
+ */
+export declare function CacheTab({ cache }: {
+    cache: CacheVisualization;
+}): null;
+//# sourceMappingURL=CacheTab.d.ts.map

package/dist/devtools/CacheTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CacheTab.d.ts","sourceRoot":"","sources":["../../src/devtools/CacheTab.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,kBAAkB,EAAc,MAAM,SAAS,CAAC;AAE9D;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,kBAAkB,GAAG,MAAM,CAiHtE;AA6HD;;GAEG;AACH,eAAO,MAAM,gBAAgB,ulIA4N5B,CAAC;AAEF;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,kBAAkB,CAAA;CAAE,QAEhE"}

package/dist/devtools/DataPipelineTab.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @ereo/dev-inspector - Data Pipeline Tab
+ *
+ * FLAGSHIP FEATURE: Visual representation of data loading with
+ * waterfall detection and optimization suggestions.
+ */
+import type { DataPipelineVisualization } from './types';
+/**
+ * Generate HTML for the Data Pipeline visualization.
+ * This is the flagship feature of EreoJS DevTools.
+ */
+export declare function generateDataPipelineHTML(data: DataPipelineVisualization): string;
+/**
+ * CSS styles for the Data Pipeline tab.
+ */
+export declare const DATA_PIPELINE_STYLES = "\n  .pipeline-container {\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    background: #0f172a;\n    color: #e2e8f0;\n    padding: 1.5rem;\n    border-radius: 12px;\n  }\n\n  .pipeline-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 1.5rem;\n    padding-bottom: 1rem;\n    border-bottom: 1px solid #334155;\n  }\n\n  .pipeline-header h3 {\n    margin: 0;\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: #f8fafc;\n  }\n\n  .route-info {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n  }\n\n  .route-path {\n    font-family: 'Monaco', 'Menlo', monospace;\n    font-size: 0.875rem;\n    color: #94a3b8;\n    background: #1e293b;\n    padding: 0.25rem 0.75rem;\n    border-radius: 4px;\n  }\n\n  .total-time {\n    font-size: 1.5rem;\n    font-weight: 700;\n    color: #3b82f6;\n  }\n\n  /* Efficiency Meter */\n  .efficiency-meter {\n    margin-bottom: 1.5rem;\n    padding: 1rem;\n    background: #1e293b;\n    border-radius: 8px;\n  }\n\n  .efficiency-label {\n    display: flex;\n    justify-content: space-between;\n    margin-bottom: 0.5rem;\n    font-size: 0.875rem;\n  }\n\n  .efficiency-label .excellent { color: #10b981; }\n  .efficiency-label .good { color: #3b82f6; }\n  .efficiency-label .fair { color: #f59e0b; }\n  .efficiency-label .poor { color: #ef4444; }\n\n  .efficiency-bar {\n    height: 8px;\n    background: #334155;\n    border-radius: 4px;\n    overflow: hidden;\n  }\n\n  .efficiency-fill {\n    height: 100%;\n    background: linear-gradient(90deg, #10b981, #3b82f6);\n    border-radius: 4px;\n    transition: width 0.3s ease;\n  }\n\n  .efficiency-hint {\n    margin-top: 0.5rem;\n    font-size: 0.75rem;\n    color: #64748b;\n  }\n\n  /* Timeline */\n  .timeline-container {\n    margin-bottom: 1.5rem;\n  }\n\n  .timeline-header {\n    display: grid;\n    grid-template-columns: 150px 1fr 100px;\n    gap: 1rem;\n    padding: 0.5rem 0;\n    font-size: 0.75rem;\n    color: #64748b;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n  }\n\n  .timeline-bar-header {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .loader-row {\n    display: grid;\n    grid-template-columns: 150px 1fr 100px;\n    gap: 1rem;\n    align-items: center;\n    padding: 0.5rem 0;\n    border-bottom: 1px solid #1e293b;\n  }\n\n  .loader-row:hover {\n    background: #1e293b;\n    margin: 0 -1rem;\n    padding-left: 1rem;\n    padding-right: 1rem;\n    border-radius: 4px;\n  }\n\n  .loader-name {\n    font-family: 'Monaco', 'Menlo', monospace;\n    font-size: 0.875rem;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .loader-bar-container {\n    position: relative;\n    height: 24px;\n    background: #1e293b;\n    border-radius: 4px;\n  }\n\n  .wait-indicator {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    height: 2px;\n    background: repeating-linear-gradient(\n      90deg,\n      transparent,\n      transparent 4px,\n      #475569 4px,\n      #475569 8px\n    );\n  }\n\n  .wait-arrow {\n    position: absolute;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    color: #64748b;\n    font-size: 10px;\n  }\n\n  .loader-bar {\n    position: absolute;\n    top: 4px;\n    height: 16px;\n    border-radius: 4px;\n    min-width: 2px;\n    transition: all 0.2s ease;\n  }\n\n  .loader-bar:hover {\n    filter: brightness(1.2);\n  }\n\n  .bar-default { background: linear-gradient(90deg, #6366f1, #8b5cf6); }\n  .bar-db { background: linear-gradient(90deg, #3b82f6, #2563eb); }\n  .bar-api { background: linear-gradient(90deg, #f59e0b, #d97706); }\n  .bar-cache { background: linear-gradient(90deg, #10b981, #059669); }\n\n  .loader-stats {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    font-size: 0.875rem;\n  }\n\n  .duration {\n    font-family: 'Monaco', 'Menlo', monospace;\n    color: #94a3b8;\n  }\n\n  .source-icon {\n    font-size: 0.875rem;\n  }\n\n  .cache-badge {\n    font-size: 0.625rem;\n    padding: 0.125rem 0.375rem;\n    background: #059669;\n    color: white;\n    border-radius: 2px;\n    font-weight: 600;\n  }\n\n  .cache-hit .loader-name {\n    color: #10b981;\n  }\n\n  /* Waterfall Warnings */\n  .waterfall-section {\n    margin-bottom: 1rem;\n  }\n\n  .waterfall-section h4 {\n    margin: 0 0 0.75rem;\n    font-size: 0.875rem;\n    color: #f59e0b;\n  }\n\n  .waterfall-warning {\n    display: flex;\n    align-items: flex-start;\n    gap: 0.75rem;\n    padding: 0.75rem;\n    background: #1e293b;\n    border-radius: 8px;\n    margin-bottom: 0.5rem;\n    border-left: 3px solid #f59e0b;\n  }\n\n  .waterfall-warning.unnecessary {\n    border-left-color: #10b981;\n  }\n\n  .waterfall-warning .icon {\n    font-size: 1rem;\n  }\n\n  .waterfall-warning .message {\n    font-size: 0.875rem;\n    line-height: 1.4;\n    color: #cbd5e1;\n  }\n\n  .all-good {\n    padding: 1rem;\n    background: rgba(16, 185, 129, 0.1);\n    border: 1px solid rgba(16, 185, 129, 0.2);\n    border-radius: 8px;\n    text-align: center;\n    color: #10b981;\n    font-size: 0.875rem;\n  }\n\n  .pipeline-footer {\n    text-align: right;\n    font-size: 0.75rem;\n    color: #475569;\n    margin-top: 1rem;\n    padding-top: 1rem;\n    border-top: 1px solid #1e293b;\n  }\n";
+/**
+ * React component for Data Pipeline visualization.
+ * Used when rendering in React context.
+ */
+export declare function DataPipelineTab({ data }: {
+    data: DataPipelineVisualization;
+}): null;
+//# sourceMappingURL=DataPipelineTab.d.ts.map

package/dist/devtools/DataPipelineTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataPipelineTab.d.ts","sourceRoot":"","sources":["../../src/devtools/DataPipelineTab.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,yBAAyB,EAAgB,MAAM,SAAS,CAAC;AAEvE;;;GAGG;AACH,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,yBAAyB,GAAG,MAAM,CAyEhF;AA8FD;;GAEG;AACH,eAAO,MAAM,oBAAoB,4vKAuQhC,CAAC;AAEF;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,yBAAyB,CAAA;CAAE,QAI5E"}

package/dist/devtools/DevToolsPanel.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @ereo/dev-inspector - DevTools Panel
+ *
+ * Main DevTools panel combining all tabs.
+ */
+import type { DataPipelineVisualization, RouteVisualization, IslandVisualization, CacheVisualization, HMREvent } from './types';
+/**
+ * DevTools panel data.
+ */
+export interface DevToolsPanelData {
+    pipeline?: DataPipelineVisualization;
+    routes: RouteVisualization[];
+    islands: IslandVisualization[];
+    cache: CacheVisualization;
+    hmrEvents: HMREvent[];
+}
+/**
+ * Generate the complete DevTools panel HTML.
+ */
+export declare function generateDevToolsPanelHTML(data: DevToolsPanelData): string;
+/**
+ * React component placeholder.
+ */
+export declare function DevToolsPanel({ data }: {
+    data: DevToolsPanelData;
+}): null;
+//# sourceMappingURL=DevToolsPanel.d.ts.map

package/dist/devtools/DevToolsPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevToolsPanel.d.ts","sourceRoot":"","sources":["../../src/devtools/DevToolsPanel.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,OAAO,KAAK,EACV,yBAAyB,EACzB,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,QAAQ,EACT,MAAM,SAAS,CAAC;AAEjB;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IACrC,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,KAAK,EAAE,kBAAkB,CAAC;IAC1B,SAAS,EAAE,QAAQ,EAAE,CAAC;CACvB;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,iBAAiB,GAAG,MAAM,CAgFzE;AAgaD;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,iBAAiB,CAAA;CAAE,QAElE"}

package/dist/devtools/IslandsTab.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @ereo/dev-inspector - Islands Tab
+ *
+ * Visualize island components with hydration status and strategies.
+ */
+import type { IslandVisualization } from './types';
+/**
+ * Generate HTML for the Islands tab.
+ */
+export declare function generateIslandsTabHTML(islands: IslandVisualization[]): string;
+/**
+ * CSS styles for the Islands tab.
+ */
+export declare const ISLANDS_TAB_STYLES = "\n  .islands-container {\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    background: #0f172a;\n    color: #e2e8f0;\n    padding: 1.5rem;\n    border-radius: 12px;\n  }\n\n  .islands-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 1.5rem;\n    padding-bottom: 1rem;\n    border-bottom: 1px solid #334155;\n  }\n\n  .islands-header h3 {\n    margin: 0;\n    font-size: 1.25rem;\n    font-weight: 600;\n  }\n\n  .islands-stats {\n    display: flex;\n    gap: 1.5rem;\n  }\n\n  .stat {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .stat-value {\n    font-size: 1.5rem;\n    font-weight: 700;\n    color: #3b82f6;\n  }\n\n  .stat-label {\n    font-size: 0.75rem;\n    color: #64748b;\n    text-transform: uppercase;\n  }\n\n  .hydration-strategies {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 1rem;\n    margin-bottom: 1.5rem;\n  }\n\n  .strategy-card {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    padding: 1rem;\n    background: #1e293b;\n    border-radius: 8px;\n  }\n\n  .strategy-icon {\n    font-size: 1.5rem;\n  }\n\n  .strategy-info {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .strategy-name {\n    font-size: 0.875rem;\n    color: #94a3b8;\n  }\n\n  .strategy-count {\n    font-size: 1.25rem;\n    font-weight: 700;\n    color: #f8fafc;\n  }\n\n  .islands-list {\n    background: #1e293b;\n    border-radius: 8px;\n    overflow: hidden;\n    margin-bottom: 1rem;\n  }\n\n  .island-row {\n    display: grid;\n    grid-template-columns: 1fr 150px 100px 70px;\n    gap: 1rem;\n    padding: 0.75rem 1rem;\n    border-bottom: 1px solid #0f172a;\n    align-items: center;\n  }\n\n  .island-row:hover {\n    background: #334155;\n  }\n\n  .island-row.pending {\n    opacity: 0.7;\n  }\n\n  .island-main {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n  }\n\n  .island-status {\n    font-size: 1rem;\n  }\n\n  .island-info {\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem;\n  }\n\n  .island-component {\n    font-family: 'Monaco', 'Menlo', monospace;\n    font-size: 0.875rem;\n    color: #f8fafc;\n  }\n\n  .island-selector {\n    font-size: 0.75rem;\n    color: #64748b;\n  }\n\n  .strategy-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.25rem;\n    padding: 0.25rem 0.5rem;\n    border-radius: 4px;\n    font-size: 0.75rem;\n    font-weight: 500;\n  }\n\n  .strategy-load { background: #3b82f6; color: white; }\n  .strategy-idle { background: #6366f1; color: white; }\n  .strategy-visible { background: #10b981; color: white; }\n  .strategy-media { background: #f59e0b; color: white; }\n  .strategy-none { background: #64748b; color: white; }\n\n  .media-query {\n    font-size: 0.625rem;\n    color: #94a3b8;\n    display: block;\n    margin-top: 0.25rem;\n  }\n\n  .island-metrics {\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem;\n    text-align: right;\n  }\n\n  .hydration-time {\n    font-family: 'Monaco', 'Menlo', monospace;\n    font-size: 0.875rem;\n    color: #10b981;\n  }\n\n  .props-size {\n    font-size: 0.75rem;\n    color: #64748b;\n  }\n\n  .island-actions {\n    display: flex;\n    gap: 0.25rem;\n  }\n\n  .island-action {\n    padding: 0.25rem;\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    font-size: 1rem;\n    border-radius: 4px;\n    transition: background 0.2s;\n  }\n\n  .island-action:hover {\n    background: #334155;\n  }\n\n  .no-islands {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 3rem;\n    color: #64748b;\n  }\n\n  .no-islands-icon {\n    font-size: 3rem;\n    margin-bottom: 1rem;\n  }\n\n  .islands-actions {\n    display: flex;\n    gap: 0.5rem;\n    justify-content: flex-end;\n  }\n\n  .action-btn {\n    padding: 0.5rem 1rem;\n    background: #3b82f6;\n    border: none;\n    border-radius: 6px;\n    color: white;\n    font-size: 0.875rem;\n    cursor: pointer;\n    transition: background 0.2s;\n  }\n\n  .action-btn:hover {\n    background: #2563eb;\n  }\n";
+/**
+ * React component placeholder.
+ */
+export declare function IslandsTab({ islands }: {
+    islands: IslandVisualization[];
+}): null;
+//# sourceMappingURL=IslandsTab.d.ts.map

package/dist/devtools/IslandsTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IslandsTab.d.ts","sourceRoot":"","sources":["../../src/devtools/IslandsTab.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,mBAAmB,EAAE,GAAG,MAAM,CAgF7E;AAmGD;;GAEG;AACH,eAAO,MAAM,kBAAkB,2lIAmO9B,CAAC;AAEF;;GAEG;AACH,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,mBAAmB,EAAE,CAAA;CAAE,QAEzE"}

package/dist/devtools/RoutesTab.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @ereo/dev-inspector - Routes Tab
+ *
+ * Visualize all routes with render modes, middleware, and configuration.
+ */
+import type { RouteVisualization } from './types';
+/**
+ * Generate HTML for the Routes tab.
+ */
+export declare function generateRoutesTabHTML(routes: RouteVisualization[]): string;
+/**
+ * CSS styles for the Routes tab.
+ */
+export declare const ROUTES_TAB_STYLES = "\n  .routes-container {\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    background: #0f172a;\n    color: #e2e8f0;\n    padding: 1.5rem;\n    border-radius: 12px;\n  }\n\n  .routes-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 1.5rem;\n    padding-bottom: 1rem;\n    border-bottom: 1px solid #334155;\n  }\n\n  .routes-header h3 {\n    margin: 0;\n    font-size: 1.25rem;\n    font-weight: 600;\n  }\n\n  .route-stats {\n    display: flex;\n    gap: 1.5rem;\n  }\n\n  .stat {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .stat-value {\n    font-size: 1.5rem;\n    font-weight: 700;\n    color: #3b82f6;\n  }\n\n  .stat-label {\n    font-size: 0.75rem;\n    color: #64748b;\n    text-transform: uppercase;\n  }\n\n  .routes-filter {\n    display: flex;\n    gap: 1rem;\n    margin-bottom: 1rem;\n  }\n\n  .search-input {\n    flex: 1;\n    padding: 0.5rem 1rem;\n    background: #1e293b;\n    border: 1px solid #334155;\n    border-radius: 6px;\n    color: #e2e8f0;\n    font-size: 0.875rem;\n  }\n\n  .search-input:focus {\n    outline: none;\n    border-color: #3b82f6;\n  }\n\n  .filter-buttons {\n    display: flex;\n    gap: 0.5rem;\n  }\n\n  .filter-btn {\n    padding: 0.5rem 1rem;\n    background: #1e293b;\n    border: 1px solid #334155;\n    border-radius: 6px;\n    color: #94a3b8;\n    font-size: 0.75rem;\n    cursor: pointer;\n    transition: all 0.2s;\n  }\n\n  .filter-btn:hover {\n    border-color: #3b82f6;\n  }\n\n  .filter-btn.active {\n    background: #3b82f6;\n    border-color: #3b82f6;\n    color: white;\n  }\n\n  .routes-table {\n    background: #1e293b;\n    border-radius: 8px;\n    overflow: hidden;\n  }\n\n  .routes-table-header {\n    display: grid;\n    grid-template-columns: 2fr 100px 1fr 80px;\n    gap: 1rem;\n    padding: 0.75rem 1rem;\n    background: #0f172a;\n    font-size: 0.75rem;\n    color: #64748b;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n  }\n\n  .route-row {\n    display: grid;\n    grid-template-columns: 2fr 100px 1fr 80px;\n    gap: 1rem;\n    padding: 0.75rem 1rem;\n    border-bottom: 1px solid #0f172a;\n    transition: background 0.2s;\n  }\n\n  .route-row:hover {\n    background: #334155;\n  }\n\n  .route-path-cell {\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem;\n  }\n\n  .route-path {\n    font-family: 'Monaco', 'Menlo', monospace;\n    font-size: 0.875rem;\n    color: #f8fafc;\n  }\n\n  .route-file {\n    font-size: 0.75rem;\n    color: #64748b;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .mode-badge {\n    display: inline-block;\n    padding: 0.25rem 0.5rem;\n    border-radius: 4px;\n    font-size: 0.625rem;\n    font-weight: 600;\n  }\n\n  .mode-ssr { background: #3b82f6; color: white; }\n  .mode-ssg { background: #10b981; color: white; }\n  .mode-csr { background: #f59e0b; color: white; }\n  .mode-api { background: #8b5cf6; color: white; }\n  .mode-rsc { background: #ec4899; color: white; }\n\n  .route-features-cell {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.25rem;\n  }\n\n  .feature-tag {\n    padding: 0.125rem 0.375rem;\n    background: #334155;\n    border-radius: 4px;\n    font-size: 0.625rem;\n    color: #94a3b8;\n  }\n\n  .route-timing-cell {\n    text-align: right;\n  }\n\n  .timing {\n    font-family: 'Monaco', 'Menlo', monospace;\n    font-size: 0.875rem;\n    color: #10b981;\n  }\n\n  .timing-na {\n    color: #475569;\n  }\n";
+/**
+ * React component placeholder.
+ */
+export declare function RoutesTab({ routes }: {
+    routes: RouteVisualization[];
+}): null;
+//# sourceMappingURL=RoutesTab.d.ts.map

package/dist/devtools/RoutesTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoutesTab.d.ts","sourceRoot":"","sources":["../../src/devtools/RoutesTab.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,kBAAkB,EAAE,GAAG,MAAM,CAyF1E;AAoED;;GAEG;AACH,eAAO,MAAM,iBAAiB,s/GA0L7B,CAAC;AAEF;;GAEG;AACH,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,kBAAkB,EAAE,CAAA;CAAE,QAErE"}

package/dist/devtools/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @ereo/dev-inspector - DevTools
+ *
+ * Browser DevTools panel for EreoJS framework.
+ * Provides visibility into routes, data loading, islands, and cache.
+ */
+export { DataPipelineTab, generateDataPipelineHTML } from './DataPipelineTab';
+export { RoutesTab, generateRoutesTabHTML } from './RoutesTab';
+export { IslandsTab, generateIslandsTabHTML } from './IslandsTab';
+export { CacheTab, generateCacheTabHTML } from './CacheTab';
+export { DevToolsPanel, generateDevToolsPanelHTML } from './DevToolsPanel';
+export { createDevToolsPlugin } from './plugin';
+export type { DevToolsConfig, DataPipelineVisualization, IslandVisualization, CacheVisualization, } from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/devtools/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,eAAe,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAC;AAC3E,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAEhD,YAAY,EACV,cAAc,EACd,yBAAyB,EACzB,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,SAAS,CAAC"}

package/dist/devtools/plugin.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @ereo/dev-inspector - DevTools Plugin
+ *
+ * Plugin that adds DevTools to the EreoJS dev server.
+ */
+import type { Plugin } from '@ereo/core';
+import type { DevToolsConfig, DataPipelineVisualization, RouteVisualization, HMREvent } from './types';
+/**
+ * DevTools state.
+ */
+interface DevToolsState {
+    routes: RouteVisualization[];
+    pipelineHistory: DataPipelineVisualization[];
+    hmrEvents: HMREvent[];
+}
+/**
+ * Create the DevTools plugin.
+ *
+ * @example
+ * import { createDevToolsPlugin } from '@ereo/dev-inspector';
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     createDevToolsPlugin({
+ *       dataPipeline: true,
+ *       islands: true,
+ *       cache: true,
+ *     }),
+ *   ],
+ * });
+ */
+export declare function createDevToolsPlugin(config?: DevToolsConfig): Plugin;
+/**
+ * Record HMR event (called by HMR system).
+ */
+export declare function recordHMREvent(state: DevToolsState, event: Omit<HMREvent, 'timestamp'>): void;
+export {};
+//# sourceMappingURL=plugin.d.ts.map

package/dist/devtools/plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../src/devtools/plugin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAS,MAAM,YAAY,CAAC;AAEhD,OAAO,KAAK,EACV,cAAc,EACd,yBAAyB,EACzB,kBAAkB,EAGlB,QAAQ,EACT,MAAM,SAAS,CAAC;AAEjB;;GAEG;AACH,UAAU,aAAa;IACrB,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,eAAe,EAAE,yBAAyB,EAAE,CAAC;IAC7C,SAAS,EAAE,QAAQ,EAAE,CAAC;CACvB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,GAAE,cAAmB,GAAG,MAAM,CAkKxE;AAyJD;;GAEG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,aAAa,EACpB,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC,GACjC,IAAI,CAUN"}

package/dist/devtools/types.d.ts

@@ -0,0 +1,157 @@
+/**
+ * @ereo/dev-inspector - DevTools Types
+ */
+import type { WaterfallInfo } from '@ereo/data';
+/**
+ * DevTools configuration.
+ */
+export interface DevToolsConfig {
+    /** Mount path for DevTools panel (default: /__devtools) */
+    mountPath?: string;
+    /** Enable data pipeline visualization */
+    dataPipeline?: boolean;
+    /** Enable routes visualization */
+    routes?: boolean;
+    /** Enable islands visualization */
+    islands?: boolean;
+    /** Enable cache visualization */
+    cache?: boolean;
+    /** Position of overlay (default: bottom-right) */
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+}
+/**
+ * Data pipeline visualization data.
+ */
+export interface DataPipelineVisualization {
+    /** Route path */
+    route: string;
+    /** Total execution time */
+    totalTime: number;
+    /** Individual loader timings */
+    loaders: LoaderTiming[];
+    /** Parallel efficiency score (0-1) */
+    efficiency: number;
+    /** Detected waterfalls */
+    waterfalls: WaterfallInfo[];
+    /** Timestamp of request */
+    timestamp: number;
+}
+/**
+ * Individual loader timing data.
+ */
+export interface LoaderTiming {
+    /** Loader key/name */
+    key: string;
+    /** Start time relative to request start (ms) */
+    start: number;
+    /** End time relative to request start (ms) */
+    end: number;
+    /** Duration (ms) */
+    duration: number;
+    /** Whether result came from cache */
+    cacheHit: boolean;
+    /** Data source type */
+    source: 'db' | 'api' | 'cache' | 'compute' | 'unknown';
+    /** Loaders this was waiting for */
+    waitingFor: string[];
+    /** Data size in bytes (if available) */
+    size?: number;
+}
+/**
+ * Island visualization data.
+ */
+export interface IslandVisualization {
+    /** Island ID */
+    id: string;
+    /** Component name */
+    component: string;
+    /** Hydration strategy */
+    strategy: 'load' | 'idle' | 'visible' | 'media' | 'none';
+    /** Media query (if strategy is 'media') */
+    mediaQuery?: string;
+    /** Whether island is currently hydrated */
+    hydrated: boolean;
+    /** Time to hydration (ms) */
+    hydrationTime?: number;
+    /** Props size in bytes */
+    propsSize: number;
+    /** DOM element selector */
+    selector: string;
+}
+/**
+ * Cache visualization data.
+ */
+export interface CacheVisualization {
+    /** Cache entries */
+    entries: CacheEntry[];
+    /** Total cache size */
+    totalSize: number;
+    /** Hit rate (0-1) */
+    hitRate: number;
+    /** Cache stats by tag */
+    tagStats: Map<string, {
+        count: number;
+        hits: number;
+        misses: number;
+    }>;
+}
+/**
+ * Individual cache entry.
+ */
+export interface CacheEntry {
+    /** Cache key */
+    key: string;
+    /** Associated tags */
+    tags: string[];
+    /** Entry size in bytes */
+    size: number;
+    /** Time to live remaining (ms) */
+    ttl: number;
+    /** Created timestamp */
+    created: number;
+    /** Last accessed timestamp */
+    lastAccessed: number;
+    /** Access count */
+    accessCount: number;
+}
+/**
+ * Route visualization data.
+ */
+export interface RouteVisualization {
+    /** Route path */
+    path: string;
+    /** Route file */
+    file: string;
+    /** Render mode */
+    renderMode: 'ssr' | 'ssg' | 'csr' | 'api' | 'rsc';
+    /** Has loader */
+    hasLoader: boolean;
+    /** Has action */
+    hasAction: boolean;
+    /** Middleware chain */
+    middleware: string[];
+    /** Island count */
+    islandCount: number;
+    /** Cache tags */
+    cacheTags: string[];
+    /** Auth required */
+    authRequired: boolean;
+    /** Last request timing */
+    lastTiming?: number;
+}
+/**
+ * HMR event for DevTools.
+ */
+export interface HMREvent {
+    /** Event type */
+    type: 'full-reload' | 'css-update' | 'island-update' | 'loader-update' | 'component-update';
+    /** File path */
+    path: string;
+    /** Reason for update type */
+    reason?: string;
+    /** Timestamp */
+    timestamp: number;
+    /** Duration (ms) */
+    duration?: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/devtools/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/devtools/types.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @ereo/dev-inspector - Main exports
+ */
+export { createDevInspector, generateInspectorHTML, createRouteInfo, formatRouteTree, } from './inspector';
+export type { InspectorConfig, RouteInfo, } from './inspector';
+export { DataPipelineTab, generateDataPipelineHTML, RoutesTab, generateRoutesTabHTML, IslandsTab, generateIslandsTabHTML, CacheTab, generateCacheTabHTML, DevToolsPanel, generateDevToolsPanelHTML, createDevToolsPlugin, } from './devtools';
+export type { DevToolsConfig, DataPipelineVisualization, IslandVisualization, CacheVisualization, } from './devtools';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,eAAe,EACf,eAAe,GAChB,MAAM,aAAa,CAAC;AAErB,YAAY,EACV,eAAe,EACf,SAAS,GACV,MAAM,aAAa,CAAC;AAGrB,OAAO,EACL,eAAe,EACf,wBAAwB,EACxB,SAAS,EACT,qBAAqB,EACrB,UAAU,EACV,sBAAsB,EACtB,QAAQ,EACR,oBAAoB,EACpB,aAAa,EACb,yBAAyB,EACzB,oBAAoB,GACrB,MAAM,YAAY,CAAC;AAEpB,YAAY,EACV,cAAc,EACd,yBAAyB,EACzB,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,YAAY,CAAC"}