@copilotkit/web-inspector 1.55.0-next.8 → 1.55.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/index.cjs +48 -29
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +1 -0
  5. package/dist/index.d.cts.map +1 -1
  6. package/dist/index.d.mts +1 -0
  7. package/dist/index.d.mts.map +1 -1
  8. package/dist/index.mjs +48 -29
  9. package/dist/index.mjs.map +1 -1
  10. package/dist/index.umd.js +48 -29
  11. package/dist/index.umd.js.map +1 -1
  12. package/package.json +7 -10
  13. package/src/__tests__/web-inspector.spec.ts +19 -1
  14. package/src/index.ts +231 -151
  15. package/eslint.config.mjs +0 -3
package/dist/index.umd.js CHANGED
@@ -220,6 +220,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
220
220
  this.dockMode = "floating";
221
221
  this.previousBodyMargins = null;
222
222
  this.transitionTimeoutId = null;
223
+ this.bodyTransitionTimeoutIds = /* @__PURE__ */ new Set();
223
224
  this.pendingSelectedContext = null;
224
225
  this.autoAttachCore = true;
225
226
  this.attemptedAutoAttach = false;
@@ -968,7 +969,13 @@ ${argsString}</pre
968
969
  window.removeEventListener("resize", this.handleResize);
969
970
  window.removeEventListener("pointerdown", this.handleGlobalPointerDown);
970
971
  }
971
- this.removeDockStyles();
972
+ for (const id of this.bodyTransitionTimeoutIds) clearTimeout(id);
973
+ this.bodyTransitionTimeoutIds.clear();
974
+ if (this.transitionTimeoutId !== null) {
975
+ clearTimeout(this.transitionTimeoutId);
976
+ this.transitionTimeoutId = null;
977
+ }
978
+ this.removeDockStyles(true);
972
979
  this.detachFromCore();
973
980
  }
974
981
  firstUpdated() {
@@ -1355,13 +1362,17 @@ ${argsString}</pre
1355
1362
  };
1356
1363
  if (!this.isResizing && !skipTransition) document.body.style.transition = "margin 300ms ease";
1357
1364
  if (this.dockMode === "docked-left") document.body.style.marginLeft = `${this.contextState.window.size.width}px`;
1358
- if (!this.isResizing && !skipTransition) setTimeout(() => {
1359
- if (document.body) document.body.style.transition = "";
1360
- }, 300);
1365
+ if (!this.isResizing && !skipTransition) {
1366
+ const id = setTimeout(() => {
1367
+ this.bodyTransitionTimeoutIds.delete(id);
1368
+ if (typeof document !== "undefined" && document.body) document.body.style.transition = "";
1369
+ }, 300);
1370
+ this.bodyTransitionTimeoutIds.add(id);
1371
+ }
1361
1372
  }
1362
- removeDockStyles() {
1373
+ removeDockStyles(skipTransition = false) {
1363
1374
  if (typeof document === "undefined" || !document.body) return;
1364
- if (!this.isResizing) document.body.style.transition = "margin 300ms ease";
1375
+ if (!this.isResizing && !skipTransition) document.body.style.transition = "margin 300ms ease";
1365
1376
  if (this.previousBodyMargins) {
1366
1377
  document.body.style.marginLeft = this.previousBodyMargins.left;
1367
1378
  document.body.style.marginBottom = this.previousBodyMargins.bottom;
@@ -1370,9 +1381,13 @@ ${argsString}</pre
1370
1381
  document.body.style.marginLeft = "";
1371
1382
  document.body.style.marginBottom = "";
1372
1383
  }
1373
- setTimeout(() => {
1374
- if (document.body) document.body.style.transition = "";
1375
- }, 300);
1384
+ if (!skipTransition) {
1385
+ const id = setTimeout(() => {
1386
+ this.bodyTransitionTimeoutIds.delete(id);
1387
+ if (typeof document !== "undefined" && document.body) document.body.style.transition = "";
1388
+ }, 300);
1389
+ this.bodyTransitionTimeoutIds.add(id);
1390
+ } else document.body.style.transition = "";
1376
1391
  }
1377
1392
  updateHostTransform(context = this.activeContext) {
1378
1393
  if (context !== this.activeContext) return;
@@ -1864,7 +1879,11 @@ ${prettyEvent}</pre
1864
1879
  this.copyToClipboard(prettyEvent, event.id);
1865
1880
  }}
1866
1881
  >
1867
- ${this.copiedEvents.has(event.id) ? lit.html`<span>✓ Copied</span>` : lit.html`<span>Copy</span>`}
1882
+ ${this.copiedEvents.has(event.id) ? lit.html`
1883
+ <span>✓ Copied</span>
1884
+ ` : lit.html`
1885
+ <span>Copy</span>
1886
+ `}
1868
1887
  </button>
1869
1888
  </div>
1870
1889
  ` : inlineEvent}
@@ -2348,13 +2367,17 @@ ${prettyEvent}</pre
2348
2367
  >${prop.name}</span
2349
2368
  >
2350
2369
  <div class="flex items-center gap-1.5 shrink-0">
2351
- ${prop.required ? lit.html`<span
2352
- class="text-[9px] rounded border border-rose-200 bg-rose-50 px-1 py-0.5 font-medium text-rose-700"
2353
- >required</span
2354
- >` : lit.html`<span
2355
- class="text-[9px] rounded border border-gray-200 bg-gray-50 px-1 py-0.5 font-medium text-gray-600"
2356
- >optional</span
2357
- >`}
2370
+ ${prop.required ? lit.html`
2371
+ <span
2372
+ class="text-[9px] rounded border border-rose-200 bg-rose-50 px-1 py-0.5 font-medium text-rose-700"
2373
+ >required</span
2374
+ >
2375
+ ` : lit.html`
2376
+ <span
2377
+ class="text-[9px] rounded border border-gray-200 bg-gray-50 px-1 py-0.5 font-medium text-gray-600"
2378
+ >optional</span
2379
+ >
2380
+ `}
2358
2381
  ${prop.type ? lit.html`<span
2359
2382
  class="text-[9px] rounded border border-gray-200 bg-gray-50 px-1 py-0.5 font-mono text-gray-600"
2360
2383
  >${prop.type}</span
@@ -2394,12 +2417,10 @@ ${prettyEvent}</pre
2394
2417
  `)}
2395
2418
  </div>
2396
2419
  ` : lit.html`
2397
- <div
2398
- class="flex items-center justify-center py-4 text-xs text-gray-500"
2399
- >
2400
- <span>No parameters defined</span>
2401
- </div>
2402
- `}
2420
+ <div class="flex items-center justify-center py-4 text-xs text-gray-500">
2421
+ <span>No parameters defined</span>
2422
+ </div>
2423
+ `}
2403
2424
  </div>
2404
2425
  ` : lit.nothing}
2405
2426
  </div>
@@ -2589,12 +2610,10 @@ ${prettyEvent}</pre
2589
2610
  ><code>${this.formatContextValue(context.value)}</code></pre>
2590
2611
  </div>
2591
2612
  ` : lit.html`
2592
- <div
2593
- class="flex items-center justify-center py-4 text-xs text-gray-500"
2594
- >
2595
- <span>No value available</span>
2596
- </div>
2597
- `}
2613
+ <div class="flex items-center justify-center py-4 text-xs text-gray-500">
2614
+ <span>No value available</span>
2615
+ </div>
2616
+ `}
2598
2617
  </div>
2599
2618
  ` : lit.nothing}
2600
2619
  </div>