@bimetal/devtools-react

React UI für den BIMETAL Event-Debugger. Liefert das EventInspectorPanel plus DevtoolsRegistryProvider / useDevtoolsRegistry als React-Bindings für die in @bimetal/devtools definierte Registry.

Strikte Package-Boundary: Runtime-Imports nur react und @bimetal/devtools. Kein @bimetal/event-sourcing, @bimetal/broker, Domain- oder App-Import — Architecture-Test verriegelt.

Installation

npm install @bimetal/devtools @bimetal/devtools-react

react ist Peer-Dependency (≥ 18 für useSyncExternalStore).

Usage

import { createDevtoolsRegistry } from '@bimetal/devtools';
import { EventInspectorPanel } from '@bimetal/devtools-react';

const registry = createDevtoolsRegistry();
// ... bei App-Init: Stores/Targets/Transports/Bridges am Registry anhängen
// (siehe createObservedEventStore / createObservedReplayTarget / createObservedSyncTransport
//  / createObservedBridge aus @bimetal/devtools)

function DebugPanel() {
  return <EventInspectorPanel registry={registry} />;
}

Oder per Context, wenn mehrere Komponenten dieselbe Registry brauchen:

import { DevtoolsRegistryProvider, EventInspectorPanel } from '@bimetal/devtools-react';

function App() {
  return (
    <DevtoolsRegistryProvider value={registry}>
      <YourApp />
      <EventInspectorPanel />
    </DevtoolsRegistryProvider>
  );
}

API

• <EventInspectorPanel registry?={DevtoolsRegistry}> — Vollseiten-Inspector mit fünf dynamischen Tabs (Events, Sync, State, Causation, Bridges). registry-Prop optional; ohne Prop greift der Provider-Context. Ohne beide wirft die Komponente.
• <DevtoolsRegistryProvider value={DevtoolsRegistry}> — stellt die Registry für nachgelagerte Hook-/Inspector-Konsumenten bereit.
• useDevtoolsRegistry(): DevtoolsRegistry — liest die Registry aus dem nächsten Provider. Wirft, wenn kein Provider im Tree (kein impliziter Singleton-Fallback).

Designprinzipien

• Prop > Context > Throw. Kein Package-Singleton — würde sonst mehrere Konsumenten zusammenketten.
• Headless-Core, dünne UI-Schicht. Alle Domain-Logik lebt in @bimetal/devtools; dieses Package rendert nur.
• Inline-Styles, kein globales CSS. Keine Theme-Customization in v0.16.5 (eigene Slice, wenn dran).
• Closed-Set Tabs. Events/Sync/State/Causation/Bridges sind hardcoded. Custom-Tab-API ist eigene Slice.

License

PolyForm-Noncommercial-1.0.0 — siehe LICENSE.