@three-flatland/devtools 0.1.0-alpha.3

package/dist/devtools-client.js

@@ -0,0 +1,852 @@
+import {
+  ACK_INTERVAL_MS,
+  DEBUG_PROTOCOL_VERSION,
+  DISCOVERY_CHANNEL,
+  SERVER_LIVENESS_MS,
+  providerChannelName
+} from "three-flatland/debug-protocol";
+import { tracePerf } from "./perf-trace.js";
+const QUERY_RETRY_MIN_MS = 500;
+const QUERY_RETRY_MAX_MS = 5e3;
+const QUERY_MAX_RETRIES = 10;
+const CLIENT_SERIES_SIZE = 1024;
+const EMPTY_SAMPLE = new Float32Array(0);
+class DevtoolsClient {
+  id;
+  state;
+  /** Shared discovery bus — carries query/announce/gone only. */
+  _discoveryBus;
+  /** Per-provider data bus. Opened when we subscribe; closed on switch / gone. */
+  _dataBus = null;
+  /** Bound handler for the current `_dataBus`. Tracked so we can detach on close. */
+  _dataHandler = null;
+  _features;
+  /**
+   * Registry entry filter. `null` = all entries; `string[]` = only
+   * these. Starts empty-array so providers don't drain (sometimes
+   * expensive) registry payloads until the pane actually needs them.
+   */
+  _registrySelection = [];
+  /**
+   * Buffer subscription. Map of entry-name → { mode, thumbSize? }.
+   * Empty map = metadata-only (consumer is connected to the `buffers`
+   * feature but isn't actually watching anything — provider skips all
+   * readbacks). `null` is not a distinct state; represented by `{}`.
+   */
+  _buffersSelection = {};
+  _listeners = /* @__PURE__ */ new Set();
+  _chunkListeners = /* @__PURE__ */ new Set();
+  _rawMessageListeners = /* @__PURE__ */ new Set();
+  _ackTimer = null;
+  _livenessTimer = null;
+  _queryRetryTimer = null;
+  _lastServerAt = 0;
+  _subscribed = false;
+  _disposed = false;
+  /** Known providers by id — updated live via `provider:announce` + `provider:gone`. */
+  _providers = /* @__PURE__ */ new Map();
+  constructor(options) {
+    this.id = generateUuid();
+    this._features = [...options.features];
+    if (options.onChange) this._listeners.add(options.onChange);
+    this._discoveryBus = new BroadcastChannel(options.discoveryChannelName ?? DISCOVERY_CHANNEL);
+    const mkSeries = () => ({
+      data: new Float32Array(CLIENT_SERIES_SIZE),
+      write: 0,
+      length: 0
+    });
+    this.state = {
+      series: {
+        fps: mkSeries(),
+        cpuMs: mkSeries(),
+        gpuMs: mkSeries(),
+        heapUsedMB: mkSeries(),
+        drawCalls: mkSeries(),
+        triangles: mkSeries(),
+        primitives: mkSeries(),
+        geometries: mkSeries(),
+        textures: mkSeries()
+      },
+      registry: /* @__PURE__ */ new Map(),
+      buffers: /* @__PURE__ */ new Map(),
+      batches: { frame: 0, passes: [], batches: [] },
+      providers: [],
+      selectedProviderId: null,
+      serverAlive: false,
+      serverLagMs: 0
+    };
+    this._discoveryBus.addEventListener("message", (ev) => {
+      this._onDiscoveryMessage(ev.data);
+    });
+  }
+  /**
+   * Begin discovery + subscription. Sends a `provider:query`, waits
+   * `DISCOVERY_WINDOW_MS` for `provider:announce` responses, then picks
+   * the best provider (user > system) and subscribes to it.
+   *
+   * Idempotent — calling again while already started is a no-op.
+   */
+  start() {
+    if (this._disposed || this._subscribed) return;
+    this._subscribed = true;
+    this._sendQuery();
+    let retries = 0;
+    let nextDelay = QUERY_RETRY_MIN_MS;
+    const tick = () => {
+      if (this._disposed || this.state.selectedProviderId !== null) {
+        this._queryRetryTimer = null;
+        return;
+      }
+      if (retries >= QUERY_MAX_RETRIES) {
+        this._queryRetryTimer = null;
+        return;
+      }
+      retries++;
+      this._sendQuery();
+      nextDelay = Math.min(nextDelay * 2, QUERY_RETRY_MAX_MS);
+      this._queryRetryTimer = setTimeout(tick, nextDelay);
+    };
+    this._queryRetryTimer = setTimeout(tick, nextDelay);
+    this._livenessTimer = setInterval(() => this._checkLiveness(), 1e3);
+  }
+  _sendQuery() {
+    this._postDiscovery({
+      type: "provider:query",
+      payload: { requesterId: this.id }
+    });
+  }
+  /**
+   * Update the feature set. Re-posts `subscribe` on the current
+   * provider's data channel.
+   */
+  setFeatures(features) {
+    if (sameSet(this._features, features)) return;
+    this._features = [...features];
+    this._resubscribe();
+  }
+  /**
+   * Update the registry entry filter. Pass `null` for "every entry",
+   * `[]` to stop all registry traffic, or a list of names to narrow.
+   * Re-posts `subscribe` if the filter actually changed.
+   */
+  /**
+   * Narrow which registry entries the provider should ship samples
+   * for. `null` = all entries; `[]` = none; `[name, …]` = only these.
+   * Metadata still flows regardless — only sample bytes are gated.
+   */
+  setRegistry(names) {
+    if (sameFilter(this._registrySelection, names)) return;
+    this._registrySelection = names === null ? null : [...names];
+    this._resubscribe();
+  }
+  /**
+   * Update the buffer subscription. Map of entry-name → (mode, thumbSize?).
+   *   - Empty map / missing names → metadata-only (provider sends no pixels,
+   *     runs no readbacks). This is the idle state when no preview or
+   *     modal is visible.
+   *   - `{ name: { mode: 'thumbnail', thumbSize: 256 } }` → small
+   *     downsampled preview. Use when a thumbnail card is visible.
+   *   - `{ name: { mode: 'stream' } }` → full-size VP9 video stream.
+   *     Use when the fullscreen modal is open.
+   *
+   * Mode changes (incl. unsubscribing) take effect on the next
+   * provider flush; the producer will drop old readbacks immediately.
+   */
+  setBuffers(subscription) {
+    if (sameBufferSubscription(this._buffersSelection, subscription)) return;
+    this._buffersSelection = { ...subscription };
+    this._resubscribe();
+  }
+  _resubscribe() {
+    if (this._subscribed && this._dataBus !== null) {
+      const hasBuffers = Object.keys(this._buffersSelection).length > 0;
+      this._postData({
+        type: "subscribe",
+        payload: {
+          id: this.id,
+          features: this._features,
+          registry: this._registrySelection ?? void 0,
+          buffers: hasBuffers ? this._buffersSelection : void 0
+        }
+      });
+    }
+  }
+  /**
+   * Manually switch to a different provider. No-op if unknown or if
+   * already selected. Closes the old data channel and opens the new one.
+   */
+  selectProvider(providerId) {
+    if (!this._providers.has(providerId)) return;
+    if (this.state.selectedProviderId === providerId) return;
+    this._leaveDataChannel();
+    this.state.selectedProviderId = providerId;
+    this._resetAccumulatedState();
+    this._joinDataChannel(providerId);
+    this._postData({
+      type: "subscribe",
+      payload: {
+        id: this.id,
+        features: this._features,
+        registry: this._registrySelection ?? void 0,
+        buffers: Object.keys(this._buffersSelection).length > 0 ? this._buffersSelection : void 0
+      }
+    });
+    this._fire();
+  }
+  dispose() {
+    if (this._disposed) return;
+    this._disposed = true;
+    this._leaveDataChannel();
+    this._subscribed = false;
+    if (this._ackTimer !== null) {
+      clearInterval(this._ackTimer);
+      this._ackTimer = null;
+    }
+    if (this._livenessTimer !== null) {
+      clearInterval(this._livenessTimer);
+      this._livenessTimer = null;
+    }
+    if (this._queryRetryTimer !== null) {
+      clearTimeout(this._queryRetryTimer);
+      this._queryRetryTimer = null;
+    }
+    try {
+      this._discoveryBus.close();
+    } catch {
+    }
+  }
+  /**
+   * Open a fresh per-provider data channel and start listening on it.
+   * Caller is responsible for posting the initial `subscribe`.
+   */
+  _joinDataChannel(providerId) {
+    this._dataBus = new BroadcastChannel(providerChannelName(providerId));
+    this._dataHandler = (ev) => {
+      this._onDataMessage(ev.data);
+    };
+    this._dataBus.addEventListener("message", this._dataHandler);
+  }
+  /**
+   * Send `unsubscribe` (if we have someone to tell) and close the data
+   * channel. Idempotent — safe to call when there's no active channel.
+   */
+  _leaveDataChannel() {
+    if (this._dataBus !== null) {
+      if (this._subscribed) {
+        try {
+          this._postData({ type: "unsubscribe", payload: { id: this.id } });
+        } catch {
+        }
+      }
+      if (this._dataHandler !== null) {
+        try {
+          this._dataBus.removeEventListener("message", this._dataHandler);
+        } catch {
+        }
+      }
+      try {
+        this._dataBus.close();
+      } catch {
+      }
+      this._dataBus = null;
+      this._dataHandler = null;
+    }
+  }
+  // ── Internal ──────────────────────────────────────────────────────────
+  /**
+   * Handler for the shared discovery bus. Only discovery messages land
+   * here by protocol; anything else is ignored.
+   */
+  _onDiscoveryMessage(msg) {
+    if (!msg || typeof msg !== "object" || !("type" in msg)) return;
+    tracePerf(msg);
+    switch (msg.type) {
+      case "provider:announce": {
+        const id = msg.payload.identity.id;
+        this._providers.set(id, msg.payload.identity);
+        this.state.providers = Array.from(this._providers.values());
+        this._fire();
+        if (this.state.selectedProviderId === null) this._pickProviderAndSubscribe();
+        break;
+      }
+      case "provider:gone": {
+        const id = msg.payload.id;
+        if (!this._providers.has(id)) return;
+        this._providers.delete(id);
+        this.state.providers = Array.from(this._providers.values());
+        if (this.state.selectedProviderId === id) {
+          this._leaveDataChannel();
+          this.state.selectedProviderId = null;
+          this._resetAccumulatedState();
+          this._pickProviderAndSubscribe();
+        }
+        this._fire();
+        break;
+      }
+      default:
+        break;
+    }
+  }
+  /**
+   * Handler for the per-provider data channel. Everything here is
+   * already implicitly addressed to us (we opened the channel with the
+   * provider's id), so no per-message filtering is required beyond
+   * matching our consumer `id` on `subscribe:ack`.
+   */
+  _onDataMessage(msg) {
+    if (!msg || typeof msg !== "object" || !("type" in msg)) return;
+    tracePerf(msg);
+    if (this._rawMessageListeners.size > 0) {
+      for (const cb of this._rawMessageListeners) {
+        try {
+          cb(msg, "in");
+        } catch {
+        }
+      }
+    }
+    switch (msg.type) {
+      case "subscribe:ack": {
+        if (msg.payload.id !== this.id) return;
+        this._markServerAlive();
+        this._applyEnv(msg.payload.env);
+        if (this._ackTimer === null) {
+          this._ackTimer = setInterval(() => this._sendAck(), ACK_INTERVAL_MS);
+        }
+        this._fire();
+        break;
+      }
+      case "data": {
+        this._markServerAlive();
+        this.state.frame = msg.payload.frame;
+        const features = msg.payload.features;
+        if (features.stats !== void 0) this._applyStats(features.stats);
+        if (features.env !== void 0) this._applyEnv(features.env);
+        if (features.registry !== void 0) this._applyRegistry(features.registry);
+        if (features.buffers !== void 0) this._applyBuffers(features.buffers);
+        if (features.batches !== void 0) this._applyBatches(features.batches);
+        this._fire();
+        break;
+      }
+      case "buffer:chunk": {
+        this._markServerAlive();
+        const payload = msg.payload;
+        for (const cb of this._chunkListeners) {
+          try {
+            cb(payload);
+          } catch {
+          }
+        }
+        break;
+      }
+      case "buffer:raw": {
+        this._markServerAlive();
+        const payload = msg.payload;
+        let snap = this.state.buffers.get(payload.name);
+        if (snap !== void 0) {
+          snap.pixels = new Uint8Array(payload.data);
+          snap.width = payload.width;
+          snap.height = payload.height;
+          snap.version++;
+        } else {
+          snap = {
+            name: payload.name,
+            width: payload.width,
+            height: payload.height,
+            srcWidth: payload.width,
+            srcHeight: payload.height,
+            pixelType: "rgba8",
+            display: "colors",
+            version: 0,
+            pixels: new Uint8Array(payload.data)
+          };
+          this.state.buffers.set(payload.name, snap);
+        }
+        this._fire();
+        break;
+      }
+      case "ping": {
+        this._markServerAlive();
+        break;
+      }
+      default:
+        break;
+    }
+  }
+  _markServerAlive() {
+    this._lastServerAt = Date.now();
+    if (!this.state.serverAlive) {
+      this.state.serverAlive = true;
+      this._fire();
+    }
+  }
+  /**
+   * Pick the best provider from the currently-known set and subscribe
+   * to it. Preference: `user` over `system`; first-announced as
+   * tiebreak. No-op if zero providers are known (we'll stay waiting;
+   * any future `provider:announce` that arrives doesn't auto-trigger
+   * this — call it again or restart discovery).
+   */
+  _pickProviderAndSubscribe() {
+    if (this.state.selectedProviderId !== null) return;
+    const providers = Array.from(this._providers.values());
+    if (providers.length === 0) return;
+    const user = providers.find((p) => p.kind === "user");
+    const chosen = user ?? providers[0];
+    this.state.selectedProviderId = chosen.id;
+    this._joinDataChannel(chosen.id);
+    this._postData({
+      type: "subscribe",
+      payload: {
+        id: this.id,
+        features: this._features,
+        registry: this._registrySelection ?? void 0,
+        buffers: Object.keys(this._buffersSelection).length > 0 ? this._buffersSelection : void 0
+      }
+    });
+    this._fire();
+  }
+  /** Clear all feature-derived state so the next data packet can start fresh. */
+  _resetAccumulatedState() {
+    this.state.frame = void 0;
+    this._applyStats(null);
+    this._applyEnv(null);
+    this.state.registry.clear();
+    this.state.buffers.clear();
+    this._applyBatches(null);
+  }
+  /**
+   * Apply a stats batch. Null = reset (feature cleared / provider gone).
+   * Otherwise: decode each typed array onto the matching Float32 ring
+   * and update the scalar with the batch mean (natural smoothing for
+   * the text label).
+   */
+  _applyStats(batch) {
+    if (batch === null) {
+      this.state.drawCalls = void 0;
+      this.state.triangles = void 0;
+      this.state.primitives = void 0;
+      this.state.geometries = void 0;
+      this.state.textures = void 0;
+      this.state.cpuMs = void 0;
+      this.state.fps = void 0;
+      this.state.gpuMs = void 0;
+      this.state.heapUsedMB = void 0;
+      this.state.heapLimitMB = void 0;
+      const s2 = this.state.series;
+      s2.fps.write = 0;
+      s2.fps.length = 0;
+      s2.cpuMs.write = 0;
+      s2.cpuMs.length = 0;
+      s2.gpuMs.write = 0;
+      s2.gpuMs.length = 0;
+      s2.heapUsedMB.write = 0;
+      s2.heapUsedMB.length = 0;
+      s2.drawCalls.write = 0;
+      s2.drawCalls.length = 0;
+      s2.triangles.write = 0;
+      s2.triangles.length = 0;
+      s2.primitives.write = 0;
+      s2.primitives.length = 0;
+      s2.geometries.write = 0;
+      s2.geometries.length = 0;
+      s2.textures.write = 0;
+      s2.textures.length = 0;
+      return;
+    }
+    const count = batch.count;
+    if (count <= 0) return;
+    const s = this.state.series;
+    if (batch.fps) this.state.fps = this._ingestI16(s.fps, batch.fps, count, 0.1);
+    if (batch.cpuMs) this.state.cpuMs = this._ingestU16(s.cpuMs, batch.cpuMs, count, 0.01);
+    if (batch.gpuMs) this.state.gpuMs = this._ingestU16(s.gpuMs, batch.gpuMs, count, 0.01);
+    if (batch.heapUsedMB) this.state.heapUsedMB = this._ingestU16(s.heapUsedMB, batch.heapUsedMB, count, 1);
+    if (batch.drawCalls) this.state.drawCalls = this._ingestU32(s.drawCalls, batch.drawCalls, count);
+    if (batch.triangles) this.state.triangles = this._ingestU32(s.triangles, batch.triangles, count);
+    if (batch.primitives) this.state.primitives = this._ingestU32(s.primitives, batch.primitives, count);
+    if (batch.geometries) this.state.geometries = this._ingestU32(s.geometries, batch.geometries, count);
+    if (batch.textures) this.state.textures = this._ingestU32(s.textures, batch.textures, count);
+    if (batch.heapLimitMB !== void 0) this.state.heapLimitMB = batch.heapLimitMB;
+  }
+  /**
+   * Append `count` samples from a scaled integer view to a Float32 ring;
+   * return the batch mean (scaled). Zero-alloc past the ring itself.
+   */
+  _ingestI16(ring, src, count, scale) {
+    const size = ring.data.length;
+    let sum = 0;
+    let w = ring.write;
+    for (let i = 0; i < count; i++) {
+      const v = src[i] * scale;
+      ring.data[w] = v;
+      sum += v;
+      w = (w + 1) % size;
+    }
+    ring.write = w;
+    ring.length = Math.min(size, ring.length + count);
+    return sum / count;
+  }
+  _ingestU16(ring, src, count, scale) {
+    const size = ring.data.length;
+    let sum = 0;
+    let w = ring.write;
+    for (let i = 0; i < count; i++) {
+      const v = src[i] * scale;
+      ring.data[w] = v;
+      sum += v;
+      w = (w + 1) % size;
+    }
+    ring.write = w;
+    ring.length = Math.min(size, ring.length + count);
+    return sum / count;
+  }
+  _ingestU32(ring, src, count) {
+    const size = ring.data.length;
+    let sum = 0;
+    let w = ring.write;
+    for (let i = 0; i < count; i++) {
+      const v = src[i];
+      ring.data[w] = v;
+      sum += v;
+      w = (w + 1) % size;
+    }
+    ring.write = w;
+    ring.length = Math.min(size, ring.length + count);
+    return sum / count;
+  }
+  /**
+   * Apply a batches feature payload — replaces the snapshot wholesale.
+   * The wire arrays are scratch pools on the producer; we truncate by
+   * the provided counts and copy fields into persistent snapshot
+   * objects the UI can hold across subsequent frames.
+   *
+   * The client-side snapshot arrays grow monotonically to the high
+   * watermark and entries are overwritten in place — same alloc
+   * discipline as the producer.
+   */
+  _applyBatches(delta) {
+    if (delta === null) {
+      this.state.batches.frame = 0;
+      this.state.batches.passes.length = 0;
+      this.state.batches.batches.length = 0;
+      return;
+    }
+    this.state.batches.frame = delta.frame;
+    const passesIn = delta.passes;
+    const passCount = delta.passCount | 0;
+    const passesOut = this.state.batches.passes;
+    if (passesIn !== void 0) {
+      for (let i = 0; i < passCount; i++) {
+        const src = passesIn[i];
+        if (src === void 0) continue;
+        let dst = passesOut[i];
+        if (dst === void 0) {
+          dst = { label: "", calls: 0, triangles: 0, cpuMs: 0, depth: 0, parent: -1 };
+          passesOut[i] = dst;
+        }
+        dst.label = src.label;
+        dst.calls = src.calls;
+        dst.triangles = src.triangles;
+        dst.cpuMs = src.cpuMs;
+        dst.depth = src.depth;
+        dst.parent = src.parent;
+      }
+    }
+    if (passesOut.length > passCount) passesOut.length = passCount;
+    const batchesIn = delta.batches;
+    const batchCount = delta.batchCount | 0;
+    const batchesOut = this.state.batches.batches;
+    if (batchesIn !== void 0) {
+      for (let i = 0; i < batchCount; i++) {
+        const src = batchesIn[i];
+        if (src === void 0) continue;
+        let dst = batchesOut[i];
+        if (dst === void 0) {
+          dst = {
+            runKey: 0,
+            materialId: 0,
+            layer: 0,
+            materialName: "",
+            spriteCount: 0,
+            batchIdx: 0,
+            kind: "sprite",
+            label: ""
+          };
+          batchesOut[i] = dst;
+        }
+        dst.runKey = src.runKey;
+        dst.materialId = src.materialId;
+        dst.layer = src.layer;
+        dst.materialName = src.materialName;
+        dst.spriteCount = src.spriteCount;
+        dst.batchIdx = src.batchIdx;
+        dst.kind = src.kind ?? "sprite";
+        dst.label = src.label ?? "";
+      }
+    }
+    if (batchesOut.length > batchCount) batchesOut.length = batchCount;
+  }
+  /**
+   * Apply a registry delta. `entries[name] === null` → remove;
+   * `entries[name]` present → upsert a snapshot keyed by `name`.
+   * A `null` batch (feature cleared) drops every entry.
+   */
+  _applyRegistry(delta) {
+    if (delta === null) {
+      this.state.registry.clear();
+      return;
+    }
+    if (!delta.entries) return;
+    const entries = delta.entries;
+    for (const name in entries) {
+      const d = entries[name];
+      if (d === void 0) continue;
+      if (d === null) {
+        this.state.registry.delete(name);
+        continue;
+      }
+      let snap = this.state.registry.get(name);
+      const sample = d.sample ?? snap?.sample ?? EMPTY_SAMPLE;
+      if (snap === void 0) {
+        snap = {
+          name,
+          kind: d.kind,
+          version: d.version,
+          count: d.count,
+          sample,
+          label: d.label
+        };
+        this.state.registry.set(name, snap);
+      } else {
+        snap.kind = d.kind;
+        snap.version = d.version;
+        snap.count = d.count;
+        snap.sample = sample;
+        snap.label = d.label;
+      }
+    }
+  }
+  /**
+   * Apply a buffers delta. Metadata (width/height/version/pixelType)
+   * ships regardless of the client's selection; `pixels` only arrives
+   * when this entry is in the current selection. Retain the previous
+   * `pixels` when the delta is metadata-only so the UI keeps showing
+   * the last thumbnail while browsing.
+   */
+  _applyBuffers(delta) {
+    if (delta === null) {
+      this.state.buffers.clear();
+      return;
+    }
+    if (!delta.entries) return;
+    const entries = delta.entries;
+    for (const name in entries) {
+      const d = entries[name];
+      if (d === void 0) continue;
+      if (d === null) {
+        this.state.buffers.delete(name);
+        continue;
+      }
+      let snap = this.state.buffers.get(name);
+      const pixels = d.pixels ?? snap?.pixels ?? null;
+      const isFloat = d.pixelType === "rgba16f" || d.pixelType === "rgba32f";
+      const display = d.display ?? (isFloat ? "normalize" : "colors");
+      const srcW = d.srcWidth ?? d.width;
+      const srcH = d.srcHeight ?? d.height;
+      if (snap === void 0) {
+        snap = {
+          name,
+          width: d.width,
+          height: d.height,
+          srcWidth: srcW,
+          srcHeight: srcH,
+          pixelType: d.pixelType,
+          display,
+          version: d.version,
+          pixels,
+          label: d.label
+        };
+        this.state.buffers.set(name, snap);
+      } else {
+        snap.width = d.width;
+        snap.height = d.height;
+        snap.srcWidth = srcW;
+        snap.srcHeight = srcH;
+        snap.pixelType = d.pixelType;
+        snap.display = display;
+        snap.version = d.version;
+        snap.pixels = pixels;
+        snap.label = d.label;
+      }
+    }
+  }
+  _applyEnv(delta) {
+    if (delta === null) {
+      this.state.threeFlatlandVersion = void 0;
+      this.state.threeRevision = void 0;
+      this.state.backendName = void 0;
+      this.state.backendTrackTimestamp = void 0;
+      this.state.backendDisjoint = void 0;
+      this.state.gpuModeEnabled = void 0;
+      this.state.canvasWidth = void 0;
+      this.state.canvasHeight = void 0;
+      this.state.canvasPixelRatio = void 0;
+      return;
+    }
+    if ("threeFlatlandVersion" in delta) this.state.threeFlatlandVersion = delta.threeFlatlandVersion ?? void 0;
+    if ("threeRevision" in delta) this.state.threeRevision = delta.threeRevision ?? void 0;
+    if (delta.backend !== void 0) {
+      const b = delta.backend;
+      if (b === null) {
+        this.state.backendName = void 0;
+        this.state.backendTrackTimestamp = void 0;
+        this.state.backendDisjoint = void 0;
+        this.state.gpuModeEnabled = void 0;
+      } else {
+        if ("name" in b) this.state.backendName = b.name ?? void 0;
+        if ("trackTimestamp" in b) this.state.backendTrackTimestamp = b.trackTimestamp ?? void 0;
+        if ("disjoint" in b) this.state.backendDisjoint = b.disjoint ?? void 0;
+        if ("gpuModeEnabled" in b) this.state.gpuModeEnabled = b.gpuModeEnabled ?? void 0;
+      }
+    }
+    if (delta.canvas !== void 0) {
+      const c = delta.canvas;
+      if (c === null) {
+        this.state.canvasWidth = void 0;
+        this.state.canvasHeight = void 0;
+        this.state.canvasPixelRatio = void 0;
+      } else {
+        if ("width" in c) this.state.canvasWidth = c.width ?? void 0;
+        if ("height" in c) this.state.canvasHeight = c.height ?? void 0;
+        if ("pixelRatio" in c) this.state.canvasPixelRatio = c.pixelRatio ?? void 0;
+      }
+    }
+  }
+  _checkLiveness() {
+    const now = Date.now();
+    const lag = this._lastServerAt === 0 ? now : now - this._lastServerAt;
+    this.state.serverLagMs = lag;
+    if (this._lastServerAt !== 0 && lag > SERVER_LIVENESS_MS) {
+      if (this.state.serverAlive) {
+        this.state.serverAlive = false;
+      }
+      if (this._dataBus !== null) {
+        this._postData({
+          type: "subscribe",
+          payload: {
+            id: this.id,
+            features: this._features,
+            registry: this._registrySelection ?? void 0,
+            buffers: Object.keys(this._buffersSelection).length > 0 ? this._buffersSelection : void 0
+          }
+        });
+      }
+    }
+    this._fire();
+  }
+  _sendAck() {
+    if (this._disposed || this._dataBus === null) return;
+    this._postData({ type: "ack", payload: { id: this.id } });
+  }
+  _postDiscovery(body) {
+    const msg = { v: DEBUG_PROTOCOL_VERSION, ts: Date.now(), ...body };
+    this._fireRawMessage(msg, "out");
+    try {
+      this._discoveryBus.postMessage(msg);
+    } catch {
+    }
+  }
+  _postData(body) {
+    if (this._dataBus === null) return;
+    const msg = { v: DEBUG_PROTOCOL_VERSION, ts: Date.now(), ...body };
+    this._fireRawMessage(msg, "out");
+    try {
+      this._dataBus.postMessage(msg);
+    } catch {
+    }
+  }
+  _fireRawMessage(msg, direction) {
+    if (this._rawMessageListeners.size === 0) return;
+    for (const cb of this._rawMessageListeners) {
+      try {
+        cb(msg, direction);
+      } catch {
+      }
+    }
+  }
+  /** Subscribe to state-change events. Returns an unsubscribe function. */
+  addListener(cb) {
+    this._listeners.add(cb);
+    return () => {
+      this._listeners.delete(cb);
+    };
+  }
+  /** Explicit remove — equivalent to calling the unsubscribe returned from `addListener`. */
+  removeListener(cb) {
+    this._listeners.delete(cb);
+  }
+  /** Subscribe to incoming WebCodecs buffer chunks. Returns an unsubscribe function. */
+  addChunkListener(cb) {
+    this._chunkListeners.add(cb);
+    return () => {
+      this._chunkListeners.delete(cb);
+    };
+  }
+  /**
+   * Subscribe to every bus message — both inbound (from providers) and
+   * outbound (our own `subscribe`/`ack`/etc.). Used by the dashboard's
+   * protocol-log panel. Listeners fire on the hot path so keep them
+   * cheap — filter and format lazily.
+   */
+  addRawMessageListener(cb) {
+    this._rawMessageListeners.add(cb);
+    return () => {
+      this._rawMessageListeners.delete(cb);
+    };
+  }
+  _fire() {
+    for (const cb of this._listeners) {
+      try {
+        cb(this.state);
+      } catch {
+      }
+    }
+  }
+}
+function sameSet(a, b) {
+  if (a.length !== b.length) return false;
+  for (const v of a) if (!b.includes(v)) return false;
+  return true;
+}
+function sameFilter(a, b) {
+  if (a === b) return true;
+  if (a === null || b === null) return false;
+  return sameSet(a, b);
+}
+function sameBufferSubscription(a, b) {
+  const ak = Object.keys(a);
+  const bk = Object.keys(b);
+  if (ak.length !== bk.length) return false;
+  for (const k of ak) {
+    const av = a[k];
+    const bv = b[k];
+    if (av === void 0 || bv === void 0) return false;
+    if (av.mode !== bv.mode) return false;
+    if ((av.thumbSize ?? 256) !== (bv.thumbSize ?? 256)) return false;
+  }
+  return true;
+}
+function generateUuid() {
+  const c = typeof crypto !== "undefined" ? crypto : void 0;
+  if (c && typeof c.randomUUID === "function") return c.randomUUID();
+  const bytes = new Uint8Array(16);
+  if (c && typeof c.getRandomValues === "function") c.getRandomValues(bytes);
+  else for (let i = 0; i < 16; i++) bytes[i] = Math.floor(Math.random() * 256);
+  bytes[6] = bytes[6] & 15 | 64;
+  bytes[8] = bytes[8] & 63 | 128;
+  const h = Array.from(bytes, (b) => b.toString(16).padStart(2, "0"));
+  return `${h.slice(0, 4).join("")}-${h.slice(4, 6).join("")}-${h.slice(6, 8).join("")}-${h.slice(8, 10).join("")}-${h.slice(10).join("")}`;
+}
+export {
+  DevtoolsClient
+};
+//# sourceMappingURL=devtools-client.js.map