@liteforge/devtools 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 SchildW3rk
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,210 @@
+# @liteforge/devtools
+
+Debug panel for LiteForge applications with signal inspection, store time-travel, and performance monitoring.
+
+## Installation
+
+```bash
+npm install @liteforge/devtools @liteforge/core
+```
+
+Peer dependency: `@liteforge/core >= 0.1.0`
+
+## Setup
+
+```ts
+import { createApp } from '@liteforge/runtime'
+import { devtoolsPlugin } from '@liteforge/devtools'
+
+createApp({
+  plugins: [
+    devtoolsPlugin({
+      shortcut: 'ctrl+shift+d',  // Toggle shortcut
+      position: 'bottom',         // 'bottom' | 'right' | 'left'
+      height: 300,                // Panel height in pixels
+      defaultTab: 'signals'       // Initial tab
+    })
+  ]
+}).mount(App)
+```
+
+## Features
+
+The devtools panel has five tabs:
+
+### Signals Tab
+
+- View all active signals and their current values
+- See update counts for each signal
+- Track dependency relationships
+- Filter by signal name
+
+### Stores Tab
+
+- Inspect all registered stores
+- View current state tree
+- **Time-travel debugging** — restore any previous state
+- Track state changes over time
+
+### Router Tab
+
+- View navigation history
+- See guard execution results
+- Monitor route timing
+- Inspect current route params and query
+
+### Components Tab
+
+- Component tree visualization
+- Mount/unmount tracking
+- Component instance counts
+- Lifecycle timing
+
+### Performance Tab
+
+- Signal updates per second
+- Effect executions
+- Component mount/unmount rate
+- Memory usage indicators
+
+## API
+
+### devtoolsPlugin
+
+Creates the devtools plugin for `createApp`.
+
+```ts
+import { devtoolsPlugin } from '@liteforge/devtools'
+
+devtoolsPlugin({
+  // Keyboard shortcut to toggle panel
+  shortcut: 'ctrl+shift+d',
+  
+  // Panel position
+  position: 'bottom',  // 'bottom' | 'right' | 'left'
+  
+  // Panel size
+  height: 300,         // For bottom position
+  width: 400,          // For left/right position
+  
+  // Initial tab
+  defaultTab: 'signals',
+  
+  // Enable in production (default: false)
+  enableInProduction: false,
+  
+  // Buffer size for events
+  bufferSize: 1000
+})
+```
+
+### createDevTools
+
+For standalone usage without `createApp`:
+
+```ts
+import { createDevTools } from '@liteforge/devtools'
+import { storeRegistry } from '@liteforge/store'
+
+const devtools = createDevTools({
+  stores: storeRegistry,
+  shortcut: 'ctrl+shift+d'
+})
+
+// Manual control
+devtools.show()
+devtools.hide()
+devtools.toggle()
+devtools.destroy()
+```
+
+## Keyboard Shortcuts
+
+| Shortcut | Action |
+|----------|--------|
+| `Ctrl+Shift+D` | Toggle panel (default) |
+| `Escape` | Close panel |
+| `1-5` | Switch tabs (when panel focused) |
+
+## Time-Travel Debugging
+
+The Stores tab supports time-travel debugging:
+
+1. Make changes to store state
+2. Open the Stores tab
+3. See state history with timestamps
+4. Click any history entry to restore that state
+
+```ts
+// State changes are automatically recorded
+userStore.actions.login(user)
+userStore.actions.updateProfile(profile)
+
+// In devtools, you can:
+// - See each state change
+// - Click to restore any previous state
+// - Continue from that point
+```
+
+## Conditional Loading
+
+Only load devtools in development:
+
+```ts
+import { createApp } from '@liteforge/runtime'
+
+const plugins = []
+
+if (import.meta.env.DEV) {
+  const { devtoolsPlugin } = await import('@liteforge/devtools')
+  plugins.push(devtoolsPlugin())
+}
+
+createApp({ plugins }).mount(App)
+```
+
+## Custom Panels
+
+Extend devtools with custom panels (advanced):
+
+```ts
+import { createDevTools } from '@liteforge/devtools'
+
+const devtools = createDevTools({
+  stores: storeRegistry,
+  customPanels: [
+    {
+      id: 'network',
+      label: 'Network',
+      render: () => {
+        // Return DOM element
+        const div = document.createElement('div')
+        div.innerHTML = '<h3>Network Requests</h3>'
+        return div
+      }
+    }
+  ]
+})
+```
+
+## Types
+
+```ts
+import type {
+  DevToolsConfig,
+  DevToolsInstance,
+  PanelPosition,
+  TabId,
+  PanelState,
+  SignalInfo,
+  StoreInfo,
+  StoreHistoryEntry,
+  NavigationInfo,
+  ComponentInfo,
+  PerformanceCounters
+} from '@liteforge/devtools'
+```
+
+## License
+
+MIT

package/dist/buffer.d.ts

@@ -0,0 +1,16 @@
+/**
+ * LiteForge DevTools Event Buffer
+ *
+ * A circular buffer (ring buffer) for storing debug events.
+ * IMPORTANT: This module must NOT use LiteForge signals to avoid
+ * infinite loops (buffer receives signal events → creates more signals).
+ */
+import type { EventBuffer } from './types.js';
+/**
+ * Create a circular event buffer with a fixed maximum size.
+ *
+ * @param maxSize - Maximum number of events to store
+ * @returns An event buffer instance
+ */
+export declare function createEventBuffer(maxSize: number): EventBuffer;
+//# sourceMappingURL=buffer.d.ts.map

package/dist/buffer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buffer.d.ts","sourceRoot":"","sources":["../src/buffer.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,WAAW,EAAe,MAAM,YAAY,CAAC;AAM3D;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,WAAW,CAyG9D"}

package/dist/buffer.js

@@ -0,0 +1,114 @@
+/**
+ * LiteForge DevTools Event Buffer
+ *
+ * A circular buffer (ring buffer) for storing debug events.
+ * IMPORTANT: This module must NOT use LiteForge signals to avoid
+ * infinite loops (buffer receives signal events → creates more signals).
+ */
+// ============================================================================
+// Circular Buffer Implementation
+// ============================================================================
+/**
+ * Create a circular event buffer with a fixed maximum size.
+ *
+ * @param maxSize - Maximum number of events to store
+ * @returns An event buffer instance
+ */
+export function createEventBuffer(maxSize) {
+    // Internal storage
+    const events = [];
+    let nextId = 0;
+    let startIndex = 0;
+    let count = 0;
+    // Subscriber callbacks (no signals to avoid debug event loops)
+    const subscribers = new Set();
+    /**
+     * Add an event to the buffer.
+     * If the buffer is full, the oldest event is overwritten.
+     */
+    function push(event) {
+        const storedEvent = {
+            id: nextId++,
+            event,
+        };
+        if (count < maxSize) {
+            // Buffer not full yet, just append
+            events.push(storedEvent);
+            count++;
+        }
+        else {
+            // Buffer is full, overwrite oldest
+            const insertIndex = (startIndex + count) % maxSize;
+            events[insertIndex] = storedEvent;
+            startIndex = (startIndex + 1) % maxSize;
+        }
+        // Notify subscribers
+        for (const callback of subscribers) {
+            try {
+                callback(storedEvent);
+            }
+            catch (error) {
+                console.error('[DevTools] Error in event subscriber:', error);
+            }
+        }
+    }
+    /**
+     * Get all stored events in chronological order (oldest first).
+     */
+    function getAll() {
+        if (count < maxSize) {
+            // Buffer not full yet, events are in order
+            return [...events];
+        }
+        // Buffer is full, need to reorder from ring buffer
+        const result = [];
+        for (let i = 0; i < count; i++) {
+            const index = (startIndex + i) % maxSize;
+            const event = events[index];
+            if (event) {
+                result.push(event);
+            }
+        }
+        return result;
+    }
+    /**
+     * Get the last N events (newest first).
+     */
+    function getLast(n) {
+        const all = getAll();
+        return all.slice(-n).reverse();
+    }
+    /**
+     * Clear all events from the buffer.
+     */
+    function clear() {
+        events.length = 0;
+        startIndex = 0;
+        count = 0;
+    }
+    /**
+     * Get the current number of events in the buffer.
+     */
+    function size() {
+        return count;
+    }
+    /**
+     * Subscribe to new events.
+     * Returns an unsubscribe function.
+     */
+    function subscribe(callback) {
+        subscribers.add(callback);
+        return () => {
+            subscribers.delete(callback);
+        };
+    }
+    return {
+        push,
+        getAll,
+        getLast,
+        clear,
+        size,
+        subscribe,
+    };
+}
+//# sourceMappingURL=buffer.js.map

package/dist/buffer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buffer.js","sourceRoot":"","sources":["../src/buffer.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAKH,+EAA+E;AAC/E,iCAAiC;AACjC,+EAA+E;AAE/E;;;;;GAKG;AACH,MAAM,UAAU,iBAAiB,CAAC,OAAe;IAC/C,mBAAmB;IACnB,MAAM,MAAM,GAAkB,EAAE,CAAC;IACjC,IAAI,MAAM,GAAG,CAAC,CAAC;IACf,IAAI,UAAU,GAAG,CAAC,CAAC;IACnB,IAAI,KAAK,GAAG,CAAC,CAAC;IAEd,+DAA+D;IAC/D,MAAM,WAAW,GAAG,IAAI,GAAG,EAAgC,CAAC;IAE5D;;;OAGG;IACH,SAAS,IAAI,CAAC,KAAiB;QAC7B,MAAM,WAAW,GAAgB;YAC/B,EAAE,EAAE,MAAM,EAAE;YACZ,KAAK;SACN,CAAC;QAEF,IAAI,KAAK,GAAG,OAAO,EAAE,CAAC;YACpB,mCAAmC;YACnC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACzB,KAAK,EAAE,CAAC;QACV,CAAC;aAAM,CAAC;YACN,mCAAmC;YACnC,MAAM,WAAW,GAAG,CAAC,UAAU,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC;YACnD,MAAM,CAAC,WAAW,CAAC,GAAG,WAAW,CAAC;YAClC,UAAU,GAAG,CAAC,UAAU,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC;QAC1C,CAAC;QAED,qBAAqB;QACrB,KAAK,MAAM,QAAQ,IAAI,WAAW,EAAE,CAAC;YACnC,IAAI,CAAC;gBACH,QAAQ,CAAC,WAAW,CAAC,CAAC;YACxB,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,OAAO,CAAC,KAAK,CAAC,uCAAuC,EAAE,KAAK,CAAC,CAAC;YAChE,CAAC;QACH,CAAC;IACH,CAAC;IAED;;OAEG;IACH,SAAS,MAAM;QACb,IAAI,KAAK,GAAG,OAAO,EAAE,CAAC;YACpB,2CAA2C;YAC3C,OAAO,CAAC,GAAG,MAAM,CAAC,CAAC;QACrB,CAAC;QAED,mDAAmD;QACnD,MAAM,MAAM,GAAkB,EAAE,CAAC;QACjC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;YAC/B,MAAM,KAAK,GAAG,CAAC,UAAU,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC;YACzC,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;YAC5B,IAAI,KAAK,EAAE,CAAC;gBACV,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACrB,CAAC;QACH,CAAC;QACD,OAAO,MAAM,CAAC;IAChB,CAAC;IAED;;OAEG;IACH,SAAS,OAAO,CAAC,CAAS;QACxB,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;QACrB,OAAO,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC;IACjC,CAAC;IAED;;OAEG;IACH,SAAS,KAAK;QACZ,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;QAClB,UAAU,GAAG,CAAC,CAAC;QACf,KAAK,GAAG,CAAC,CAAC;IACZ,CAAC;IAED;;OAEG;IACH,SAAS,IAAI;QACX,OAAO,KAAK,CAAC;IACf,CAAC;IAED;;;OAGG;IACH,SAAS,SAAS,CAAC,QAAsC;QACvD,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAC1B,OAAO,GAAG,EAAE;YACV,WAAW,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAC/B,CAAC,CAAC;IACJ,CAAC;IAED,OAAO;QACL,IAAI;QACJ,MAAM;QACN,OAAO;QACP,KAAK;QACL,IAAI;QACJ,SAAS;KACV,CAAC;AACJ,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @liteforge/devtools
+ *
+ * DevTools panel for debugging LiteForge applications.
+ */
+export { devtoolsPlugin, createDevTools } from './plugin.js';
+export type { DevToolsStore, DevToolsStoreMap, StandaloneDevToolsConfig, } from './plugin.js';
+export type { DevToolsConfig, ResolvedDevToolsConfig, DevToolsInstance, PanelPosition, TabId, PanelState, EventBuffer, StoredEvent, SignalInfo, StoreInfo, StoreHistoryEntry, NavigationInfo, ComponentInfo, PerformanceCounters, } from './types.js';
+export { createEventBuffer } from './buffer.js';
+//# 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;;;;GAIG;AAGH,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7D,YAAY,EACV,aAAa,EACb,gBAAgB,EAChB,wBAAwB,GACzB,MAAM,aAAa,CAAC;AAGrB,YAAY,EACV,cAAc,EACd,sBAAsB,EACtB,gBAAgB,EAChB,aAAa,EACb,KAAK,EACL,UAAU,EACV,WAAW,EACX,WAAW,EACX,UAAU,EACV,SAAS,EACT,iBAAiB,EACjB,cAAc,EACd,aAAa,EACb,mBAAmB,GACpB,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -0,0 +1,10 @@
+/**
+ * @liteforge/devtools
+ *
+ * DevTools panel for debugging LiteForge applications.
+ */
+// Plugin
+export { devtoolsPlugin, createDevTools } from './plugin.js';
+// Buffer (for advanced usage)
+export { createEventBuffer } from './buffer.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,SAAS;AACT,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AA2B7D,8BAA8B;AAC9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC"}

package/dist/internals.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Internal reactive primitives for DevTools.
+ *
+ * These wrappers automatically set __internal: true to prevent
+ * debug event emission, avoiding infinite loops where DevTools
+ * would receive events from its own signals/effects/computeds.
+ */
+import type { Signal, ReadonlySignal, SignalOptions, EffectFn, EffectOptions, DisposeFn, ComputeFn, ComputedOptions } from '@liteforge/core';
+/**
+ * Create an internal signal that doesn't emit debug events.
+ */
+export declare function signal<T>(initialValue: T, options?: Omit<SignalOptions, '__internal'>): Signal<T>;
+/**
+ * Create an internal effect that doesn't emit debug events.
+ */
+export declare function effect(fn: EffectFn, options?: Omit<EffectOptions, '__internal'>): DisposeFn;
+/**
+ * Create an internal computed that doesn't emit debug events.
+ */
+export declare function computed<T>(fn: ComputeFn<T>, options?: Omit<ComputedOptions, '__internal'>): ReadonlySignal<T>;
+//# sourceMappingURL=internals.d.ts.map

package/dist/internals.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internals.d.ts","sourceRoot":"","sources":["../src/internals.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAOH,OAAO,KAAK,EACV,MAAM,EACN,cAAc,EACd,aAAa,EACb,QAAQ,EACR,aAAa,EACb,SAAS,EACT,SAAS,EACT,eAAe,EAChB,MAAM,iBAAiB,CAAC;AAEzB;;GAEG;AACH,wBAAgB,MAAM,CAAC,CAAC,EACtB,YAAY,EAAE,CAAC,EACf,OAAO,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,YAAY,CAAC,GAC1C,MAAM,CAAC,CAAC,CAAC,CAEX;AAED;;GAEG;AACH,wBAAgB,MAAM,CACpB,EAAE,EAAE,QAAQ,EACZ,OAAO,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,YAAY,CAAC,GAC1C,SAAS,CAEX;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EACxB,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,EAChB,OAAO,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,GAC5C,cAAc,CAAC,CAAC,CAAC,CAEnB"}

package/dist/internals.js

@@ -0,0 +1,27 @@
+/**
+ * Internal reactive primitives for DevTools.
+ *
+ * These wrappers automatically set __internal: true to prevent
+ * debug event emission, avoiding infinite loops where DevTools
+ * would receive events from its own signals/effects/computeds.
+ */
+import { signal as coreSignal, effect as coreEffect, computed as coreComputed, } from '@liteforge/core';
+/**
+ * Create an internal signal that doesn't emit debug events.
+ */
+export function signal(initialValue, options) {
+    return coreSignal(initialValue, { ...options, __internal: true });
+}
+/**
+ * Create an internal effect that doesn't emit debug events.
+ */
+export function effect(fn, options) {
+    return coreEffect(fn, { ...options, __internal: true });
+}
+/**
+ * Create an internal computed that doesn't emit debug events.
+ */
+export function computed(fn, options) {
+    return coreComputed(fn, { ...options, __internal: true });
+}
+//# sourceMappingURL=internals.js.map

package/dist/internals.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internals.js","sourceRoot":"","sources":["../src/internals.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EACL,MAAM,IAAI,UAAU,EACpB,MAAM,IAAI,UAAU,EACpB,QAAQ,IAAI,YAAY,GACzB,MAAM,iBAAiB,CAAC;AAYzB;;GAEG;AACH,MAAM,UAAU,MAAM,CACpB,YAAe,EACf,OAA2C;IAE3C,OAAO,UAAU,CAAC,YAAY,EAAE,EAAE,GAAG,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;AACpE,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,MAAM,CACpB,EAAY,EACZ,OAA2C;IAE3C,OAAO,UAAU,CAAC,EAAE,EAAE,EAAE,GAAG,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;AAC1D,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,QAAQ,CACtB,EAAgB,EAChB,OAA6C;IAE7C,OAAO,YAAY,CAAC,EAAE,EAAE,EAAE,GAAG,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;AAC5D,CAAC"}

package/dist/panel/Panel.d.ts

@@ -0,0 +1,14 @@
+/**
+ * LiteForge DevTools Panel
+ *
+ * Main panel container with header, tabs, and content area.
+ * Built using LiteForge signals and direct DOM manipulation.
+ */
+import type { Signal } from '@liteforge/core';
+import type { ResolvedDevToolsConfig, PanelState, EventBuffer } from '../types.js';
+import type { DevToolsStoreMap } from '../plugin.js';
+/**
+ * Create the main DevTools panel element.
+ */
+export declare function createPanel(config: ResolvedDevToolsConfig, state: Signal<PanelState>, buffer: EventBuffer, stores: DevToolsStoreMap): HTMLElement;
+//# sourceMappingURL=Panel.d.ts.map

package/dist/panel/Panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../src/panel/Panel.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAW9C,OAAO,KAAK,EACV,sBAAsB,EACtB,UAAU,EAEV,WAAW,EACZ,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AA6BrD;;GAEG;AACH,wBAAgB,WAAW,CACzB,MAAM,EAAE,sBAAsB,EAC9B,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,EACzB,MAAM,EAAE,WAAW,EACnB,MAAM,EAAE,gBAAgB,GACvB,WAAW,CA0Eb"}

package/dist/panel/Panel.js

@@ -0,0 +1,191 @@
+/**
+ * LiteForge DevTools Panel
+ *
+ * Main panel container with header, tabs, and content area.
+ * Built using LiteForge signals and direct DOM manipulation.
+ */
+import { effect } from '../internals.js';
+import { getPanelStyles, headerStyles, tabBarStyles, getTabStyles, controlsStyles, buttonStyles, contentStyles, } from '../styles.js';
+import { createSignalInspector } from '../tabs/SignalInspector.js';
+import { createStoreExplorer } from '../tabs/StoreExplorer.js';
+import { createRouterInspector } from '../tabs/RouterInspector.js';
+import { createComponentTree } from '../tabs/ComponentTree.js';
+import { createPerformanceTab } from '../tabs/Performance.js';
+const TABS = [
+    { id: 'signals', label: 'Signals', icon: 'S' },
+    { id: 'stores', label: 'Stores', icon: 'St' },
+    { id: 'router', label: 'Router', icon: 'R' },
+    { id: 'components', label: 'Comps', icon: 'C' },
+    { id: 'performance', label: 'Perf', icon: 'P' },
+];
+// ============================================================================
+// Panel Creation
+// ============================================================================
+/**
+ * Create the main DevTools panel element.
+ */
+export function createPanel(config, state, buffer, stores) {
+    // Create panel container
+    const panel = document.createElement('div');
+    panel.id = 'liteforge-devtools';
+    panel.setAttribute('style', getPanelStyles(config.position, config.width, config.height, false));
+    // Create header
+    const header = createHeader(state, config);
+    panel.appendChild(header);
+    // Create content area
+    const content = document.createElement('div');
+    content.setAttribute('style', contentStyles);
+    panel.appendChild(content);
+    // Track tab content containers and their dispose functions
+    const tabContents = new Map();
+    const tabDisposers = new Map();
+    // Track last active tab for cleanup
+    let lastActiveTab = null;
+    // Create tab content lazily (only when first viewed)
+    function ensureTabContent(tabId) {
+        if (tabContents.has(tabId))
+            return;
+        const tabResult = createTabContent(tabId, buffer, state, stores);
+        tabResult.element.style.display = 'none';
+        content.appendChild(tabResult.element);
+        tabContents.set(tabId, tabResult.element);
+        tabDisposers.set(tabId, tabResult.dispose);
+    }
+    // Effect to switch tabs and update styles
+    effect(() => {
+        const currentState = state();
+        // Update panel styles
+        panel.setAttribute('style', getPanelStyles(config.position, currentState.width, currentState.height, currentState.isOpen));
+        const activeTab = currentState.activeTab;
+        // Dispose previous tab's effects when switching away
+        if (lastActiveTab !== null && lastActiveTab !== activeTab) {
+            const disposer = tabDisposers.get(lastActiveTab);
+            if (disposer) {
+                disposer();
+                // Remove the disposed tab so it will be recreated fresh next time
+                const oldContent = tabContents.get(lastActiveTab);
+                if (oldContent && oldContent.parentNode) {
+                    oldContent.parentNode.removeChild(oldContent);
+                }
+                tabContents.delete(lastActiveTab);
+                tabDisposers.delete(lastActiveTab);
+            }
+        }
+        // Ensure active tab content exists
+        ensureTabContent(activeTab);
+        // Show/hide tab contents
+        for (const [tabId, tabContent] of tabContents) {
+            tabContent.style.display = tabId === activeTab ? 'flex' : 'none';
+        }
+        lastActiveTab = activeTab;
+    });
+    return panel;
+}
+/**
+ * Create the panel header with tabs and controls.
+ */
+function createHeader(state, config) {
+    const header = document.createElement('div');
+    header.setAttribute('style', headerStyles);
+    // Tab bar
+    const tabBar = document.createElement('div');
+    tabBar.setAttribute('style', tabBarStyles);
+    // Create tab buttons
+    const tabButtons = [];
+    for (const tab of TABS) {
+        const button = document.createElement('button');
+        button.textContent = tab.label;
+        button.title = tab.label;
+        button.onclick = () => {
+            state.update(s => ({ ...s, activeTab: tab.id }));
+        };
+        tabBar.appendChild(button);
+        tabButtons.push(button);
+    }
+    // Effect to update tab button styles
+    effect(() => {
+        const currentState = state();
+        for (let i = 0; i < TABS.length; i++) {
+            const tab = TABS[i];
+            const button = tabButtons[i];
+            if (tab && button) {
+                button.setAttribute('style', getTabStyles(currentState.activeTab === tab.id));
+            }
+        }
+    });
+    header.appendChild(tabBar);
+    // Controls
+    const controls = document.createElement('div');
+    controls.setAttribute('style', controlsStyles);
+    // Pause/Resume button
+    const pauseButton = document.createElement('button');
+    pauseButton.setAttribute('style', buttonStyles);
+    pauseButton.onclick = () => {
+        state.update(s => ({ ...s, isPaused: !s.isPaused }));
+    };
+    effect(() => {
+        pauseButton.textContent = state().isPaused ? 'Resume' : 'Pause';
+    });
+    controls.appendChild(pauseButton);
+    // Clear button
+    const clearButton = document.createElement('button');
+    clearButton.setAttribute('style', buttonStyles);
+    clearButton.textContent = 'Clear';
+    clearButton.onclick = () => {
+        // Dispatch custom event for tabs to handle
+        const event = new CustomEvent('devtools:clear');
+        header.dispatchEvent(event);
+    };
+    controls.appendChild(clearButton);
+    // Close button
+    const closeButton = document.createElement('button');
+    closeButton.setAttribute('style', buttonStyles);
+    closeButton.textContent = 'X';
+    closeButton.title = `Close (${config.shortcut})`;
+    closeButton.onclick = () => {
+        state.update(s => ({ ...s, isOpen: false }));
+    };
+    closeButton.style.padding = '4px 6px';
+    closeButton.style.fontWeight = 'bold';
+    controls.appendChild(closeButton);
+    header.appendChild(controls);
+    return header;
+}
+/**
+ * Create content for a specific tab.
+ * Returns the container element and a dispose function.
+ */
+function createTabContent(tabId, buffer, state, stores) {
+    const container = document.createElement('div');
+    container.setAttribute('style', `${contentStyles} flex-direction: column;`);
+    let tabResult;
+    switch (tabId) {
+        case 'signals':
+            tabResult = createSignalInspector(buffer, state);
+            container.appendChild(tabResult.element);
+            break;
+        case 'stores':
+            tabResult = createStoreExplorer(buffer, state, stores);
+            container.appendChild(tabResult.element);
+            break;
+        case 'router':
+            tabResult = createRouterInspector(buffer, state);
+            container.appendChild(tabResult.element);
+            break;
+        case 'components':
+            tabResult = createComponentTree(buffer, state);
+            container.appendChild(tabResult.element);
+            break;
+        case 'performance':
+            tabResult = createPerformanceTab(buffer, state);
+            container.appendChild(tabResult.element);
+            break;
+        default:
+            tabResult = { element: document.createElement('div'), dispose: () => { } };
+    }
+    return {
+        element: container,
+        dispose: tabResult.dispose,
+    };
+}
+//# sourceMappingURL=Panel.js.map