@kb-labs/studio-devtools 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,102 @@
+import { ComponentType } from 'react';
+
+interface DevToolsChannel<T = unknown> {
+    readonly id: string;
+    readonly label: string;
+    readonly icon?: string;
+    getEvents(): readonly T[];
+    push(event: T): void;
+    clear(): void;
+    subscribe(listener: () => void): () => void;
+}
+interface DevToolsLogRow {
+    /** Channel this row belongs to */
+    channelId: string;
+    /** Timestamp for chronological sorting */
+    timestamp: number;
+    /** Unique row id */
+    id: string;
+    /** Searchable text — all fields concatenated */
+    searchText: string;
+    /** The original event */
+    event: unknown;
+}
+interface DevToolsPlugin<T = unknown> {
+    channel: DevToolsChannel<T>;
+    /** Render a single log row for this channel's event */
+    renderRow(event: T): DevToolsRowContent;
+}
+interface DevToolsRowContent {
+    /** Status indicator: 'success' | 'warning' | 'error' | 'pending' */
+    status: 'success' | 'warning' | 'error' | 'pending';
+    /** Main summary text shown in the row */
+    summary: string;
+    /** Optional right-side label (e.g. "234ms") */
+    meta?: string;
+    /** Optional detail node shown when row is expanded */
+    detail?: ComponentType;
+}
+type MFEventStatus = 'loading' | 'success' | 'error' | 'warning';
+interface MFEvent {
+    id: string;
+    remoteName: string;
+    exposedModule: string;
+    status: MFEventStatus;
+    startedAt: number;
+    durationMs?: number;
+    attempt: number;
+    error?: {
+        message: string;
+        cause?: string;
+    };
+    isDefaultUndefined?: boolean;
+}
+interface EventBusEvent {
+    id: string;
+    event: string;
+    payload: unknown;
+    sourcePluginId: string;
+    sourcePageId: string;
+    timestamp: number;
+}
+
+/**
+ * Generic ring-buffer channel. Push events in, read them back.
+ * Notifies all subscribers on every push/clear.
+ */
+declare class GenericChannel<T = unknown> implements DevToolsChannel<T> {
+    readonly id: string;
+    readonly label: string;
+    readonly icon?: string;
+    private events;
+    private readonly maxSize;
+    private listeners;
+    constructor(id: string, label: string, icon?: string, maxSize?: number);
+    getEvents(): readonly T[];
+    push(event: T): void;
+    clear(): void;
+    subscribe(listener: () => void): () => void;
+    private notify;
+}
+
+/**
+ * Registry of all DevTools channels.
+ * Module-level singleton — instruments code outside the React tree.
+ */
+declare class DevToolsStore {
+    private channels;
+    private listeners;
+    private channelUnsubs;
+    registerChannel<T>(channel: DevToolsChannel<T>): void;
+    unregisterChannel(id: string): void;
+    registerPlugin<T>(plugin: DevToolsPlugin<T>): void;
+    getChannel<T = unknown>(id: string): DevToolsChannel<T> | undefined;
+    getChannels(): readonly DevToolsChannel[];
+    clear(): void;
+    subscribe(listener: () => void): () => void;
+    private notify;
+}
+/** Global singleton — import this everywhere you want to push events */
+declare const devToolsStore: DevToolsStore;
+
+export { type DevToolsChannel, type DevToolsLogRow, type DevToolsPlugin, type DevToolsRowContent, DevToolsStore, type EventBusEvent, GenericChannel, type MFEvent, type MFEventStatus, devToolsStore };

package/dist/index.js

@@ -0,0 +1,94 @@
+// src/channel.ts
+var GenericChannel = class {
+  id;
+  label;
+  icon;
+  events = [];
+  maxSize;
+  listeners = /* @__PURE__ */ new Set();
+  constructor(id, label, icon, maxSize = 200) {
+    this.id = id;
+    this.label = label;
+    this.icon = icon;
+    this.maxSize = maxSize;
+  }
+  getEvents() {
+    return this.events;
+  }
+  push(event) {
+    this.events.push(event);
+    if (this.events.length > this.maxSize) {
+      this.events.shift();
+    }
+    this.notify();
+  }
+  clear() {
+    this.events = [];
+    this.notify();
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  notify() {
+    this.listeners.forEach((l) => {
+      l();
+    });
+  }
+};
+
+// src/store.ts
+var DevToolsStore = class {
+  channels = /* @__PURE__ */ new Map();
+  listeners = /* @__PURE__ */ new Set();
+  channelUnsubs = /* @__PURE__ */ new Map();
+  registerChannel(channel) {
+    if (this.channels.has(channel.id)) {
+      return;
+    }
+    this.channels.set(channel.id, channel);
+    const unsub = channel.subscribe(() => {
+      this.notify();
+    });
+    this.channelUnsubs.set(channel.id, unsub);
+    this.notify();
+  }
+  unregisterChannel(id) {
+    this.channelUnsubs.get(id)?.();
+    this.channelUnsubs.delete(id);
+    this.channels.delete(id);
+    this.notify();
+  }
+  registerPlugin(plugin) {
+    this.registerChannel(plugin.channel);
+  }
+  getChannel(id) {
+    return this.channels.get(id);
+  }
+  getChannels() {
+    return [...this.channels.values()];
+  }
+  clear() {
+    this.channels.forEach((ch) => {
+      ch.clear();
+    });
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  notify() {
+    this.listeners.forEach((l) => {
+      l();
+    });
+  }
+};
+var devToolsStore = new DevToolsStore();
+
+export { DevToolsStore, GenericChannel, devToolsStore };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/channel.ts","../src/store.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import type { DevToolsChannel } from './types.js';\n\n/**\n * Generic ring-buffer channel. Push events in, read them back.\n * Notifies all subscribers on every push/clear.\n */\nexport class GenericChannel<T = unknown> implements DevToolsChannel<T> {\n  readonly id: string;\n  readonly label: string;\n  readonly icon?: string;\n\n  private events: T[] = [];\n  private readonly maxSize: number;\n  private listeners = new Set<() => void>();\n\n  constructor(id: string, label: string, icon?: string, maxSize = 200) {\n    this.id = id;\n    this.label = label;\n    this.icon = icon;\n    this.maxSize = maxSize;\n  }\n\n  getEvents(): readonly T[] {\n    return this.events;\n  }\n\n  push(event: T): void {\n    this.events.push(event);\n    if (this.events.length > this.maxSize) {\n      this.events.shift();\n    }\n    this.notify();\n  }\n\n  clear(): void {\n    this.events = [];\n    this.notify();\n  }\n\n  subscribe(listener: () => void): () => void {\n    this.listeners.add(listener);\n    return () => { this.listeners.delete(listener); };\n  }\n\n  private notify(): void {\n    this.listeners.forEach((l) => { l(); });\n  }\n}\n","import type { DevToolsChannel, DevToolsPlugin } from './types.js';\n\n/**\n * Registry of all DevTools channels.\n * Module-level singleton — instruments code outside the React tree.\n */\nexport class DevToolsStore {\n  private channels = new Map<string, DevToolsChannel>();\n  private listeners = new Set<() => void>();\n  private channelUnsubs = new Map<string, () => void>();\n\n  registerChannel<T>(channel: DevToolsChannel<T>): void {\n    if (this.channels.has(channel.id)) { return; }\n    this.channels.set(channel.id, channel as DevToolsChannel);\n    // Propagate channel notifications to global listeners\n    const unsub = channel.subscribe(() => { this.notify(); });\n    this.channelUnsubs.set(channel.id, unsub);\n    this.notify();\n  }\n\n  unregisterChannel(id: string): void {\n    this.channelUnsubs.get(id)?.();\n    this.channelUnsubs.delete(id);\n    this.channels.delete(id);\n    this.notify();\n  }\n\n  registerPlugin<T>(plugin: DevToolsPlugin<T>): void {\n    this.registerChannel(plugin.channel);\n  }\n\n  getChannel<T = unknown>(id: string): DevToolsChannel<T> | undefined {\n    return this.channels.get(id) as DevToolsChannel<T> | undefined;\n  }\n\n  getChannels(): readonly DevToolsChannel[] {\n    return [...this.channels.values()];\n  }\n\n  clear(): void {\n    this.channels.forEach((ch) => { ch.clear(); });\n  }\n\n  subscribe(listener: () => void): () => void {\n    this.listeners.add(listener);\n    return () => { this.listeners.delete(listener); };\n  }\n\n  private notify(): void {\n    this.listeners.forEach((l) => { l(); });\n  }\n}\n\n/** Global singleton — import this everywhere you want to push events */\nexport const devToolsStore = new DevToolsStore();\n"]}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@kb-labs/studio-devtools",
+  "version": "0.2.0",
+  "description": "Studio DevTools — extensible event channel store for developer debugging",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint . --max-warnings=0"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1"
+  },
+  "devDependencies": {
+    "@kb-labs/devkit": "link:../../../../infra/kb-labs-devkit",
+    "@types/react": "^18.3.18",
+    "rimraf": "^6.0.1",
+    "tsup": "^8.5.0",
+    "typescript": "^5.6.3"
+  },
+  "engines": {
+    "node": ">=20.0.0",
+    "pnpm": ">=9.0.0"
+  }
+}