# WRNexusJS DevToolbar Integration

Extract this ZIP directly over the WRNexusJS repository root and allow these files to be replaced.

## Replace files one by one

1. `tsconfig.json`
   - Adds workspace path aliases for `@wrnexus/dev-toolbar` exports.

2. `packages/styles/src/config.ts`
   - Adds `DevToolbarConfig` and `devToolbar` to `AppConfig`.

3. `packages/dev-server/package.json`
   - Confirms the workspace dependency on `@wrnexus/dev-toolbar`.

4. `packages/dev-server/src/hmr.ts`
   - Adds generic JSON broadcasting for toolbar events.

5. `packages/dev-server/src/watch.ts`
   - Clears stale source issues and triggers rescans for CSS changes.

6. `packages/dev-server/src/runtime.ts`
   - Serves toolbar routes.
   - Injects the toolbar only in development HTML.
   - Collects route, component, layout, and request errors.
   - Sends HMR/browser events used by the toolbar.

7. `packages/dev-server/src/index.ts`
   - Resolves toolbar configuration.
   - Creates the server issue collector.
   - Connects collector updates to HMR.
   - Passes the toolbar into runtime and watcher dependencies.

8. `packages/dev-server/src/serve-entry.ts`
   - Passes `config.devToolbar` from `wrnexus.config.ts` into the server.

9. `packages/dev-toolbar/src/client/runtime.ts`
   - Loads server-side issues.
   - Receives live toolbar issue/scan messages.
   - Rescans after HMR and client navigation.

## Configuration

The toolbar is enabled automatically in development. Optional configuration:

```ts
export default {
  devToolbar: {
    enabled: true,
    position: "bottom-center",
    defaultOpen: false,
    scanOnNavigation: true,
    scanOnHmr: true,
    openEditor: true,
    editor: "code",
  },
};
```

Disable it for an app:

```ts
export default {
  devToolbar: false,
};
```

## After replacement

Run from the repository root:

```bash
bun install
bun run format
bun run typecheck
bun run lint
bun test
bun run check
```

The toolbar is development-only and is not injected when the server mode is `production`.