jev-devtools 0.4.0 → 0.4.1

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 (11) hide show
  1. package/README.md +6 -7
  2. package/lib/flow/index.d.ts +2 -1
  3. package/lib/src/JevDrawer.js +2 -4
  4. package/lib/src/inspector-styles.js +1 -1
  5. package/lib/src/inspector.css +136 -270
  6. package/package.json +1 -1
  7. package/skills/setup-jev-devtools/SKILL.md +2 -2
  8. package/skills/setup-jev-devtools/references/flows.md +2 -2
  9. package/skills/setup-jev-devtools/references/nextjs.md +1 -1
  10. package/skills/setup-jev-devtools/references/react-node.md +1 -2
  11. package/skills/setup-jev-devtools/references/verify.md +1 -1
package/README.md CHANGED
@@ -1,10 +1,10 @@
1
1
  # Jev DevTools
2
2
 
3
- [![npm version 0.4.0](https://img.shields.io/badge/npm-v0.4.0-E551BA?labelColor=0D0A0F&logo=npm)](https://www.npmjs.com/package/jev-devtools/v/0.4.0)
3
+ [![npm version 0.4.1](https://img.shields.io/badge/npm-v0.4.1-E551BA?labelColor=0D0A0F&logo=npm)](https://www.npmjs.com/package/jev-devtools/v/0.4.1)
4
4
 
5
5
  A React drawer and Node adapter for inspecting TypeSafe Jev requests with animated diagrams. Includes request history, context, questions, typed answers, transport attempts, and raw snapshots.
6
6
 
7
- **0.4.0 — pending publication.** Use a packed checkout until publication is confirmed in the changelog. **Experimental (pre-1.0).** React 18/19 and Node 22.12+ are supported. APIs may change before 1.0. Verification uses sample responses through the real TypeSafe SDK, not live inference.
7
+ **Version 0.4.1 is prepared for release; publication is pending.** Check the release history for verified publication status. **Experimental (pre-1.0).** React 18/19 and Node 22.12+ are supported. APIs may change before 1.0. Verification uses sample responses through the real TypeSafe SDK, not live inference.
8
8
 
9
9
  [Changelog and release history](https://github.com/diegoag64/jev-devtools/blob/main/CHANGELOG.md) — published versions and unreleased work.
10
10
 
@@ -31,27 +31,26 @@ The [setup skill](https://github.com/diegoag64/jev-devtools/blob/main/packages/j
31
31
 
32
32
  ## Install
33
33
 
34
- Install from npm:
34
+ The npm command installs the latest published release (0.4.0 at preparation time):
35
35
 
36
36
  ```sh
37
37
  npm install jev-devtools @typesafe-ai/sdk
38
38
  ```
39
39
 
40
- To install this checkout before publication or try later local changes:
40
+ To try local changes before a future release:
41
41
 
42
42
  ```sh
43
43
  # From the jev-devtools repository root:
44
44
  npm ci
45
45
  npm run pack:devtools
46
46
  # From the consuming app:
47
- npm install /absolute/path/to/jev-devtools-0.4.0.tgz
47
+ npm install /absolute/path/to/jev-devtools-0.4.1.tgz
48
48
  ```
49
49
 
50
- Mount once:
50
+ Mount once. The drawer loads its own styles; no CSS import is needed:
51
51
 
52
52
  ```tsx
53
53
  import { JevDevtools } from 'jev-devtools';
54
- import 'jev-devtools/styles.css';
55
54
 
56
55
  <JevDevtools enabled={import.meta.env.DEV} defaultOpen={false} />
57
56
  ```
package/lib/flow/index.d.ts CHANGED
@@ -17,10 +17,11 @@ type Ast = {
17
17
  op: "eq" | "lt" | "gt" | "gte" | "all" | "any" | "not";
18
18
  args: Ast[];
19
19
  };
20
+ declare const valueTypeBrand: unique symbol;
20
21
  /** Inspectable expression, not an application callback. Use get() for input fields. */
21
22
  export declare class FlowExpression<T> {
22
23
  readonly ast: Ast;
23
- private readonly valueType;
24
+ protected readonly [valueTypeBrand]: T;
24
25
  constructor(ast: Ast, owner?: object);
25
26
  get<K extends keyof T & (string | number)>(key: K): FlowExpression<T[K]>;
26
27
  eq(value: T | FlowExpression<T>): FlowExpression<boolean>;
package/lib/src/JevDrawer.js CHANGED
@@ -50,10 +50,8 @@ export function JevDrawer({ children, open, onOpenChange, }) {
50
50
  }, [open, root]);
51
51
  useEffect(() => {
52
52
  const host = document.createElement("jev-devtools-root");
53
- // The host is the only element exposed to page selectors. The overlay itself
54
- // lives in the shadow tree, with its own typography and component styles.
55
- host.style.cssText =
56
- "all: initial !important; position: fixed !important; inset: 0 !important; pointer-events: none !important; z-index: 2147483000 !important;";
53
+ // The shadow stylesheet resets the exposed host through :host(), keeping
54
+ // page styles out without an expanded inline reset on the host element.
57
55
  const shadow = host.attachShadow({ mode: "open" });
58
56
  const style = document.createElement("style");
59
57
  style.textContent = inspectorStyles;
package/lib/src/inspector-styles.js CHANGED
@@ -1 +1 @@
1
- export const inspectorStyles = ".jev-devtools {\n all: initial;\n display: block;\n direction: ltr;\n unicode-bidi: isolate;\n pointer-events: auto;\n color-scheme: dark;\n font:\n 12px system-ui,\n sans-serif;\n color: #eee8ed;\n line-height: 1.5;\n}\n.jev-devtools,\n.jev-devtools * {\n box-sizing: border-box;\n}\n.jev-devtools button,\n.jev-devtools input,\n.jev-devtools select,\n.jev-devtools textarea {\n font: inherit;\n color: inherit;\n border: 1px solid #3b303d;\n border-radius: 5px;\n background: #17121b;\n}\n.jev-devtools button {\n padding: 7px 11px;\n cursor: pointer;\n}\n.jev-devtools button:disabled {\n opacity: 0.45;\n cursor: default;\n}\n.jev-devtools input,\n.jev-devtools select {\n padding: 8px;\n width: 100%;\n}\n.jev-devtools button:hover:not(:disabled) {\n border-color: #e551ba;\n}\n.jev-devtools :is(button, input, select, textarea, summary):focus-visible {\n outline: 2px solid #e551ba;\n outline-offset: 3px;\n}\n.jev-devtools .eyebrow {\n font-size: 10px;\n letter-spacing: 0.12em;\n color: #bc9db5;\n text-transform: uppercase;\n}\n.jev-devtools .jev-inspector {\n height: 100%;\n display: flex;\n color: #eee8ed;\n background: #0d0a0f;\n font:\n 12px \"DM Sans\",\n sans-serif;\n min-height: 0;\n overflow: hidden;\n}\n.jev-devtools .jev-inspector h2 {\n font-size: 15px;\n margin: 0;\n font-weight: 600;\n}\n.jev-devtools .jev-inspector h3 {\n font-size: 13px;\n margin: 0 0 8px;\n}\n.jev-devtools .jev-inspector code,\n.jev-devtools .jev-inspector pre {\n font:\n 11px \"JetBrains Mono\",\n monospace;\n}\n.jev-devtools .jev-inspector pre {\n line-height: 1.7;\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n max-height: 460px;\n overflow: auto;\n background: #100d13;\n padding: 16px;\n border: 1px solid #2e2533;\n border-radius: 5px;\n}\n.jev-devtools .jev-inspector .muted {\n color: #a89bac;\n font-size: 11px;\n line-height: 1.6;\n}\n.jev-devtools .request-list {\n flex: 0 0 300px;\n border-right: 1px solid #302634;\n display: flex;\n flex-direction: column;\n min-height: 0;\n}\n.jev-devtools .request-list > header {\n padding: 17px 14px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.jev-devtools .request-list h2 span {\n font-size: 11px;\n color: #b796ad;\n margin-left: 5px;\n}\n.jev-devtools .request-list button {\n font-size: 11px;\n}\n.jev-devtools .list-filters {\n display: flex;\n gap: 7px;\n padding: 0 12px 12px;\n}\n.jev-devtools .list-filters input {\n min-width: 0;\n}\n.jev-devtools .list-filters select {\n width: 86px;\n font-size: 11px;\n}\n.jev-devtools .request-items {\n overflow: auto;\n flex: 1;\n}\n.jev-devtools .request-row {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n text-align: left;\n border: 0;\n border-top: 1px solid #251d2a;\n border-radius: 0;\n background: transparent;\n padding: 16px 12px;\n}\n.jev-devtools .request-row.selected {\n background: #251423;\n box-shadow: inset 2px 0 #e551ba;\n}\n.jev-devtools .request-row strong {\n display: block;\n font-size: 12px;\n font-weight: 500;\n}\n.jev-devtools .request-row small {\n display: block;\n font-size: 10px;\n color: #a99aac;\n margin-top: 6px;\n}\n.jev-devtools .row-status {\n font-size: 9px;\n color: #ad9bb0;\n margin-left: auto;\n}\n.jev-devtools .status-dot {\n width: 6px;\n height: 6px;\n display: inline-block;\n border-radius: 50%;\n background: #b09ab7;\n flex-shrink: 0;\n}\n.jev-devtools .status-dot.success {\n background: #b3c79c;\n}\n.jev-devtools .status-dot.pending {\n background: #e551ba;\n}\n.jev-devtools .status-dot.error {\n background: #ee8e85;\n}\n.jev-devtools .request-list footer {\n padding: 12px;\n color: #9e8ea5;\n border-top: 1px solid #302634;\n font-size: 10px;\n display: flex;\n gap: 7px;\n}\n.jev-devtools .request-detail {\n flex: 1;\n min-width: 0;\n min-height: 0;\n display: flex;\n flex-direction: column;\n}\n.jev-devtools .detail-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n padding: 18px 24px 10px;\n}\n.jev-devtools .detail-header h2 {\n margin-top: 6px;\n}\n.jev-devtools .metrics {\n display: flex;\n gap: 24px;\n font:\n 12px \"JetBrains Mono\",\n monospace;\n white-space: nowrap;\n}\n.jev-devtools .metrics small {\n display: block;\n font:\n 9px \"DM Sans\",\n sans-serif;\n color: #97879f;\n margin-top: 6px;\n}\n.jev-devtools .detail-meta {\n display: flex;\n gap: 20px;\n flex-wrap: wrap;\n padding: 0 24px 14px;\n color: #a08aa5;\n}\n.jev-devtools .detail-meta code {\n font-size: 10px;\n}\n.jev-devtools .detail-tabs {\n display: flex;\n gap: 20px;\n border-bottom: 1px solid #302634;\n padding: 0 24px;\n}\n.jev-devtools .detail-tabs button {\n border: 0;\n border-radius: 0;\n background: none;\n padding: 10px 0;\n color: #a89bac;\n font-size: 11px;\n}\n.jev-devtools .detail-tabs button[aria-pressed=\"true\"] {\n box-shadow: inset 0 -2px #e551ba;\n color: #f5c1e6;\n}\n.jev-devtools .detail-body {\n overflow: auto;\n flex: 1;\n min-height: 0;\n padding: 16px 24px 28px;\n background-image: radial-gradient(#342337 0.6px, transparent 0.6px);\n background-size: 16px 16px;\n}\n.jev-devtools .request-flow {\n display: flex;\n align-items: center;\n gap: 40px;\n padding: 14px 0 20px;\n}\n.jev-devtools .state-node {\n position: relative;\n flex: 0 0 160px;\n border: 1px solid #e551ba;\n padding: 20px 15px;\n background: #1f1320;\n border-radius: 6px;\n}\n.jev-devtools .state-node h3 {\n margin-top: 12px;\n}\n.jev-devtools .state-node p {\n color: #b69db3;\n line-height: 1.5;\n}\n.jev-devtools .state-node code {\n font-size: 10px;\n}\n.jev-devtools .state-node:after {\n content: \"\";\n position: absolute;\n left: 100%;\n top: 50%;\n width: 20px;\n border-top: 1px solid #7f416d;\n}\n.jev-devtools .question-branches {\n border-left: 1px solid #7f416d;\n padding-left: 20px;\n display: grid;\n grid-template-columns: repeat(3, minmax(160px, 1fr));\n gap: 12px;\n flex: 1;\n position: relative;\n}\n.jev-devtools .question-node {\n position: relative;\n border: 1px solid #75516c;\n border-radius: 6px;\n padding: 15px;\n background: #110d14;\n min-width: 0;\n}\n.jev-devtools .question-node:before {\n content: \"\";\n position: absolute;\n right: 100%;\n top: 50%;\n width: 21px;\n border-top: 1px solid #7f416d;\n}\n.jev-devtools .question-branches .question-node:not(:first-child):before {\n display: none;\n}\n.jev-devtools .question-node header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n}\n.jev-devtools .question-node header h3 {\n margin: 0;\n overflow-wrap: anywhere;\n}\n.jev-devtools .type {\n font:\n 9px \"JetBrains Mono\",\n monospace;\n color: #e59acc;\n border: 1px solid #5e3654;\n border-radius: 3px;\n padding: 3px 5px;\n}\n.jev-devtools .instructions {\n font-size: 11px;\n color: #b8a6bc;\n line-height: 1.5;\n}\n.jev-devtools .answer-value {\n display: block;\n font-size: 20px;\n font-weight: 500;\n margin: 15px 0;\n color: #f0c7e5;\n}\n.jev-devtools .answer-value small {\n font-size: 10px;\n color: #b5a1ba;\n}\n.jev-devtools .probability {\n margin: 10px 0;\n font-size: 10px;\n}\n.jev-devtools .probability > div:first-child {\n display: flex;\n justify-content: space-between;\n gap: 5px;\n margin-bottom: 5px;\n}\n.jev-devtools .probability b {\n font-weight: 400;\n color: #d8abc9;\n}\n.jev-devtools .bar {\n height: 4px;\n background: #302033;\n border-radius: 2px;\n overflow: hidden;\n}\n.jev-devtools .bar i {\n display: block;\n height: 100%;\n background: #e551ba;\n}\n.jev-devtools .confidence {\n font-size: 10px;\n color: #a68cac;\n border-top: 1px solid #302634;\n padding-top: 10px;\n display: flex;\n justify-content: space-between;\n}\n.jev-devtools .confidence b {\n color: #d1bad2;\n font-weight: 400;\n}\n.jev-devtools details {\n margin-top: 12px;\n font-size: 10px;\n color: #b7a0bd;\n}\n.jev-devtools summary {\n cursor: pointer;\n}\n.jev-devtools .standalone {\n margin-bottom: 14px;\n max-width: 750px;\n}\n.jev-devtools .standalone:before {\n display: none;\n}\n.jev-devtools .standalone .answer {\n max-width: 450px;\n}\n.jev-devtools .box-preview {\n position: relative;\n margin-top: 14px;\n min-height: 80px;\n background: #19121c;\n}\n.jev-devtools .box-preview img {\n width: 100%;\n display: block;\n}\n.jev-devtools .bounding-box {\n position: absolute;\n border: 1.5px solid #e551ba;\n background: #e551ba15;\n}\n.jev-devtools .coordinates {\n display: block;\n font-size: 9px !important;\n line-height: 1.5;\n margin-top: 8px;\n color: #ac93b0;\n}\n.jev-devtools .context-image {\n max-width: 400px;\n width: 100%;\n border: 1px solid #75516c;\n border-radius: 6px;\n}\n.jev-devtools .empty {\n padding: 20px;\n color: #a294a8;\n line-height: 1.7;\n}\n.jev-devtools .empty-detail {\n margin: auto;\n padding: 40px;\n text-align: center;\n color: #b2a0ba;\n}\n.jev-devtools .empty-symbol {\n font-size: 36px;\n color: #e551ba;\n display: block;\n margin-bottom: 20px;\n}\n.jev-devtools .empty-detail p {\n font-size: 12px;\n line-height: 1.8;\n}\n.jev-devtools .error-banner {\n border: 1px solid #874b50;\n background: #31191e;\n padding: 12px;\n line-height: 1.5;\n margin-bottom: 16px;\n}\n.jev-devtools .warning {\n color: #e2b97d;\n}\n.jev-devtools .jev-inspector table {\n border-collapse: collapse;\n width: 100%;\n text-align: left;\n}\n.jev-devtools .jev-inspector th,\n.jev-devtools .jev-inspector td {\n border-bottom: 1px solid #302634;\n padding: 14px;\n}\n.jev-devtools .flow-dot {\n display: none;\n}\n.jev-devtools .pending .flow-dot {\n display: block;\n position: absolute;\n right: -23px;\n top: calc(50% - 3px);\n width: 6px;\n height: 6px;\n background: #e551ba;\n border-radius: 50%;\n animation: jev-inspector-pulse 1s infinite;\n}\n@keyframes jev-inspector-pulse {\n 50% {\n opacity: 0.2;\n transform: scale(0.7);\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .jev-devtools .pending .flow-dot {\n animation: none;\n }\n}\n@media (max-width: 1100px) {\n .jev-devtools .question-branches {\n grid-template-columns: 1fr;\n }\n .jev-devtools .question-branches .question-node:not(:first-child):before {\n display: block;\n }\n .jev-devtools .request-flow {\n align-items: flex-start;\n }\n .jev-devtools .state-node {\n margin-top: 45px;\n }\n .jev-devtools .metrics {\n gap: 12px;\n }\n .jev-devtools .request-list {\n flex-basis: 250px;\n }\n}\n@media (max-width: 700px) {\n .jev-devtools .jev-inspector {\n flex-direction: column;\n }\n .jev-devtools .request-list {\n flex-basis: 140px;\n flex-shrink: 0;\n border-right: 0;\n border-bottom: 1px solid #302634;\n }\n .jev-devtools .request-list > header {\n padding: 6px 12px;\n }\n .jev-devtools .request-list footer {\n display: none;\n }\n .jev-devtools .list-filters {\n padding-bottom: 6px;\n }\n .jev-devtools .request-items {\n display: flex;\n }\n .jev-devtools .request-row {\n min-width: 240px;\n padding: 8px 12px;\n }\n .jev-devtools .request-detail {\n min-height: 0;\n }\n .jev-devtools .detail-header {\n padding: 12px;\n }\n .jev-devtools .detail-meta,\n .jev-devtools .detail-tabs {\n padding-left: 12px;\n padding-right: 12px;\n }\n .jev-devtools .detail-body {\n padding: 12px;\n }\n .jev-devtools .metrics {\n display: none;\n }\n .jev-devtools .state-node {\n flex-basis: 115px;\n padding: 12px;\n }\n .jev-devtools .request-flow {\n gap: 25px;\n }\n .jev-devtools .state-node:after {\n width: 12px;\n }\n .jev-devtools .question-branches {\n padding-left: 12px;\n }\n .jev-devtools .question-node:before {\n width: 13px;\n }\n .jev-devtools .question-node {\n padding: 12px;\n }\n}\n\n.jev-devtools .request-flow {\n flex-direction: column;\n align-items: stretch;\n gap: 24px;\n}\n.jev-devtools .state-node {\n flex: auto;\n width: fit-content;\n align-self: center;\n padding: 12px 24px;\n text-align: center;\n margin: 0;\n}\n.jev-devtools .state-node h3 {\n display: inline-block;\n margin: 0 12px;\n}\n.jev-devtools .state-node p {\n display: inline-block;\n margin: 0 12px 0 0;\n font-size: 11px;\n}\n.jev-devtools .state-node .eyebrow {\n display: none;\n}\n.jev-devtools .state-node:after {\n left: 50%;\n top: 100%;\n width: 0;\n height: 24px;\n border-top: 0;\n border-left: 1px solid #7f416d;\n}\n.jev-devtools .question-branches {\n border-left: 0;\n border-top: 1px solid #7f416d;\n padding: 20px 0 0;\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n}\n.jev-devtools .question-node:before,\n.jev-devtools .question-branches .question-node:not(:first-child):before {\n display: block;\n right: auto;\n left: 50%;\n top: -21px;\n width: 0;\n height: 20px;\n border-top: 0;\n border-left: 1px solid #7f416d;\n}\n.jev-devtools .standalone:before {\n display: none;\n}\n.jev-devtools .flow-caption {\n margin-top: 0;\n}\n.jev-devtools .pending .flow-dot {\n right: auto;\n left: calc(50% - 3px);\n top: calc(100% + 10px);\n}\n@media (max-width: 900px) {\n .jev-devtools .question-branches {\n grid-template-columns: 1fr;\n }\n .jev-devtools .question-node:before,\n .jev-devtools .question-branches .question-node:not(:first-child):before {\n height: 12px;\n top: -13px;\n }\n .jev-devtools .question-branches .question-node:first-child:before {\n height: 20px;\n top: -21px;\n }\n .jev-devtools .state-node {\n padding: 10px;\n }\n .jev-devtools .state-node p {\n display: block;\n margin: 6px 0;\n }\n .jev-devtools .state-node h3 {\n font-size: 12px;\n }\n}\n\n.jev-devtools.jev-drawer {\n margin: 0;\n padding: 0;\n position: fixed;\n z-index: 1000;\n inset: auto 0 0;\n display: flex;\n flex-direction: column;\n background: #0d0a0f;\n color: #eee8ed;\n border-top: 1px solid #604058;\n box-shadow: 0 -12px 48px #0005;\n font:\n 12px \"DM Sans\",\n sans-serif;\n}\n.jev-devtools.jev-drawer[hidden],\n.jev-devtools.jev-drawer-trigger[hidden] {\n display: none;\n}\n.jev-devtools .jev-drawer-resize {\n position: absolute;\n z-index: 1;\n top: -6px;\n width: 100%;\n height: 12px;\n cursor: ns-resize;\n touch-action: none;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.jev-devtools .jev-drawer-resize span {\n width: 42px;\n height: 3px;\n border-radius: 3px;\n background: #79506f;\n}\n.jev-devtools .jev-drawer-resize:hover span,\n.jev-devtools .jev-drawer-resize:focus-visible span {\n background: #e551ba;\n}\n.jev-devtools .jev-drawer-resize:focus-visible {\n outline: 2px solid #e551ba;\n outline-offset: -2px;\n}\n.jev-devtools .jev-drawer-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex: 0 0 46px;\n padding: 0 16px;\n border-bottom: 1px solid #302634;\n}\n.jev-devtools .jev-drawer-header strong {\n display: flex;\n align-items: center;\n gap: 9px;\n font-weight: 600;\n}\n.jev-devtools .jev-mark {\n color: #e551ba;\n font-size: 21px;\n}\n.jev-devtools .jev-drawer-header > div {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n.jev-devtools .jev-drawer-header button {\n background: transparent;\n border-color: transparent;\n font-size: 11px;\n color: #c4afc8;\n}\n.jev-devtools .jev-drawer-header .jev-drawer-close {\n font-size: 22px;\n line-height: 1;\n padding: 4px 8px;\n}\n.jev-devtools .jev-drawer-content {\n flex: 1;\n min-height: 0;\n overflow: hidden;\n}\n.jev-devtools.jev-drawer-trigger {\n position: fixed;\n bottom: 18px;\n right: 18px;\n z-index: 1000;\n display: flex;\n align-items: center;\n gap: 9px;\n padding: 10px 16px;\n border: 1px solid #a24487;\n border-radius: 8px;\n cursor: pointer;\n background: #211321;\n color: #f1cbe6;\n font:\n 600 13px \"DM Sans\",\n sans-serif;\n box-shadow: 0 4px 20px #0005;\n}\n.jev-devtools.jev-drawer-trigger span {\n color: #e551ba;\n font-size: 20px;\n}\n/* Baseline cards and authored left-to-right composition from the lab's Jev presets. */\n.jev-devtools .detail-body.detail-body-flow {\n display: flex;\n padding: 0;\n overflow: hidden;\n}\n.jev-devtools .lab-flow {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n min-height: 0;\n}\n.jev-devtools .lab-flow-toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n flex-shrink: 0;\n padding: 12px 16px;\n flex-wrap: wrap;\n}\n.jev-devtools .lab-flow-toolbar label {\n display: flex;\n gap: 10px;\n align-items: center;\n font-size: 11px;\n min-width: 0;\n}\n.jev-devtools .lab-flow-toolbar select {\n width: auto;\n max-width: 240px;\n font-size: 11px;\n}\n.jev-devtools .lab-flow-toolbar > div {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n.jev-devtools .lab-flow-toolbar button {\n font-size: 11px;\n}\n.jev-devtools .lab-flow-toolbar output {\n font-size: 11px;\n min-width: 35px;\n text-align: center;\n}\n.jev-devtools .lab-flow-viewport {\n position: relative;\n flex: 1;\n min-height: 100px;\n overflow: hidden;\n background-color: #0d0a0f;\n background-image: radial-gradient(\n rgb(70 52 73 / var(--diagram-grid-opacity, 1))\n calc(0.8px * var(--diagram-grid-weight, 1)),\n transparent calc(0.8px * var(--diagram-grid-weight, 1))\n );\n background-size: 20px 20px;\n border-block: 1px solid #302634;\n cursor: grab;\n touch-action: none;\n user-select: none;\n overscroll-behavior: contain;\n}\n.jev-devtools .lab-flow-viewport[data-panning] {\n cursor: grabbing;\n}\n.jev-devtools .lab-flow-viewport:focus-visible {\n outline: 2px solid #e551ba;\n outline-offset: -2px;\n}\n.jev-devtools .lab-flow-caption {\n flex-shrink: 0;\n padding: 8px 16px;\n margin: 0;\n}\n.jev-devtools .lab-gesture-hint {\n display: block;\n color: #c6a7bd;\n}\n.jev-devtools .lab-flow-canvas {\n position: absolute;\n inset: 0 auto auto 0;\n transform-origin: top left;\n will-change: transform;\n font-family: system-ui, sans-serif;\n color: #f5f3f6;\n}\n.jev-devtools .lab-connections {\n position: absolute;\n inset: 0;\n overflow: visible;\n}\n.jev-devtools .lab-connections path {\n fill: none;\n stroke: #645a68;\n stroke-width: 1;\n}\n.jev-devtools .lab-connections path.active {\n stroke: #968592;\n}\n.jev-devtools .lab-connections text {\n fill: #b7b1bc;\n font:\n 12px ui-monospace,\n monospace;\n}\n.jev-devtools .lab-flow-dot {\n fill: #e551ba;\n}\n.jev-devtools .lab-card {\n position: absolute;\n border: 1.3px solid #f5f3f6;\n border-radius: 14px;\n padding: 16px;\n background: #0d0a0f;\n overflow: hidden;\n}\n.jev-devtools .lab-eyebrow {\n display: block;\n color: #e551ba;\n font:\n 500 10px ui-monospace,\n monospace;\n letter-spacing: 1px;\n margin: 0 0 7px;\n}\n.jev-devtools .lab-card h3 {\n font-size: 16px;\n font-weight: 600;\n line-height: 1.3;\n letter-spacing: -0.2px;\n margin: 0 0 10px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.jev-devtools .lab-card p {\n font-size: 13px;\n line-height: 1.4;\n margin: 10px 0;\n}\n.jev-devtools .lab-copy {\n display: -webkit-box;\n -webkit-line-clamp: 5;\n -webkit-box-orient: vertical;\n overflow: hidden;\n overflow-wrap: anywhere;\n}\n.jev-devtools .lab-probability {\n margin: 17px 0;\n}\n.jev-devtools .lab-probability > div:first-child {\n display: flex;\n justify-content: space-between;\n gap: 10px;\n margin-bottom: 9px;\n font-size: 15px;\n}\n.jev-devtools .lab-probability span {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.jev-devtools .lab-probability code {\n font:\n 13px ui-monospace,\n monospace;\n}\n.jev-devtools .lab-track {\n height: 7px;\n border-radius: 4px;\n background: #f5f3f61a;\n overflow: hidden;\n}\n.jev-devtools .lab-track i {\n display: block;\n height: 100%;\n border-radius: 4px;\n background: #e551ba;\n}\n.jev-devtools .lab-track i.lab-alternative {\n opacity: 0.35;\n}\n.jev-devtools .lab-card .lab-result {\n font-size: 14px;\n margin-top: 24px;\n}\n.jev-devtools .lab-card .lab-small {\n font-size: 12px;\n color: #b7b1bc;\n margin-top: 20px;\n}\n.jev-devtools .lab-idle {\n opacity: 0.65;\n}\n.jev-devtools .lab-scale {\n position: relative;\n margin-top: 18px;\n border-top: 1px solid #b7b1bc;\n display: flex;\n justify-content: space-between;\n padding-top: 9px;\n}\n.jev-devtools .lab-scale > span {\n position: absolute;\n top: -5px;\n width: 9px;\n height: 9px;\n border-radius: 50%;\n background: #e551ba;\n transform: translateX(-50%);\n}\n.jev-devtools .lab-big {\n display: block;\n font-size: 36px;\n font-weight: 500;\n margin-top: 26px;\n}\n.jev-devtools .lab-endpoints {\n display: flex;\n justify-content: space-between;\n font-size: 12px;\n color: #b7b1bc;\n margin-top: 10px;\n}\n.jev-devtools .lab-image {\n position: relative;\n}\n.jev-devtools .lab-image img {\n display: block;\n width: 100%;\n}\n.jev-devtools .lab-box {\n position: absolute;\n border: 1.5px solid #e551ba;\n background: #e551ba15;\n}\n.jev-devtools .lab-source-image {\n width: 100%;\n max-height: 105px;\n object-fit: contain;\n}\n.jev-devtools .lab-coordinates {\n font-family: ui-monospace, monospace;\n}\n@media (prefers-reduced-motion: reduce) {\n .jev-devtools .lab-flow-dot {\n display: none;\n }\n}\n/* The public TypeSafe mark travels with the package, independent of host assets. */\n.jev-devtools .typesafe-mark {\n display: inline-block;\n flex: 0 0 23px;\n width: 23px;\n height: 32px;\n overflow: hidden;\n line-height: 0;\n}\n.jev-devtools .typesafe-mark img {\n display: block;\n height: 32px;\n width: auto;\n max-width: none;\n}\n\n.jev-devtools .detail-body-questions {\n display: flex;\n flex-direction: column;\n overflow: auto;\n}\n.jev-devtools .questions-list {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 180px;\n}\n.jev-devtools .questions-navigation {\n display: flex;\n align-items: end;\n gap: 8px;\n flex-wrap: wrap;\n flex-shrink: 0;\n}\n.jev-devtools .questions-navigation label {\n display: flex;\n align-items: center;\n gap: 8px;\n white-space: nowrap;\n flex: 1;\n min-width: 240px;\n max-width: 480px;\n font-size: 11px;\n color: #bc9db5;\n}\n.jev-devtools .questions-navigation select {\n display: block;\n min-width: 0;\n}\n.jev-devtools .questions-navigation > span {\n align-self: center;\n color: #a89bac;\n}\n.jev-devtools .questions-help {\n margin: 8px 0;\n flex-shrink: 0;\n}\n.jev-devtools .questions-viewport {\n flex: 1;\n min-height: 0;\n overflow: auto;\n overflow-anchor: none;\n scrollbar-gutter: stable;\n padding: 3px;\n}\n.jev-devtools .questions-spacer {\n position: relative;\n width: 100%;\n}\n.jev-devtools .questions-row {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n padding-bottom: 14px;\n}\n.jev-devtools .questions-row .standalone {\n margin-bottom: 0;\n}\n.jev-devtools .questions-viewport:focus-visible,\n.jev-devtools .questions-row article:focus-visible {\n outline: 2px solid #e551ba;\n outline-offset: -2px;\n}\n\n/* Reserve measured card geometry while rapid scrolling uses a light preview. */\n.jev-devtools .questions-row[data-preview=\"true\"] article {\n height: 100%;\n}\n.jev-devtools .question-scroll-preview p {\n margin-top: 16px;\n}\n\n/* The full distribution stays at reading size, outside the zoomable canvas. */\n.jev-devtools .lab-flow-viewport[hidden] {\n display: none;\n}\n.jev-devtools .lab-choice-browser {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 0;\n padding: 8px 16px;\n gap: 10px;\n}\n.jev-devtools .lab-choice-controls {\n display: flex;\n gap: 12px;\n align-items: end;\n flex-wrap: wrap;\n font-size: 12px;\n}\n.jev-devtools .lab-choice-controls label {\n display: grid;\n gap: 5px;\n}\n.jev-devtools .lab-choice-table-scroll {\n overflow: auto;\n overscroll-behavior: contain;\n min-height: 0;\n flex: 1;\n}\n.jev-devtools .lab-choice-browser table {\n width: 100%;\n border-collapse: collapse;\n font-size: 13px;\n}\n.jev-devtools .lab-choice-browser caption {\n text-align: left;\n padding: 8px 0;\n color: #aaa0af;\n}\n.jev-devtools .lab-choice-browser th,\n.jev-devtools .lab-choice-browser td {\n padding: 9px 12px;\n border-bottom: 1px solid #302634;\n text-align: left;\n}\n.jev-devtools .lab-choice-browser th {\n overflow-wrap: anywhere;\n max-width: 320px;\n}\n.jev-devtools .lab-choice-browser td {\n font-variant-numeric: tabular-nums;\n}\n.jev-devtools .lab-choice-browser code {\n white-space: normal;\n overflow-wrap: anywhere;\n}\n.jev-devtools .lab-choice-returned {\n display: block;\n font-size: 10px;\n color: #e551ba;\n}\n.jev-devtools .lab-choice-pagination {\n display: flex;\n align-items: center;\n gap: 12px;\n justify-content: space-between;\n font-size: 12px;\n}\n.jev-devtools .lab-choice-remainder button {\n margin-top: 7px;\n}\n\n.jev-devtools .lab-flow-compact .lab-output {\n padding: 12px;\n height: 104px;\n}\n.jev-devtools .lab-flow-compact .lab-output .lab-eyebrow {\n margin-bottom: 6px;\n}\n.jev-devtools .lab-flow-compact .lab-output h3 {\n font-size: 16px;\n margin-bottom: 8px;\n}\n.jev-devtools .lab-flow-compact .lab-output p {\n font-size: 12px;\n margin: 4px 0;\n}\n.jev-devtools .lab-flow-compact .lab-result {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n overflow-wrap: anywhere;\n}\n.jev-devtools .lab-choice-remainder {\n padding: 12px;\n}\n.jev-devtools .lab-choice-remainder .lab-small {\n margin: 8px 0 0;\n font-size: 11px;\n}\n\n.jev-devtools .detail-body.detail-body-flow {\n flex-direction: column;\n}\n.jev-devtools .detail-body-flow > .warning,\n.jev-devtools .detail-body-flow > .error-banner {\n flex-shrink: 0;\n margin: 6px 16px;\n}\n.jev-devtools .lab-choice-browser {\n overflow: auto;\n}\n.jev-devtools .lab-choice-table-scroll {\n flex: 1 0 110px;\n}\n\n/* Only freshly revealed branches enter; pan/zoom remains on the canvas. */\n.jev-devtools .lab-card-enter {\n animation: jev-card-enter 280ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;\n}\n.jev-devtools .lab-branch-enter {\n stroke-dasharray: 1;\n animation: jev-branch-enter 280ms ease-out backwards;\n}\n@keyframes jev-card-enter {\n from {\n opacity: 0;\n transform: translateX(-16px) scale(0.96);\n }\n}\n@keyframes jev-branch-enter {\n from {\n opacity: 0;\n stroke-dashoffset: 1;\n }\n to {\n opacity: 1;\n stroke-dashoffset: 0;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .jev-devtools .lab-card-enter,\n .jev-devtools .lab-branch-enter {\n animation: none;\n }\n}\n\n/* Connected requests share one camera and one opt-in full request detail. */\n.whole-flow {\n min-width: 0;\n overflow: hidden;\n}\n.whole-flow > .detail-header,\n.whole-flow > .lab-flow-toolbar {\n flex-shrink: 0;\n}\n.flow-workspace {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 0;\n overflow: hidden;\n}\n.flow-details-panel {\n flex: none;\n min-width: 0;\n background: #130f17;\n border-top: 1px solid #342a38;\n}\n.flow-details-bar {\n display: flex;\n align-items: center;\n gap: 12px;\n height: 36px;\n padding: 0 12px;\n}\n.jev-devtools .flow-details-bar button {\n flex: none;\n padding: 4px 8px;\n font-size: 11px;\n}\n.flow-details-bar > span {\n color: #b5a6bc;\n font-size: 11px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.flow-details-body {\n overflow: auto;\n overscroll-behavior: contain;\n scrollbar-gutter: stable;\n}\n.flow-details-resize {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 8px;\n cursor: ns-resize;\n touch-action: none;\n user-select: none;\n}\n.flow-details-resize span {\n width: 40px;\n height: 2px;\n border-radius: 2px;\n background: #6c5874;\n}\n.flow-details-resize:hover,\n.flow-details-resize:focus-visible {\n background: #392239;\n outline: 1px solid #e551ba;\n outline-offset: -1px;\n}\n.flow-overview-viewport {\n position: relative;\n min-height: 0;\n flex: 1 1 0;\n overflow: hidden;\n touch-action: none;\n cursor: grab;\n background-image: radial-gradient(\n rgb(83 67 87 / var(--diagram-grid-opacity, 1))\n calc(1px * var(--diagram-grid-weight, 1)),\n transparent calc(1px * var(--diagram-grid-weight, 1))\n );\n background-size: 20px 20px;\n}\n.flow-overview-viewport[data-panning] {\n cursor: grabbing;\n}\n.flow-overview-canvas {\n position: absolute;\n transform-origin: 0 0;\n}\n.flow-connections {\n position: absolute;\n inset: 0;\n overflow: visible;\n color: #c0b8c4;\n pointer-events: none;\n}\n.flow-step {\n position: absolute;\n width: 220px;\n min-height: 172px;\n overflow-wrap: anywhere;\n display: flex;\n flex-direction: column;\n gap: 8px;\n text-align: left;\n padding: 14px;\n border: 1px solid #736476;\n border-radius: 12px;\n background: #151017;\n color: inherit;\n}\n.flow-step strong {\n white-space: normal;\n width: 100%;\n}\n.flow-step-description {\n overflow-wrap: anywhere;\n font-size: 12px;\n}\n.flow-step.flow-request {\n display: block;\n padding: 0;\n background: #0d0a0f;\n /* Skip offscreen paint/layout while preserving each question/expansion state. */\n content-visibility: auto;\n contain-intrinsic-size: auto 640px;\n}\n.flow-request-heading {\n width: 100%;\n min-height: 64px;\n gap: 20px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n text-align: left;\n padding: 12px 20px;\n border: 0;\n border-bottom: 1px solid #342a38;\n border-radius: 12px 12px 0 0;\n background: transparent;\n color: inherit;\n}\n.flow-request-heading .eyebrow {\n display: block;\n margin-bottom: 4px;\n}\n.jev-devtools .lab-flow-embedded {\n width: 1120px;\n display: block;\n}\n.jev-devtools .lab-flow-surface {\n position: relative;\n width: 1120px;\n}\n.jev-devtools .lab-flow-surface[hidden] {\n display: none;\n}\n.jev-devtools .lab-flow-embedded .lab-flow-canvas {\n will-change: auto;\n}\n.jev-devtools .lab-flow-embedded .lab-choice-browser {\n height: 520px;\n}\n.flow-step.selected {\n outline: 2px solid #e551ba;\n outline-offset: 3px;\n}\n.flow-step[data-status=\"completed\"] {\n border-color: #e551ba;\n}\n.flow-step[data-status=\"running\"] {\n border-color: #e551ba;\n background: #2b1728;\n}\n.flow-step[data-status=\"untaken\"],\n.flow-step[data-status=\"blocked\"] {\n color: #948797;\n border-color: #403746;\n background: #151017;\n}\n.flow-step[data-status=\"error\"] {\n border-color: #f17c78;\n}\n.flow-step[data-status=\"cancelled\"] {\n border-style: dashed;\n}\n.flow-selection {\n padding: 12px 20px;\n border-top: 1px solid #342a38;\n}\n.flow-selection p {\n margin: 6px 0;\n overflow-wrap: anywhere;\n}\n.flow-request-detail {\n min-height: 450px;\n border-top: 1px solid #534357;\n}\n.flow-request-detail > .request-detail {\n min-height: 450px;\n}\n\n.flow-card-heading,\n.flow-card-footer,\n.flow-join-summary,\n.flow-lane {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n width: 100%;\n}\n.flow-card-heading {\n justify-content: flex-start;\n}\n.flow-task .flow-kind-icon {\n border: 1px solid currentColor;\n border-radius: 6px;\n padding: 4px;\n}\n.flow-task-preview {\n display: grid;\n gap: 8px;\n min-width: 0;\n}\n.jev-devtools .flow-task-preview .diagram-content {\n max-height: 280px;\n padding: 8px 10px;\n border: 1px solid #35283b;\n border-radius: 4px;\n background: #100c13;\n}\n.flow-task-preview small {\n color: var(--muted);\n font-size: 11px;\n}\n.flow-task-details {\n display: grid;\n gap: 12px;\n}\n.flow-task-details details {\n min-width: 0;\n}\n.flow-task-details summary {\n cursor: pointer;\n margin-bottom: 8px;\n}\n.flow-task-details .diagram-content {\n max-height: 320px;\n overflow: auto;\n}\n.flow-kind-icon {\n width: 26px;\n height: 26px;\n color: #e551ba;\n flex-shrink: 0;\n}\n.flow-kind-icon svg {\n width: 100%;\n height: 100%;\n}\n.flow-card-heading .eyebrow {\n font-size: 10px;\n}\n.flow-status {\n margin-left: auto;\n font-size: 10px;\n border-radius: 20px;\n padding: 4px 8px;\n background: #342031;\n color: #f0b7e0;\n}\n.flow-step[data-status=\"untaken\"] .flow-status {\n background: #241e28;\n color: #948797;\n}\n.flow-step[data-status=\"untaken\"] .flow-kind-icon {\n color: #948797;\n}\n.flow-card-body > strong {\n white-space: normal;\n font-size: 18px;\n line-height: 1.25;\n overflow-wrap: anywhere;\n}\n.flow-step-description {\n line-height: 1.5;\n color: #b9aebf;\n white-space: pre-wrap;\n}\n.flow-card-footer {\n margin-top: auto;\n padding-top: 10px;\n border-top: 1px solid #342a38;\n font-size: 10px;\n color: #a092a7;\n}\n.flow-card-footer code {\n max-width: 45%;\n white-space: normal;\n overflow-wrap: anywhere;\n}\n.flow-card-footer small {\n text-align: right;\n}\n.flow-join-summary {\n margin-top: 4px;\n font-size: 11px;\n color: #c9b9cd;\n}\n.flow-join-summary > span {\n color: #ef9ed9;\n font-variant-numeric: tabular-nums;\n}\n.flow-lanes {\n display: flex;\n flex-direction: column;\n gap: 4px;\n width: 100%;\n}\n.flow-lane {\n border-radius: 5px;\n background: #211923;\n padding: 6px 8px;\n font-size: 11px;\n min-height: 28px;\n}\n.flow-lane > span {\n min-width: 0;\n overflow-wrap: anywhere;\n}\n.flow-lane > span > span {\n color: #ef9ed9;\n margin-right: 4px;\n}\n.flow-lane small {\n color: #b9aebf;\n}\n.flow-lane-details {\n padding-left: 18px;\n font-size: 12px;\n}\n.flow-request-heading > span:first-child {\n min-width: 0;\n max-width: 80%;\n}\n.flow-request-description {\n display: block;\n white-space: pre-wrap;\n font-size: 12px;\n line-height: 1.5;\n color: #b9aebf;\n margin-top: 5px;\n overflow-wrap: anywhere;\n}\n\n/* Structured context stays within the card; its gestures never move the camera. */\n.jev-devtools .lab-content-card {\n display: flex;\n flex-direction: column;\n padding: 14px;\n}\n.jev-devtools .lab-content-card h3 {\n font-size: 14px;\n margin-bottom: 8px;\n flex-shrink: 0;\n}\n.jev-devtools .lab-content-card .lab-eyebrow {\n font-size: 9px;\n margin-bottom: 5px;\n flex-shrink: 0;\n}\n.jev-devtools .diagram-content {\n min-height: 0;\n flex: 1;\n overflow: auto;\n overscroll-behavior: contain;\n touch-action: pan-y;\n scrollbar-width: thin;\n scrollbar-color: #514256 transparent;\n padding-right: 4px;\n font-size: 12px;\n line-height: 1.5;\n color: #d5cdd9;\n cursor: auto;\n user-select: text;\n}\n.jev-devtools .diagram-content:focus-visible {\n outline: 1px solid #e551ba;\n outline-offset: -1px;\n border-radius: 3px;\n}\n.jev-devtools .diagram-property {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: 8px;\n padding: 5px 0;\n border-bottom: 1px solid #261e2a;\n}\n.jev-devtools .diagram-property-text {\n display: block;\n}\n.jev-devtools .diagram-property-key {\n font:\n 10px/1.5 ui-monospace,\n monospace;\n color: #c8a8c8;\n overflow-wrap: anywhere;\n min-width: 0;\n}\n.jev-devtools .diagram-property-text > .diagram-property-key {\n display: block;\n margin-bottom: 2px;\n}\n.jev-devtools .diagram-text-value {\n display: block;\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n}\n.jev-devtools .diagram-text-preview {\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n.jev-devtools .diagram-value-number {\n color: #a6d6ca;\n font:\n 11px/1.5 ui-monospace,\n monospace;\n font-variant-numeric: tabular-nums;\n overflow-wrap: anywhere;\n}\n.jev-devtools .diagram-value-boolean {\n color: #c4b1ed;\n font:\n 11px/1.5 ui-monospace,\n monospace;\n}\n.jev-devtools .diagram-value-empty {\n color: #9c8ca4;\n font:\n 10px/1.5 ui-monospace,\n monospace;\n}\n.jev-devtools .diagram-property-disclosure {\n width: 100%;\n display: flex;\n align-items: baseline;\n gap: 5px;\n padding: 6px 0;\n border: 0;\n border-bottom: 1px solid #261e2a;\n border-radius: 0;\n background: transparent;\n text-align: left;\n color: inherit;\n}\n.jev-devtools .diagram-property-disclosure:hover {\n background: #211723;\n}\n.jev-devtools .diagram-property-caret {\n color: #ab8aab;\n flex-shrink: 0;\n}\n.jev-devtools .diagram-property-type {\n color: #9c8ca4;\n font:\n 10px/1.5 ui-monospace,\n monospace;\n margin-left: auto;\n flex-shrink: 0;\n}\n.jev-devtools .diagram-property-children {\n margin-left: 4px;\n padding-left: 9px;\n border-left: 1px solid #49324b;\n}\n.jev-devtools .diagram-content-toggle {\n display: block;\n padding: 3px 0;\n border: 0;\n border-radius: 0;\n background: transparent;\n color: #e9a4d7;\n font-size: 10px;\n text-align: left;\n}\n.jev-devtools .diagram-content-toggle:hover {\n color: #ffd9f3;\n text-decoration: underline;\n}\n\n/* Noul is a probability of true; its two outputs carry p and 1-p.\n Keep the fill opaque, with readable text even at zero probability. */\n.jev-devtools .lab-noul-output {\n border-color: rgb(\n 245 243 246 / calc(0.35 + 0.65 * var(--lab-noul-probability, 1))\n );\n}\n.jev-devtools .lab-noul-output > h3,\n.jev-devtools .lab-noul-output > p {\n opacity: calc(0.65 + 0.35 * var(--lab-noul-probability, 1));\n}\n\n.flow-condition-rule {\n display: block;\n padding: 10px 12px;\n border: 1px solid #49324b;\n border-radius: 6px;\n background: #211723;\n width: 100%;\n}\n.flow-condition-label {\n display: block;\n font-size: 10px;\n color: #ba9dbe;\n margin-bottom: 5px;\n}\n.flow-condition-rule code {\n display: block;\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n font:\n 12px/1.6 ui-monospace,\n monospace;\n color: #f2d7eb;\n}\n\n.flow-condition-incoming {\n display: block;\n padding-bottom: 10px;\n margin-bottom: 10px;\n border-bottom: 1px solid #49324b;\n}\n.flow-condition-input {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: 12px;\n font-size: 12px;\n padding: 3px 0;\n}\n.flow-condition-input > span {\n min-width: 0;\n overflow-wrap: anywhere;\n}\n.flow-condition-input > b {\n font-size: 17px;\n font-weight: 600;\n color: #f2d7eb;\n overflow-wrap: anywhere;\n white-space: normal;\n max-width: 65%;\n}\n.flow-input-details {\n font-size: 12px;\n}\n.flow-input-details > div {\n display: flex;\n gap: 16px;\n margin: 6px 0;\n}\n.flow-input-details code {\n color: #a092a7;\n margin-left: 8px;\n}\n.flow-input-details dd {\n margin: 0;\n overflow-wrap: anywhere;\n}\n\n.flow-overview-stack {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 0;\n min-width: 0;\n overflow: hidden;\n}\n.flow-map-progress {\n display: grid;\n gap: 10px;\n font-size: 14px;\n line-height: 1.5;\n}\n.flow-map-progress small {\n color: #b5a6bc;\n}\n\n.jev-devtools .flow-card-body {\n display: flex;\n flex-direction: column;\n gap: 8px;\n width: 100%;\n flex: 1;\n padding: 0;\n border: 0;\n border-radius: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n text-align: left;\n}\n.jev-devtools .flow-card-body:hover {\n background: transparent;\n}\n.flow-collection-controls {\n display: flex;\n align-items: end;\n gap: 10px;\n border-top: 1px solid #49324b;\n margin-top: 4px;\n padding-top: 12px;\n}\n.flow-collection-controls label {\n display: grid;\n gap: 6px;\n flex: 1;\n min-width: 0;\n color: #b9aebf;\n font-size: 11px;\n}\n.jev-devtools .flow-collection-controls select {\n width: 100%;\n min-width: 0;\n}\n.jev-devtools .flow-collection-controls button {\n flex: none;\n color: #efb1df;\n}\n.flow-collection-expansion {\n position: absolute;\n width: max-content;\n}\n.flow-item-frame {\n border: 1px solid #64415d;\n border-radius: 12px;\n background: #100c13;\n overflow: hidden;\n}\n.flow-collection-heading {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 24px;\n padding: 16px 20px;\n border-bottom: 1px solid #49324b;\n background: #1c1220;\n}\n.flow-collection-heading h3 {\n margin: 5px 0;\n font-size: 16px;\n}\n.flow-collection-heading small {\n color: #b9aebf;\n}\n.flow-collection-link text {\n fill: #ce9abd;\n font-size: 12px;\n}\n.flow-item-placeholder {\n width: 600px;\n padding: 24px;\n line-height: 1.6;\n}\n.flow-inline-overview,\n.flow-inline-overview > .whole-flow,\n.flow-inline-overview > .whole-flow > .flow-workspace {\n display: block;\n flex: none;\n}\n.flow-inline-surface {\n position: relative;\n}\n\n.flow-item-content {\n min-width: 0;\n animation: flow-item-enter 240ms cubic-bezier(0.22, 1, 0.36, 1) both;\n}\n.flow-item-forward {\n --flow-item-offset: 28px;\n}\n.flow-item-backward {\n --flow-item-offset: -28px;\n}\n@keyframes flow-item-enter {\n from {\n opacity: 0;\n transform: translateX(var(--flow-item-offset));\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .flow-item-content {\n animation: none;\n }\n}\n.jev-devtools .flow-item-arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n display: grid;\n place-items: center;\n width: 56px;\n height: 56px;\n padding: 12px;\n margin: 0 auto;\n border: 1px solid #64415d;\n border-radius: 6px;\n background: #211623;\n color: #efa7db;\n}\n.jev-devtools .flow-item-arrow:hover:not(:disabled) {\n background: #382035;\n border-color: #e551ba;\n}\n.flow-item-arrow svg {\n width: 28px;\n height: 28px;\n}\n\n.flow-item-previous {\n left: -76px;\n}\n.flow-item-next {\n right: -76px;\n}\n";
1
+ export const inspectorStyles = "/* Important declarations in the inner shadow context beat page-authored host\n styles, including important ones. Keep the reset here instead of expanding\n the all shorthand into hundreds of inline properties on the host element.\n These qualified host selectors are inert in the public document stylesheet. */\n:host(jev-devtools-root) {\n all: initial !important;\n direction: ltr !important;\n unicode-bidi: isolate !important;\n position: fixed !important;\n inset: 0 !important;\n pointer-events: none !important;\n z-index: 2147483000 !important;\n}\n\n:host(jev-devtools-root)::before,\n:host(jev-devtools-root)::after {\n content: none !important;\n display: none !important;\n}\n\n.jev-devtools {\n all: initial;\n /* all does not reset custom properties. Establish our own inherited defaults;\n cameras and probability cards can still set local values below this root. */\n --diagram-grid-opacity: 1;\n --diagram-grid-weight: 1;\n --lab-noul-probability: 1;\n --flow-item-offset: 0px;\n display: block;\n direction: ltr;\n unicode-bidi: isolate;\n pointer-events: auto;\n color-scheme: dark;\n font:\n 12px system-ui,\n sans-serif;\n color: #eee8ed;\n line-height: 1.5;\n}\n.jev-devtools,\n.jev-devtools * {\n box-sizing: border-box;\n}\n.jev-devtools button,\n.jev-devtools input,\n.jev-devtools select {\n font: inherit;\n color: inherit;\n border: 1px solid #3b303d;\n border-radius: 5px;\n background: #17121b;\n}\n.jev-devtools button {\n padding: 7px 11px;\n cursor: pointer;\n}\n.jev-devtools button:disabled {\n opacity: 0.45;\n cursor: default;\n}\n.jev-devtools input,\n.jev-devtools select {\n padding: 8px;\n width: 100%;\n}\n.jev-devtools button:hover:not(:disabled) {\n border-color: #e551ba;\n}\n.jev-devtools :is(button, input, select, summary):focus-visible {\n outline: 2px solid #e551ba;\n outline-offset: 3px;\n}\n.jev-devtools .eyebrow {\n font-size: 10px;\n letter-spacing: 0.12em;\n color: #bc9db5;\n text-transform: uppercase;\n}\n.jev-devtools .jev-inspector {\n height: 100%;\n display: flex;\n color: #eee8ed;\n background: #0d0a0f;\n font:\n 12px \"DM Sans\",\n sans-serif;\n min-height: 0;\n overflow: hidden;\n}\n.jev-devtools .jev-inspector h2 {\n font-size: 15px;\n margin: 0;\n font-weight: 600;\n}\n.jev-devtools .jev-inspector h3 {\n font-size: 13px;\n margin: 0 0 8px;\n}\n.jev-devtools .jev-inspector code,\n.jev-devtools .jev-inspector pre {\n font:\n 11px \"JetBrains Mono\",\n monospace;\n}\n.jev-devtools .jev-inspector pre {\n line-height: 1.7;\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n max-height: 460px;\n overflow: auto;\n background: #100d13;\n padding: 16px;\n border: 1px solid #2e2533;\n border-radius: 5px;\n}\n.jev-devtools .jev-inspector .muted {\n color: #a89bac;\n font-size: 11px;\n line-height: 1.6;\n}\n.jev-devtools .request-list {\n flex: 0 0 300px;\n border-right: 1px solid #302634;\n display: flex;\n flex-direction: column;\n min-height: 0;\n}\n.jev-devtools .request-list > header {\n padding: 17px 14px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.jev-devtools .request-list h2 span {\n font-size: 11px;\n color: #b796ad;\n margin-left: 5px;\n}\n.jev-devtools .request-list button {\n font-size: 11px;\n}\n.jev-devtools .list-filters {\n display: flex;\n gap: 7px;\n padding: 0 12px 12px;\n}\n.jev-devtools .list-filters input {\n min-width: 0;\n}\n.jev-devtools .list-filters select {\n width: 86px;\n font-size: 11px;\n}\n.jev-devtools .request-items {\n overflow: auto;\n flex: 1;\n}\n.jev-devtools .request-row {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n text-align: left;\n border: 0;\n border-top: 1px solid #251d2a;\n border-radius: 0;\n background: transparent;\n padding: 16px 12px;\n}\n.jev-devtools .request-row.selected {\n background: #251423;\n box-shadow: inset 2px 0 #e551ba;\n}\n.jev-devtools .request-row strong {\n display: block;\n font-size: 12px;\n font-weight: 500;\n}\n.jev-devtools .request-row small {\n display: block;\n font-size: 10px;\n color: #a99aac;\n margin-top: 6px;\n}\n.jev-devtools .row-status {\n font-size: 9px;\n color: #ad9bb0;\n margin-left: auto;\n}\n.jev-devtools .status-dot {\n width: 6px;\n height: 6px;\n display: inline-block;\n border-radius: 50%;\n background: #b09ab7;\n flex-shrink: 0;\n}\n.jev-devtools .status-dot.success {\n background: #b3c79c;\n}\n.jev-devtools .status-dot.pending {\n background: #e551ba;\n}\n.jev-devtools .status-dot.error {\n background: #ee8e85;\n}\n.jev-devtools .request-list footer {\n padding: 12px;\n color: #9e8ea5;\n border-top: 1px solid #302634;\n font-size: 10px;\n display: flex;\n gap: 7px;\n}\n.jev-devtools .request-detail {\n flex: 1;\n min-width: 0;\n min-height: 0;\n display: flex;\n flex-direction: column;\n}\n.jev-devtools .detail-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n padding: 18px 24px 10px;\n}\n.jev-devtools .detail-header h2 {\n margin-top: 6px;\n}\n.jev-devtools .metrics {\n display: flex;\n gap: 24px;\n font:\n 12px \"JetBrains Mono\",\n monospace;\n white-space: nowrap;\n}\n.jev-devtools .metrics small {\n display: block;\n font:\n 9px \"DM Sans\",\n sans-serif;\n color: #97879f;\n margin-top: 6px;\n}\n.jev-devtools .detail-meta {\n display: flex;\n gap: 20px;\n flex-wrap: wrap;\n padding: 0 24px 14px;\n color: #a08aa5;\n}\n.jev-devtools .detail-meta code {\n font-size: 10px;\n}\n.jev-devtools .detail-tabs {\n display: flex;\n gap: 20px;\n border-bottom: 1px solid #302634;\n padding: 0 24px;\n}\n.jev-devtools .detail-tabs button {\n border: 0;\n border-radius: 0;\n background: none;\n padding: 10px 0;\n color: #a89bac;\n font-size: 11px;\n}\n.jev-devtools .detail-tabs button[aria-pressed=\"true\"] {\n box-shadow: inset 0 -2px #e551ba;\n color: #f5c1e6;\n}\n.jev-devtools .detail-body {\n overflow: auto;\n flex: 1;\n min-height: 0;\n padding: 16px 24px 28px;\n background-image: radial-gradient(#342337 0.6px, transparent 0.6px);\n background-size: 16px 16px;\n}\n.jev-devtools .question-node {\n position: relative;\n border: 1px solid #75516c;\n border-radius: 6px;\n padding: 15px;\n background: #110d14;\n min-width: 0;\n}\n/* Retain the legacy question connectors and standalone suppression together.\n Remove only after resolving the narrow-screen visual differences in\n https://github.com/diegoag64/jev-devtools/issues/57. */\n.jev-devtools .question-node:before {\n content: \"\";\n position: absolute;\n right: 100%;\n top: 50%;\n width: 21px;\n border-top: 1px solid #7f416d;\n}\n.jev-devtools .question-branches .question-node:not(:first-child):before {\n display: none;\n}\n.jev-devtools .question-node header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n}\n.jev-devtools .question-node header h3 {\n margin: 0;\n overflow-wrap: anywhere;\n}\n.jev-devtools .type {\n font:\n 9px \"JetBrains Mono\",\n monospace;\n color: #e59acc;\n border: 1px solid #5e3654;\n border-radius: 3px;\n padding: 3px 5px;\n}\n.jev-devtools .answer-value {\n display: block;\n font-size: 20px;\n font-weight: 500;\n margin: 15px 0;\n color: #f0c7e5;\n}\n.jev-devtools .answer-value small {\n font-size: 10px;\n color: #b5a1ba;\n}\n.jev-devtools .probability {\n margin: 10px 0;\n font-size: 10px;\n}\n.jev-devtools .probability > div:first-child {\n display: flex;\n justify-content: space-between;\n gap: 5px;\n margin-bottom: 5px;\n}\n.jev-devtools .probability b {\n font-weight: 400;\n color: #d8abc9;\n}\n.jev-devtools .bar {\n height: 4px;\n background: #302033;\n border-radius: 2px;\n overflow: hidden;\n}\n.jev-devtools .bar i {\n display: block;\n height: 100%;\n background: #e551ba;\n}\n.jev-devtools .confidence {\n font-size: 10px;\n color: #a68cac;\n border-top: 1px solid #302634;\n padding-top: 10px;\n display: flex;\n justify-content: space-between;\n}\n.jev-devtools .confidence b {\n color: #d1bad2;\n font-weight: 400;\n}\n.jev-devtools details {\n margin-top: 12px;\n font-size: 10px;\n color: #b7a0bd;\n}\n.jev-devtools summary {\n cursor: pointer;\n}\n.jev-devtools .standalone {\n margin-bottom: 14px;\n max-width: 750px;\n}\n.jev-devtools .standalone:before {\n display: none;\n}\n.jev-devtools .standalone .answer {\n max-width: 450px;\n}\n.jev-devtools .box-preview {\n position: relative;\n margin-top: 14px;\n min-height: 80px;\n background: #19121c;\n}\n.jev-devtools .box-preview img {\n width: 100%;\n display: block;\n}\n.jev-devtools .bounding-box {\n position: absolute;\n border: 1.5px solid #e551ba;\n background: #e551ba15;\n}\n.jev-devtools .coordinates {\n display: block;\n font-size: 9px !important;\n line-height: 1.5;\n margin-top: 8px;\n color: #ac93b0;\n}\n.jev-devtools .context-image {\n max-width: 400px;\n width: 100%;\n border: 1px solid #75516c;\n border-radius: 6px;\n}\n.jev-devtools .empty {\n padding: 20px;\n color: #a294a8;\n line-height: 1.7;\n}\n.jev-devtools .empty-detail {\n margin: auto;\n padding: 40px;\n text-align: center;\n color: #b2a0ba;\n}\n.jev-devtools .empty-symbol {\n font-size: 36px;\n color: #e551ba;\n display: block;\n margin-bottom: 20px;\n}\n.jev-devtools .empty-detail p {\n font-size: 12px;\n line-height: 1.8;\n}\n.jev-devtools .error-banner {\n border: 1px solid #874b50;\n background: #31191e;\n padding: 12px;\n line-height: 1.5;\n margin-bottom: 16px;\n}\n.jev-devtools .warning {\n color: #e2b97d;\n}\n.jev-devtools .jev-inspector table {\n border-collapse: collapse;\n width: 100%;\n text-align: left;\n}\n.jev-devtools .jev-inspector th,\n.jev-devtools .jev-inspector td {\n border-bottom: 1px solid #302634;\n padding: 14px;\n}\n@media (max-width: 1100px) {\n .jev-devtools .question-branches .question-node:not(:first-child):before {\n display: block;\n }\n .jev-devtools .metrics {\n gap: 12px;\n }\n .jev-devtools .request-list {\n flex-basis: 250px;\n }\n}\n@media (max-width: 700px) {\n .jev-devtools .jev-inspector {\n flex-direction: column;\n }\n .jev-devtools .request-list {\n flex-basis: 140px;\n flex-shrink: 0;\n border-right: 0;\n border-bottom: 1px solid #302634;\n }\n .jev-devtools .request-list > header {\n padding: 6px 12px;\n }\n .jev-devtools .request-list footer {\n display: none;\n }\n .jev-devtools .list-filters {\n padding-bottom: 6px;\n }\n .jev-devtools .request-items {\n display: flex;\n }\n .jev-devtools .request-row {\n min-width: 240px;\n padding: 8px 12px;\n }\n .jev-devtools .detail-header {\n padding: 12px;\n }\n .jev-devtools .detail-meta,\n .jev-devtools .detail-tabs {\n padding-left: 12px;\n padding-right: 12px;\n }\n .jev-devtools .detail-body {\n padding: 12px;\n }\n .jev-devtools .metrics {\n display: none;\n }\n .jev-devtools .question-node:before {\n width: 13px;\n }\n .jev-devtools .question-node {\n padding: 12px;\n }\n}\n.jev-devtools .question-node:before,\n.jev-devtools .question-branches .question-node:not(:first-child):before {\n display: block;\n right: auto;\n left: 50%;\n top: -21px;\n width: 0;\n height: 20px;\n border-top: 0;\n border-left: 1px solid #7f416d;\n}\n.jev-devtools .standalone:before {\n display: none;\n}\n@media (max-width: 900px) {\n .jev-devtools .question-node:before,\n .jev-devtools .question-branches .question-node:not(:first-child):before {\n height: 12px;\n top: -13px;\n }\n .jev-devtools .question-branches .question-node:first-child:before {\n height: 20px;\n top: -21px;\n }\n}\n\n.jev-devtools.jev-drawer {\n margin: 0;\n padding: 0;\n position: fixed;\n z-index: 1000;\n inset: auto 0 0;\n display: flex;\n flex-direction: column;\n background: #0d0a0f;\n color: #eee8ed;\n border-top: 1px solid #604058;\n box-shadow: 0 -12px 48px #0005;\n font:\n 12px \"DM Sans\",\n sans-serif;\n}\n.jev-devtools.jev-drawer[hidden],\n.jev-devtools.jev-drawer-trigger[hidden] {\n display: none;\n}\n.jev-devtools .jev-drawer-resize {\n position: absolute;\n z-index: 1;\n top: -6px;\n width: 100%;\n height: 12px;\n cursor: ns-resize;\n touch-action: none;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.jev-devtools .jev-drawer-resize span {\n width: 42px;\n height: 3px;\n border-radius: 3px;\n background: #79506f;\n}\n.jev-devtools .jev-drawer-resize:hover span,\n.jev-devtools .jev-drawer-resize:focus-visible span {\n background: #e551ba;\n}\n.jev-devtools .jev-drawer-resize:focus-visible {\n outline: 2px solid #e551ba;\n outline-offset: -2px;\n}\n.jev-devtools .jev-drawer-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex: 0 0 46px;\n padding: 0 16px;\n border-bottom: 1px solid #302634;\n}\n.jev-devtools .jev-drawer-header strong {\n display: flex;\n align-items: center;\n gap: 9px;\n font-weight: 600;\n}\n.jev-devtools .jev-drawer-header > div {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n.jev-devtools .jev-drawer-header button {\n background: transparent;\n border-color: transparent;\n font-size: 11px;\n color: #c4afc8;\n}\n.jev-devtools .jev-drawer-header .jev-drawer-close {\n font-size: 22px;\n line-height: 1;\n padding: 4px 8px;\n}\n.jev-devtools .jev-drawer-content {\n flex: 1;\n min-height: 0;\n overflow: hidden;\n}\n.jev-devtools.jev-drawer-trigger {\n position: fixed;\n bottom: 18px;\n right: 18px;\n z-index: 1000;\n display: flex;\n align-items: center;\n gap: 9px;\n padding: 10px 16px;\n border: 1px solid #a24487;\n border-radius: 8px;\n cursor: pointer;\n background: #211321;\n color: #f1cbe6;\n font:\n 600 13px \"DM Sans\",\n sans-serif;\n box-shadow: 0 4px 20px #0005;\n}\n.jev-devtools.jev-drawer-trigger span {\n color: #e551ba;\n font-size: 20px;\n}\n/* Baseline cards and authored left-to-right composition from the lab's Jev presets. */\n.jev-devtools .detail-body.detail-body-flow {\n display: flex;\n padding: 0;\n overflow: hidden;\n}\n.jev-devtools .lab-flow {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n min-height: 0;\n}\n.jev-devtools .lab-flow-toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n flex-shrink: 0;\n padding: 12px 16px;\n flex-wrap: wrap;\n}\n.jev-devtools .lab-flow-toolbar label {\n display: flex;\n gap: 10px;\n align-items: center;\n font-size: 11px;\n min-width: 0;\n}\n.jev-devtools .lab-flow-toolbar select {\n width: auto;\n max-width: 240px;\n font-size: 11px;\n}\n.jev-devtools .lab-flow-toolbar > div {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n.jev-devtools .lab-flow-toolbar button {\n font-size: 11px;\n}\n.jev-devtools .lab-flow-toolbar output {\n font-size: 11px;\n min-width: 35px;\n text-align: center;\n}\n.jev-devtools .lab-flow-viewport {\n position: relative;\n flex: 1;\n min-height: 100px;\n overflow: hidden;\n background-color: #0d0a0f;\n background-image: radial-gradient(\n rgb(70 52 73 / var(--diagram-grid-opacity, 1))\n calc(0.8px * var(--diagram-grid-weight, 1)),\n transparent calc(0.8px * var(--diagram-grid-weight, 1))\n );\n background-size: 20px 20px;\n border-block: 1px solid #302634;\n cursor: grab;\n touch-action: none;\n user-select: none;\n overscroll-behavior: contain;\n}\n.jev-devtools .lab-flow-viewport[data-panning] {\n cursor: grabbing;\n}\n.jev-devtools .lab-flow-viewport:focus-visible {\n outline: 2px solid #e551ba;\n outline-offset: -2px;\n}\n.jev-devtools .lab-flow-caption {\n flex-shrink: 0;\n padding: 8px 16px;\n margin: 0;\n}\n.jev-devtools .lab-gesture-hint {\n display: block;\n color: #c6a7bd;\n}\n.jev-devtools .lab-flow-canvas {\n position: absolute;\n inset: 0 auto auto 0;\n transform-origin: top left;\n will-change: transform;\n font-family: system-ui, sans-serif;\n color: #f5f3f6;\n}\n.jev-devtools .lab-connections {\n position: absolute;\n inset: 0;\n overflow: visible;\n}\n.jev-devtools .lab-connections path {\n fill: none;\n stroke: #645a68;\n stroke-width: 1;\n}\n.jev-devtools .lab-connections path.active {\n stroke: #968592;\n}\n.jev-devtools .lab-connections text {\n fill: #b7b1bc;\n font:\n 12px ui-monospace,\n monospace;\n}\n.jev-devtools .lab-flow-dot {\n fill: #e551ba;\n}\n.jev-devtools .lab-card {\n position: absolute;\n border: 1.3px solid #f5f3f6;\n border-radius: 14px;\n padding: 16px;\n background: #0d0a0f;\n overflow: hidden;\n}\n.jev-devtools .lab-eyebrow {\n display: block;\n color: #e551ba;\n font:\n 500 10px ui-monospace,\n monospace;\n letter-spacing: 1px;\n margin: 0 0 7px;\n}\n.jev-devtools .lab-card h3 {\n font-size: 16px;\n font-weight: 600;\n line-height: 1.3;\n letter-spacing: -0.2px;\n margin: 0 0 10px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.jev-devtools .lab-card p {\n font-size: 13px;\n line-height: 1.4;\n margin: 10px 0;\n}\n.jev-devtools .lab-copy {\n display: -webkit-box;\n -webkit-line-clamp: 5;\n -webkit-box-orient: vertical;\n overflow: hidden;\n overflow-wrap: anywhere;\n}\n.jev-devtools .lab-probability {\n margin: 17px 0;\n}\n.jev-devtools .lab-probability > div:first-child {\n display: flex;\n justify-content: space-between;\n gap: 10px;\n margin-bottom: 9px;\n font-size: 15px;\n}\n.jev-devtools .lab-probability span {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.jev-devtools .lab-probability code {\n font:\n 13px ui-monospace,\n monospace;\n}\n.jev-devtools .lab-track {\n height: 7px;\n border-radius: 4px;\n background: #f5f3f61a;\n overflow: hidden;\n}\n.jev-devtools .lab-track i {\n display: block;\n height: 100%;\n border-radius: 4px;\n background: #e551ba;\n}\n.jev-devtools .lab-track i.lab-alternative {\n opacity: 0.35;\n}\n.jev-devtools .lab-card .lab-result {\n font-size: 14px;\n margin-top: 24px;\n}\n.jev-devtools .lab-card .lab-small {\n font-size: 12px;\n color: #b7b1bc;\n margin-top: 20px;\n}\n.jev-devtools .lab-idle {\n opacity: 0.65;\n}\n.jev-devtools .lab-scale {\n position: relative;\n margin-top: 18px;\n border-top: 1px solid #b7b1bc;\n display: flex;\n justify-content: space-between;\n padding-top: 9px;\n}\n.jev-devtools .lab-scale > span {\n position: absolute;\n top: -5px;\n width: 9px;\n height: 9px;\n border-radius: 50%;\n background: #e551ba;\n transform: translateX(-50%);\n}\n.jev-devtools .lab-big {\n display: block;\n font-size: 36px;\n font-weight: 500;\n margin-top: 26px;\n}\n.jev-devtools .lab-endpoints {\n display: flex;\n justify-content: space-between;\n font-size: 12px;\n color: #b7b1bc;\n margin-top: 10px;\n}\n.jev-devtools .lab-image {\n position: relative;\n}\n.jev-devtools .lab-image img {\n display: block;\n width: 100%;\n}\n.jev-devtools .lab-box {\n position: absolute;\n border: 1.5px solid #e551ba;\n background: #e551ba15;\n}\n.jev-devtools .lab-source-image {\n width: 100%;\n max-height: 105px;\n object-fit: contain;\n}\n.jev-devtools .lab-coordinates {\n font-family: ui-monospace, monospace;\n}\n@media (prefers-reduced-motion: reduce) {\n .jev-devtools .lab-flow-dot {\n display: none;\n }\n}\n/* The public TypeSafe mark travels with the package, independent of host assets. */\n.jev-devtools .typesafe-mark {\n display: inline-block;\n flex: 0 0 23px;\n width: 23px;\n height: 32px;\n overflow: hidden;\n line-height: 0;\n}\n.jev-devtools .typesafe-mark img {\n display: block;\n height: 32px;\n width: auto;\n max-width: none;\n}\n\n.jev-devtools .detail-body-questions {\n display: flex;\n flex-direction: column;\n overflow: auto;\n}\n.jev-devtools .questions-list {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 180px;\n}\n.jev-devtools .questions-navigation {\n display: flex;\n align-items: end;\n gap: 8px;\n flex-wrap: wrap;\n flex-shrink: 0;\n}\n.jev-devtools .questions-navigation label {\n display: flex;\n align-items: center;\n gap: 8px;\n white-space: nowrap;\n flex: 1;\n min-width: 240px;\n max-width: 480px;\n font-size: 11px;\n color: #bc9db5;\n}\n.jev-devtools .questions-navigation select {\n display: block;\n min-width: 0;\n}\n.jev-devtools .questions-navigation > span {\n align-self: center;\n color: #a89bac;\n}\n.jev-devtools .questions-help {\n margin: 8px 0;\n flex-shrink: 0;\n}\n.jev-devtools .questions-viewport {\n flex: 1;\n min-height: 0;\n overflow: auto;\n overflow-anchor: none;\n scrollbar-gutter: stable;\n padding: 3px;\n}\n.jev-devtools .questions-spacer {\n position: relative;\n width: 100%;\n}\n.jev-devtools .questions-row {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n padding-bottom: 14px;\n}\n.jev-devtools .questions-row .standalone {\n margin-bottom: 0;\n}\n.jev-devtools .questions-viewport:focus-visible,\n.jev-devtools .questions-row article:focus-visible {\n outline: 2px solid #e551ba;\n outline-offset: -2px;\n}\n\n/* Reserve measured card geometry while rapid scrolling uses a light preview. */\n.jev-devtools .questions-row[data-preview=\"true\"] article {\n height: 100%;\n}\n.jev-devtools .question-scroll-preview p {\n margin-top: 16px;\n}\n\n/* The full distribution stays at reading size, outside the zoomable canvas. */\n.jev-devtools .lab-flow-viewport[hidden] {\n display: none;\n}\n.jev-devtools .lab-choice-browser {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 0;\n padding: 8px 16px;\n gap: 10px;\n}\n.jev-devtools .lab-choice-controls {\n display: flex;\n gap: 12px;\n align-items: end;\n flex-wrap: wrap;\n font-size: 12px;\n}\n.jev-devtools .lab-choice-controls label {\n display: grid;\n gap: 5px;\n}\n.jev-devtools .lab-choice-table-scroll {\n overflow: auto;\n overscroll-behavior: contain;\n min-height: 0;\n}\n.jev-devtools .lab-choice-browser table {\n width: 100%;\n border-collapse: collapse;\n font-size: 13px;\n}\n.jev-devtools .lab-choice-browser caption {\n text-align: left;\n padding: 8px 0;\n color: #aaa0af;\n}\n.jev-devtools .lab-choice-browser th,\n.jev-devtools .lab-choice-browser td {\n padding: 9px 12px;\n border-bottom: 1px solid #302634;\n text-align: left;\n}\n.jev-devtools .lab-choice-browser th {\n overflow-wrap: anywhere;\n max-width: 320px;\n}\n.jev-devtools .lab-choice-browser td {\n font-variant-numeric: tabular-nums;\n}\n.jev-devtools .lab-choice-browser code {\n white-space: normal;\n overflow-wrap: anywhere;\n}\n.jev-devtools .lab-choice-returned {\n display: block;\n font-size: 10px;\n color: #e551ba;\n}\n.jev-devtools .lab-choice-pagination {\n display: flex;\n align-items: center;\n gap: 12px;\n justify-content: space-between;\n font-size: 12px;\n}\n.jev-devtools .lab-choice-remainder button {\n margin-top: 7px;\n}\n\n.jev-devtools .lab-flow-compact .lab-output {\n padding: 12px;\n height: 104px;\n}\n.jev-devtools .lab-flow-compact .lab-output .lab-eyebrow {\n margin-bottom: 6px;\n}\n.jev-devtools .lab-flow-compact .lab-output h3 {\n font-size: 16px;\n margin-bottom: 8px;\n}\n.jev-devtools .lab-flow-compact .lab-output p {\n font-size: 12px;\n margin: 4px 0;\n}\n.jev-devtools .lab-flow-compact .lab-result {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n overflow-wrap: anywhere;\n}\n.jev-devtools .lab-choice-remainder {\n padding: 12px;\n}\n.jev-devtools .lab-choice-remainder .lab-small {\n margin: 8px 0 0;\n font-size: 11px;\n}\n\n.jev-devtools .detail-body.detail-body-flow {\n flex-direction: column;\n}\n.jev-devtools .detail-body-flow > .warning,\n.jev-devtools .detail-body-flow > .error-banner {\n flex-shrink: 0;\n margin: 6px 16px;\n}\n.jev-devtools .lab-choice-browser {\n overflow: auto;\n}\n.jev-devtools .lab-choice-table-scroll {\n flex: 1 0 110px;\n}\n\n/* Only freshly revealed branches enter; pan/zoom remains on the canvas. */\n.jev-devtools .lab-card-enter {\n animation: jev-card-enter 280ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;\n}\n.jev-devtools .lab-branch-enter {\n stroke-dasharray: 1;\n animation: jev-branch-enter 280ms ease-out backwards;\n}\n@keyframes jev-card-enter {\n from {\n opacity: 0;\n transform: translateX(-16px) scale(0.96);\n }\n}\n@keyframes jev-branch-enter {\n from {\n opacity: 0;\n stroke-dashoffset: 1;\n }\n to {\n opacity: 1;\n stroke-dashoffset: 0;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .jev-devtools .lab-card-enter,\n .jev-devtools .lab-branch-enter {\n animation: none;\n }\n}\n\n/* Connected requests share one camera and one opt-in full request detail.\n :where scopes these selectors without changing their existing specificity. */\n:where(.jev-devtools) .whole-flow {\n min-width: 0;\n overflow: hidden;\n}\n:where(.jev-devtools) .whole-flow > .detail-header,\n:where(.jev-devtools) .whole-flow > .lab-flow-toolbar {\n flex-shrink: 0;\n}\n:where(.jev-devtools) .flow-workspace {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 0;\n overflow: hidden;\n}\n:where(.jev-devtools) .flow-details-panel {\n flex: none;\n min-width: 0;\n background: #130f17;\n border-top: 1px solid #342a38;\n}\n:where(.jev-devtools) .flow-details-bar {\n display: flex;\n align-items: center;\n gap: 12px;\n height: 36px;\n padding: 0 12px;\n}\n.jev-devtools .flow-details-bar button {\n flex: none;\n padding: 4px 8px;\n font-size: 11px;\n}\n:where(.jev-devtools) .flow-details-bar > span {\n color: #b5a6bc;\n font-size: 11px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n:where(.jev-devtools) .flow-details-body {\n overflow: auto;\n overscroll-behavior: contain;\n scrollbar-gutter: stable;\n}\n:where(.jev-devtools) .flow-details-resize {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 8px;\n cursor: ns-resize;\n touch-action: none;\n user-select: none;\n}\n:where(.jev-devtools) .flow-details-resize span {\n width: 40px;\n height: 2px;\n border-radius: 2px;\n background: #6c5874;\n}\n:where(.jev-devtools) .flow-details-resize:hover,\n:where(.jev-devtools) .flow-details-resize:focus-visible {\n background: #392239;\n outline: 1px solid #e551ba;\n outline-offset: -1px;\n}\n:where(.jev-devtools) .flow-overview-viewport {\n position: relative;\n min-height: 0;\n flex: 1 1 0;\n overflow: hidden;\n touch-action: none;\n cursor: grab;\n background-image: radial-gradient(\n rgb(83 67 87 / var(--diagram-grid-opacity, 1))\n calc(1px * var(--diagram-grid-weight, 1)),\n transparent calc(1px * var(--diagram-grid-weight, 1))\n );\n background-size: 20px 20px;\n}\n:where(.jev-devtools) .flow-overview-viewport[data-panning] {\n cursor: grabbing;\n}\n:where(.jev-devtools) .flow-overview-canvas {\n position: absolute;\n transform-origin: 0 0;\n}\n:where(.jev-devtools) .flow-connections {\n position: absolute;\n inset: 0;\n overflow: visible;\n color: #c0b8c4;\n pointer-events: none;\n}\n:where(.jev-devtools) .flow-step {\n position: absolute;\n min-height: 172px;\n overflow-wrap: anywhere;\n display: flex;\n flex-direction: column;\n gap: 8px;\n text-align: left;\n padding: 14px;\n border: 1px solid #736476;\n border-radius: 12px;\n background: #151017;\n color: inherit;\n}\n:where(.jev-devtools) .flow-step strong {\n white-space: normal;\n width: 100%;\n}\n:where(.jev-devtools) .flow-step-description {\n overflow-wrap: anywhere;\n font-size: 12px;\n}\n:where(.jev-devtools) .flow-step.flow-request {\n display: block;\n padding: 0;\n background: #0d0a0f;\n /* Skip offscreen paint/layout while preserving each question/expansion state. */\n content-visibility: auto;\n contain-intrinsic-size: auto 640px;\n}\n:where(.jev-devtools) .flow-request-heading {\n width: 100%;\n min-height: 64px;\n gap: 20px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n text-align: left;\n padding: 12px 20px;\n border: 0;\n border-bottom: 1px solid #342a38;\n border-radius: 12px 12px 0 0;\n background: transparent;\n color: inherit;\n}\n:where(.jev-devtools) .flow-request-heading .eyebrow {\n display: block;\n margin-bottom: 4px;\n}\n.jev-devtools .lab-flow-embedded {\n width: 1120px;\n display: block;\n}\n.jev-devtools .lab-flow-surface {\n position: relative;\n width: 1120px;\n}\n.jev-devtools .lab-flow-surface[hidden] {\n display: none;\n}\n.jev-devtools .lab-flow-embedded .lab-flow-canvas {\n will-change: auto;\n}\n.jev-devtools .lab-flow-embedded .lab-choice-browser {\n height: 520px;\n}\n:where(.jev-devtools) .flow-step.selected {\n outline: 2px solid #e551ba;\n outline-offset: 3px;\n}\n:where(.jev-devtools) .flow-step[data-status=\"completed\"] {\n border-color: #e551ba;\n}\n:where(.jev-devtools) .flow-step[data-status=\"running\"] {\n border-color: #e551ba;\n background: #2b1728;\n}\n:where(.jev-devtools) .flow-step[data-status=\"untaken\"],\n:where(.jev-devtools) .flow-step[data-status=\"blocked\"] {\n color: #948797;\n border-color: #403746;\n background: #151017;\n}\n:where(.jev-devtools) .flow-step[data-status=\"error\"] {\n border-color: #f17c78;\n}\n:where(.jev-devtools) .flow-step[data-status=\"cancelled\"] {\n border-style: dashed;\n}\n:where(.jev-devtools) .flow-selection {\n padding: 12px 20px;\n border-top: 1px solid #342a38;\n}\n:where(.jev-devtools) .flow-selection p {\n margin: 6px 0;\n overflow-wrap: anywhere;\n}\n:where(.jev-devtools) .flow-request-detail {\n min-height: 450px;\n border-top: 1px solid #534357;\n}\n:where(.jev-devtools) .flow-request-detail > .request-detail {\n min-height: 450px;\n}\n\n:where(.jev-devtools) .flow-card-heading,\n:where(.jev-devtools) .flow-card-footer,\n:where(.jev-devtools) .flow-join-summary,\n:where(.jev-devtools) .flow-lane {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n width: 100%;\n}\n:where(.jev-devtools) .flow-card-heading {\n justify-content: flex-start;\n}\n:where(.jev-devtools) .flow-task .flow-kind-icon {\n border: 1px solid currentColor;\n border-radius: 6px;\n padding: 4px;\n}\n:where(.jev-devtools) .flow-task-preview {\n display: grid;\n gap: 8px;\n min-width: 0;\n}\n.jev-devtools .flow-task-preview .diagram-content {\n max-height: 280px;\n padding: 8px 10px;\n border: 1px solid #35283b;\n border-radius: 4px;\n background: #100c13;\n}\n:where(.jev-devtools) .flow-task-preview small {\n color: #a89bac;\n font-size: 11px;\n}\n:where(.jev-devtools) .flow-task-details {\n display: grid;\n gap: 12px;\n}\n:where(.jev-devtools) .flow-task-details details {\n min-width: 0;\n}\n:where(.jev-devtools) .flow-task-details summary {\n cursor: pointer;\n margin-bottom: 8px;\n}\n:where(.jev-devtools) .flow-task-details .diagram-content {\n max-height: 320px;\n overflow: auto;\n}\n:where(.jev-devtools) .flow-kind-icon {\n width: 26px;\n height: 26px;\n color: #e551ba;\n flex-shrink: 0;\n}\n:where(.jev-devtools) .flow-kind-icon svg {\n width: 100%;\n height: 100%;\n}\n:where(.jev-devtools) .flow-card-heading .eyebrow {\n font-size: 10px;\n}\n:where(.jev-devtools) .flow-status {\n margin-left: auto;\n font-size: 10px;\n border-radius: 20px;\n padding: 4px 8px;\n background: #342031;\n color: #f0b7e0;\n}\n:where(.jev-devtools) .flow-step[data-status=\"untaken\"] .flow-status {\n background: #241e28;\n color: #948797;\n}\n:where(.jev-devtools) .flow-step[data-status=\"untaken\"] .flow-kind-icon {\n color: #948797;\n}\n:where(.jev-devtools) .flow-card-body > strong {\n white-space: normal;\n font-size: 18px;\n line-height: 1.25;\n overflow-wrap: anywhere;\n}\n:where(.jev-devtools) .flow-step-description {\n line-height: 1.5;\n color: #b9aebf;\n white-space: pre-wrap;\n}\n:where(.jev-devtools) .flow-card-footer {\n margin-top: auto;\n padding-top: 10px;\n border-top: 1px solid #342a38;\n font-size: 10px;\n color: #a092a7;\n}\n:where(.jev-devtools) .flow-card-footer code {\n max-width: 45%;\n white-space: normal;\n overflow-wrap: anywhere;\n}\n:where(.jev-devtools) .flow-card-footer small {\n text-align: right;\n}\n:where(.jev-devtools) .flow-join-summary {\n margin-top: 4px;\n font-size: 11px;\n color: #c9b9cd;\n}\n:where(.jev-devtools) .flow-join-summary > span {\n color: #ef9ed9;\n font-variant-numeric: tabular-nums;\n}\n:where(.jev-devtools) .flow-lanes {\n display: flex;\n flex-direction: column;\n gap: 4px;\n width: 100%;\n}\n:where(.jev-devtools) .flow-lane {\n border-radius: 5px;\n background: #211923;\n padding: 6px 8px;\n font-size: 11px;\n min-height: 28px;\n}\n:where(.jev-devtools) .flow-lane > span {\n min-width: 0;\n overflow-wrap: anywhere;\n}\n:where(.jev-devtools) .flow-lane > span > span {\n color: #ef9ed9;\n margin-right: 4px;\n}\n:where(.jev-devtools) .flow-lane small {\n color: #b9aebf;\n}\n:where(.jev-devtools) .flow-lane-details {\n padding-left: 18px;\n font-size: 12px;\n}\n:where(.jev-devtools) .flow-request-heading > span:first-child {\n min-width: 0;\n max-width: 80%;\n}\n:where(.jev-devtools) .flow-request-description {\n display: block;\n white-space: pre-wrap;\n font-size: 12px;\n line-height: 1.5;\n color: #b9aebf;\n margin-top: 5px;\n overflow-wrap: anywhere;\n}\n\n/* Structured context stays within the card; its gestures never move the camera. */\n.jev-devtools .lab-content-card {\n display: flex;\n flex-direction: column;\n padding: 14px;\n}\n.jev-devtools .lab-content-card h3 {\n font-size: 14px;\n margin-bottom: 8px;\n flex-shrink: 0;\n}\n.jev-devtools .lab-content-card .lab-eyebrow {\n font-size: 9px;\n margin-bottom: 5px;\n flex-shrink: 0;\n}\n.jev-devtools .diagram-content {\n min-height: 0;\n flex: 1;\n overflow: auto;\n overscroll-behavior: contain;\n touch-action: pan-y;\n scrollbar-width: thin;\n scrollbar-color: #514256 transparent;\n padding-right: 4px;\n font-size: 12px;\n line-height: 1.5;\n color: #d5cdd9;\n cursor: auto;\n user-select: text;\n}\n.jev-devtools .diagram-content:focus-visible {\n outline: 1px solid #e551ba;\n outline-offset: -1px;\n border-radius: 3px;\n}\n.jev-devtools .diagram-property {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: 8px;\n padding: 5px 0;\n border-bottom: 1px solid #261e2a;\n}\n.jev-devtools .diagram-property-text {\n display: block;\n}\n.jev-devtools .diagram-property-key {\n font:\n 10px/1.5 ui-monospace,\n monospace;\n color: #c8a8c8;\n overflow-wrap: anywhere;\n min-width: 0;\n}\n.jev-devtools .diagram-property-text > .diagram-property-key {\n display: block;\n margin-bottom: 2px;\n}\n.jev-devtools .diagram-text-value {\n display: block;\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n}\n.jev-devtools .diagram-text-preview {\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n.jev-devtools .diagram-value-number {\n color: #a6d6ca;\n font:\n 11px/1.5 ui-monospace,\n monospace;\n font-variant-numeric: tabular-nums;\n overflow-wrap: anywhere;\n}\n.jev-devtools .diagram-value-boolean {\n color: #c4b1ed;\n font:\n 11px/1.5 ui-monospace,\n monospace;\n}\n.jev-devtools .diagram-value-empty {\n color: #9c8ca4;\n font:\n 10px/1.5 ui-monospace,\n monospace;\n}\n.jev-devtools .diagram-property-disclosure {\n width: 100%;\n display: flex;\n align-items: baseline;\n gap: 5px;\n padding: 6px 0;\n border: 0;\n border-bottom: 1px solid #261e2a;\n border-radius: 0;\n background: transparent;\n text-align: left;\n color: inherit;\n}\n.jev-devtools .diagram-property-disclosure:hover {\n background: #211723;\n}\n.jev-devtools .diagram-property-caret {\n color: #ab8aab;\n flex-shrink: 0;\n}\n.jev-devtools .diagram-property-type {\n color: #9c8ca4;\n font:\n 10px/1.5 ui-monospace,\n monospace;\n margin-left: auto;\n flex-shrink: 0;\n}\n.jev-devtools .diagram-property-children {\n margin-left: 4px;\n padding-left: 9px;\n border-left: 1px solid #49324b;\n}\n.jev-devtools .diagram-content-toggle {\n display: block;\n padding: 3px 0;\n border: 0;\n border-radius: 0;\n background: transparent;\n color: #e9a4d7;\n font-size: 10px;\n text-align: left;\n}\n.jev-devtools .diagram-content-toggle:hover {\n color: #ffd9f3;\n text-decoration: underline;\n}\n\n/* Noul is a probability of true; its two outputs carry p and 1-p.\n Keep the fill opaque, with readable text even at zero probability. */\n.jev-devtools .lab-noul-output {\n border-color: rgb(\n 245 243 246 / calc(0.35 + 0.65 * var(--lab-noul-probability, 1))\n );\n}\n.jev-devtools .lab-noul-output > h3,\n.jev-devtools .lab-noul-output > p {\n opacity: calc(0.65 + 0.35 * var(--lab-noul-probability, 1));\n}\n\n:where(.jev-devtools) .flow-condition-rule {\n display: block;\n padding: 10px 12px;\n border: 1px solid #49324b;\n border-radius: 6px;\n background: #211723;\n width: 100%;\n}\n:where(.jev-devtools) .flow-condition-label {\n display: block;\n font-size: 10px;\n color: #ba9dbe;\n margin-bottom: 5px;\n}\n:where(.jev-devtools) .flow-condition-rule code {\n display: block;\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n font:\n 12px/1.6 ui-monospace,\n monospace;\n color: #f2d7eb;\n}\n\n:where(.jev-devtools) .flow-condition-incoming {\n display: block;\n padding-bottom: 10px;\n margin-bottom: 10px;\n border-bottom: 1px solid #49324b;\n}\n:where(.jev-devtools) .flow-condition-input {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: 12px;\n font-size: 12px;\n padding: 3px 0;\n}\n:where(.jev-devtools) .flow-condition-input > span {\n min-width: 0;\n overflow-wrap: anywhere;\n}\n:where(.jev-devtools) .flow-condition-input > b {\n font-size: 17px;\n font-weight: 600;\n color: #f2d7eb;\n overflow-wrap: anywhere;\n white-space: normal;\n max-width: 65%;\n}\n:where(.jev-devtools) .flow-input-details {\n font-size: 12px;\n}\n:where(.jev-devtools) .flow-input-details > div {\n display: flex;\n gap: 16px;\n margin: 6px 0;\n}\n:where(.jev-devtools) .flow-input-details code {\n color: #a092a7;\n margin-left: 8px;\n}\n:where(.jev-devtools) .flow-input-details dd {\n margin: 0;\n overflow-wrap: anywhere;\n}\n\n:where(.jev-devtools) .flow-overview-stack {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 0;\n min-width: 0;\n overflow: hidden;\n}\n:where(.jev-devtools) .flow-map-progress {\n display: grid;\n gap: 10px;\n font-size: 14px;\n line-height: 1.5;\n}\n:where(.jev-devtools) .flow-map-progress small {\n color: #b5a6bc;\n}\n\n.jev-devtools .flow-card-body {\n display: flex;\n flex-direction: column;\n gap: 8px;\n width: 100%;\n flex: 1;\n padding: 0;\n border: 0;\n border-radius: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n text-align: left;\n}\n.jev-devtools .flow-card-body:hover {\n background: transparent;\n}\n:where(.jev-devtools) .flow-collection-controls {\n display: flex;\n align-items: end;\n gap: 10px;\n border-top: 1px solid #49324b;\n margin-top: 4px;\n padding-top: 12px;\n}\n:where(.jev-devtools) .flow-collection-controls label {\n display: grid;\n gap: 6px;\n flex: 1;\n min-width: 0;\n color: #b9aebf;\n font-size: 11px;\n}\n.jev-devtools .flow-collection-controls select {\n width: 100%;\n min-width: 0;\n}\n.jev-devtools .flow-collection-controls button {\n flex: none;\n color: #efb1df;\n}\n:where(.jev-devtools) .flow-collection-expansion {\n position: absolute;\n width: max-content;\n}\n:where(.jev-devtools) .flow-item-frame {\n border: 1px solid #64415d;\n border-radius: 12px;\n background: #100c13;\n overflow: hidden;\n}\n:where(.jev-devtools) .flow-collection-heading {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 24px;\n padding: 16px 20px;\n border-bottom: 1px solid #49324b;\n background: #1c1220;\n}\n:where(.jev-devtools) .flow-collection-heading h3 {\n margin: 5px 0;\n font-size: 16px;\n}\n:where(.jev-devtools) .flow-collection-heading small {\n color: #b9aebf;\n}\n:where(.jev-devtools) .flow-collection-link text {\n fill: #ce9abd;\n font-size: 12px;\n}\n:where(.jev-devtools) .flow-item-placeholder {\n width: 600px;\n padding: 24px;\n line-height: 1.6;\n}\n:where(.jev-devtools) .flow-inline-overview,\n:where(.jev-devtools) .flow-inline-overview > .whole-flow,\n:where(.jev-devtools) .flow-inline-overview > .whole-flow > .flow-workspace {\n display: block;\n flex: none;\n}\n:where(.jev-devtools) .flow-inline-surface {\n position: relative;\n}\n\n:where(.jev-devtools) .flow-item-content {\n min-width: 0;\n animation: jev-flow-item-enter 240ms cubic-bezier(0.22, 1, 0.36, 1) both;\n}\n:where(.jev-devtools) .flow-item-forward {\n --flow-item-offset: 28px;\n}\n:where(.jev-devtools) .flow-item-backward {\n --flow-item-offset: -28px;\n}\n@keyframes jev-flow-item-enter {\n from {\n opacity: 0;\n transform: translateX(var(--flow-item-offset));\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n@media (prefers-reduced-motion: reduce) {\n :where(.jev-devtools) .flow-item-content {\n animation: none;\n }\n}\n.jev-devtools .flow-item-arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n display: grid;\n place-items: center;\n width: 56px;\n height: 56px;\n padding: 12px;\n margin: 0 auto;\n border: 1px solid #64415d;\n border-radius: 6px;\n background: #211623;\n color: #efa7db;\n}\n.jev-devtools .flow-item-arrow:hover:not(:disabled) {\n background: #382035;\n border-color: #e551ba;\n}\n:where(.jev-devtools) .flow-item-arrow svg {\n width: 28px;\n height: 28px;\n}\n\n:where(.jev-devtools) .flow-item-previous {\n left: -76px;\n}\n:where(.jev-devtools) .flow-item-next {\n right: -76px;\n}\n";
package/lib/src/inspector.css CHANGED
@@ -1,5 +1,31 @@
1
+ /* Important declarations in the inner shadow context beat page-authored host
2
+ styles, including important ones. Keep the reset here instead of expanding
3
+ the all shorthand into hundreds of inline properties on the host element.
4
+ These qualified host selectors are inert in the public document stylesheet. */
5
+ :host(jev-devtools-root) {
6
+ all: initial !important;
7
+ direction: ltr !important;
8
+ unicode-bidi: isolate !important;
9
+ position: fixed !important;
10
+ inset: 0 !important;
11
+ pointer-events: none !important;
12
+ z-index: 2147483000 !important;
13
+ }
14
+
15
+ :host(jev-devtools-root)::before,
16
+ :host(jev-devtools-root)::after {
17
+ content: none !important;
18
+ display: none !important;
19
+ }
20
+
1
21
  .jev-devtools {
2
22
  all: initial;
23
+ /* all does not reset custom properties. Establish our own inherited defaults;
24
+ cameras and probability cards can still set local values below this root. */
25
+ --diagram-grid-opacity: 1;
26
+ --diagram-grid-weight: 1;
27
+ --lab-noul-probability: 1;
28
+ --flow-item-offset: 0px;
3
29
  display: block;
4
30
  direction: ltr;
5
31
  unicode-bidi: isolate;
@@ -17,8 +43,7 @@
17
43
  }
18
44
  .jev-devtools button,
19
45
  .jev-devtools input,
20
- .jev-devtools select,
21
- .jev-devtools textarea {
46
+ .jev-devtools select {
22
47
  font: inherit;
23
48
  color: inherit;
24
49
  border: 1px solid #3b303d;
@@ -41,7 +66,7 @@
41
66
  .jev-devtools button:hover:not(:disabled) {
42
67
  border-color: #e551ba;
43
68
  }
44
- .jev-devtools :is(button, input, select, textarea, summary):focus-visible {
69
+ .jev-devtools :is(button, input, select, summary):focus-visible {
45
70
  outline: 2px solid #e551ba;
46
71
  outline-offset: 3px;
47
72
  }
@@ -256,47 +281,6 @@
256
281
  background-image: radial-gradient(#342337 0.6px, transparent 0.6px);
257
282
  background-size: 16px 16px;
258
283
  }
259
- .jev-devtools .request-flow {
260
- display: flex;
261
- align-items: center;
262
- gap: 40px;
263
- padding: 14px 0 20px;
264
- }
265
- .jev-devtools .state-node {
266
- position: relative;
267
- flex: 0 0 160px;
268
- border: 1px solid #e551ba;
269
- padding: 20px 15px;
270
- background: #1f1320;
271
- border-radius: 6px;
272
- }
273
- .jev-devtools .state-node h3 {
274
- margin-top: 12px;
275
- }
276
- .jev-devtools .state-node p {
277
- color: #b69db3;
278
- line-height: 1.5;
279
- }
280
- .jev-devtools .state-node code {
281
- font-size: 10px;
282
- }
283
- .jev-devtools .state-node:after {
284
- content: "";
285
- position: absolute;
286
- left: 100%;
287
- top: 50%;
288
- width: 20px;
289
- border-top: 1px solid #7f416d;
290
- }
291
- .jev-devtools .question-branches {
292
- border-left: 1px solid #7f416d;
293
- padding-left: 20px;
294
- display: grid;
295
- grid-template-columns: repeat(3, minmax(160px, 1fr));
296
- gap: 12px;
297
- flex: 1;
298
- position: relative;
299
- }
300
284
  .jev-devtools .question-node {
301
285
  position: relative;
302
286
  border: 1px solid #75516c;
@@ -305,6 +289,9 @@
305
289
  background: #110d14;
306
290
  min-width: 0;
307
291
  }
292
+ /* Retain the legacy question connectors and standalone suppression together.
293
+ Remove only after resolving the narrow-screen visual differences in
294
+ https://github.com/diegoag64/jev-devtools/issues/57. */
308
295
  .jev-devtools .question-node:before {
309
296
  content: "";
310
297
  position: absolute;
@@ -335,11 +322,6 @@
335
322
  border-radius: 3px;
336
323
  padding: 3px 5px;
337
324
  }
338
- .jev-devtools .instructions {
339
- font-size: 11px;
340
- color: #b8a6bc;
341
- line-height: 1.5;
342
- }
343
325
  .jev-devtools .answer-value {
344
326
  display: block;
345
327
  font-size: 20px;
@@ -475,44 +457,10 @@
475
457
  border-bottom: 1px solid #302634;
476
458
  padding: 14px;
477
459
  }
478
- .jev-devtools .flow-dot {
479
- display: none;
480
- }
481
- .jev-devtools .pending .flow-dot {
482
- display: block;
483
- position: absolute;
484
- right: -23px;
485
- top: calc(50% - 3px);
486
- width: 6px;
487
- height: 6px;
488
- background: #e551ba;
489
- border-radius: 50%;
490
- animation: jev-inspector-pulse 1s infinite;
491
- }
492
- @keyframes jev-inspector-pulse {
493
- 50% {
494
- opacity: 0.2;
495
- transform: scale(0.7);
496
- }
497
- }
498
- @media (prefers-reduced-motion: reduce) {
499
- .jev-devtools .pending .flow-dot {
500
- animation: none;
501
- }
502
- }
503
460
  @media (max-width: 1100px) {
504
- .jev-devtools .question-branches {
505
- grid-template-columns: 1fr;
506
- }
507
461
  .jev-devtools .question-branches .question-node:not(:first-child):before {
508
462
  display: block;
509
463
  }
510
- .jev-devtools .request-flow {
511
- align-items: flex-start;
512
- }
513
- .jev-devtools .state-node {
514
- margin-top: 45px;
515
- }
516
464
  .jev-devtools .metrics {
517
465
  gap: 12px;
518
466
  }
@@ -546,9 +494,6 @@
546
494
  min-width: 240px;
547
495
  padding: 8px 12px;
548
496
  }
549
- .jev-devtools .request-detail {
550
- min-height: 0;
551
- }
552
497
  .jev-devtools .detail-header {
553
498
  padding: 12px;
554
499
  }
@@ -563,19 +508,6 @@
563
508
  .jev-devtools .metrics {
564
509
  display: none;
565
510
  }
566
- .jev-devtools .state-node {
567
- flex-basis: 115px;
568
- padding: 12px;
569
- }
570
- .jev-devtools .request-flow {
571
- gap: 25px;
572
- }
573
- .jev-devtools .state-node:after {
574
- width: 12px;
575
- }
576
- .jev-devtools .question-branches {
577
- padding-left: 12px;
578
- }
579
511
  .jev-devtools .question-node:before {
580
512
  width: 13px;
581
513
  }
@@ -583,46 +515,6 @@
583
515
  padding: 12px;
584
516
  }
585
517
  }
586
-
587
- .jev-devtools .request-flow {
588
- flex-direction: column;
589
- align-items: stretch;
590
- gap: 24px;
591
- }
592
- .jev-devtools .state-node {
593
- flex: auto;
594
- width: fit-content;
595
- align-self: center;
596
- padding: 12px 24px;
597
- text-align: center;
598
- margin: 0;
599
- }
600
- .jev-devtools .state-node h3 {
601
- display: inline-block;
602
- margin: 0 12px;
603
- }
604
- .jev-devtools .state-node p {
605
- display: inline-block;
606
- margin: 0 12px 0 0;
607
- font-size: 11px;
608
- }
609
- .jev-devtools .state-node .eyebrow {
610
- display: none;
611
- }
612
- .jev-devtools .state-node:after {
613
- left: 50%;
614
- top: 100%;
615
- width: 0;
616
- height: 24px;
617
- border-top: 0;
618
- border-left: 1px solid #7f416d;
619
- }
620
- .jev-devtools .question-branches {
621
- border-left: 0;
622
- border-top: 1px solid #7f416d;
623
- padding: 20px 0 0;
624
- grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
625
- }
626
518
  .jev-devtools .question-node:before,
627
519
  .jev-devtools .question-branches .question-node:not(:first-child):before {
628
520
  display: block;
@@ -637,18 +529,7 @@
637
529
  .jev-devtools .standalone:before {
638
530
  display: none;
639
531
  }
640
- .jev-devtools .flow-caption {
641
- margin-top: 0;
642
- }
643
- .jev-devtools .pending .flow-dot {
644
- right: auto;
645
- left: calc(50% - 3px);
646
- top: calc(100% + 10px);
647
- }
648
532
  @media (max-width: 900px) {
649
- .jev-devtools .question-branches {
650
- grid-template-columns: 1fr;
651
- }
652
533
  .jev-devtools .question-node:before,
653
534
  .jev-devtools .question-branches .question-node:not(:first-child):before {
654
535
  height: 12px;
@@ -658,16 +539,6 @@
658
539
  height: 20px;
659
540
  top: -21px;
660
541
  }
661
- .jev-devtools .state-node {
662
- padding: 10px;
663
- }
664
- .jev-devtools .state-node p {
665
- display: block;
666
- margin: 6px 0;
667
- }
668
- .jev-devtools .state-node h3 {
669
- font-size: 12px;
670
- }
671
542
  }
672
543
 
673
544
  .jev-devtools.jev-drawer {
@@ -730,10 +601,6 @@
730
601
  gap: 9px;
731
602
  font-weight: 600;
732
603
  }
733
- .jev-devtools .jev-mark {
734
- color: #e551ba;
735
- font-size: 21px;
736
- }
737
604
  .jev-devtools .jev-drawer-header > div {
738
605
  display: flex;
739
606
  align-items: center;
@@ -1150,7 +1017,6 @@
1150
1017
  overflow: auto;
1151
1018
  overscroll-behavior: contain;
1152
1019
  min-height: 0;
1153
- flex: 1;
1154
1020
  }
1155
1021
  .jev-devtools .lab-choice-browser table {
1156
1022
  width: 100%;
@@ -1271,29 +1137,30 @@
1271
1137
  }
1272
1138
  }
1273
1139
 
1274
- /* Connected requests share one camera and one opt-in full request detail. */
1275
- .whole-flow {
1140
+ /* Connected requests share one camera and one opt-in full request detail.
1141
+ :where scopes these selectors without changing their existing specificity. */
1142
+ :where(.jev-devtools) .whole-flow {
1276
1143
  min-width: 0;
1277
1144
  overflow: hidden;
1278
1145
  }
1279
- .whole-flow > .detail-header,
1280
- .whole-flow > .lab-flow-toolbar {
1146
+ :where(.jev-devtools) .whole-flow > .detail-header,
1147
+ :where(.jev-devtools) .whole-flow > .lab-flow-toolbar {
1281
1148
  flex-shrink: 0;
1282
1149
  }
1283
- .flow-workspace {
1150
+ :where(.jev-devtools) .flow-workspace {
1284
1151
  display: flex;
1285
1152
  flex-direction: column;
1286
1153
  flex: 1;
1287
1154
  min-height: 0;
1288
1155
  overflow: hidden;
1289
1156
  }
1290
- .flow-details-panel {
1157
+ :where(.jev-devtools) .flow-details-panel {
1291
1158
  flex: none;
1292
1159
  min-width: 0;
1293
1160
  background: #130f17;
1294
1161
  border-top: 1px solid #342a38;
1295
1162
  }
1296
- .flow-details-bar {
1163
+ :where(.jev-devtools) .flow-details-bar {
1297
1164
  display: flex;
1298
1165
  align-items: center;
1299
1166
  gap: 12px;
@@ -1305,19 +1172,19 @@
1305
1172
  padding: 4px 8px;
1306
1173
  font-size: 11px;
1307
1174
  }
1308
- .flow-details-bar > span {
1175
+ :where(.jev-devtools) .flow-details-bar > span {
1309
1176
  color: #b5a6bc;
1310
1177
  font-size: 11px;
1311
1178
  overflow: hidden;
1312
1179
  white-space: nowrap;
1313
1180
  text-overflow: ellipsis;
1314
1181
  }
1315
- .flow-details-body {
1182
+ :where(.jev-devtools) .flow-details-body {
1316
1183
  overflow: auto;
1317
1184
  overscroll-behavior: contain;
1318
1185
  scrollbar-gutter: stable;
1319
1186
  }
1320
- .flow-details-resize {
1187
+ :where(.jev-devtools) .flow-details-resize {
1321
1188
  display: flex;
1322
1189
  align-items: center;
1323
1190
  justify-content: center;
@@ -1326,19 +1193,19 @@
1326
1193
  touch-action: none;
1327
1194
  user-select: none;
1328
1195
  }
1329
- .flow-details-resize span {
1196
+ :where(.jev-devtools) .flow-details-resize span {
1330
1197
  width: 40px;
1331
1198
  height: 2px;
1332
1199
  border-radius: 2px;
1333
1200
  background: #6c5874;
1334
1201
  }
1335
- .flow-details-resize:hover,
1336
- .flow-details-resize:focus-visible {
1202
+ :where(.jev-devtools) .flow-details-resize:hover,
1203
+ :where(.jev-devtools) .flow-details-resize:focus-visible {
1337
1204
  background: #392239;
1338
1205
  outline: 1px solid #e551ba;
1339
1206
  outline-offset: -1px;
1340
1207
  }
1341
- .flow-overview-viewport {
1208
+ :where(.jev-devtools) .flow-overview-viewport {
1342
1209
  position: relative;
1343
1210
  min-height: 0;
1344
1211
  flex: 1 1 0;
@@ -1352,23 +1219,22 @@
1352
1219
  );
1353
1220
  background-size: 20px 20px;
1354
1221
  }
1355
- .flow-overview-viewport[data-panning] {
1222
+ :where(.jev-devtools) .flow-overview-viewport[data-panning] {
1356
1223
  cursor: grabbing;
1357
1224
  }
1358
- .flow-overview-canvas {
1225
+ :where(.jev-devtools) .flow-overview-canvas {
1359
1226
  position: absolute;
1360
1227
  transform-origin: 0 0;
1361
1228
  }
1362
- .flow-connections {
1229
+ :where(.jev-devtools) .flow-connections {
1363
1230
  position: absolute;
1364
1231
  inset: 0;
1365
1232
  overflow: visible;
1366
1233
  color: #c0b8c4;
1367
1234
  pointer-events: none;
1368
1235
  }
1369
- .flow-step {
1236
+ :where(.jev-devtools) .flow-step {
1370
1237
  position: absolute;
1371
- width: 220px;
1372
1238
  min-height: 172px;
1373
1239
  overflow-wrap: anywhere;
1374
1240
  display: flex;
@@ -1381,15 +1247,15 @@
1381
1247
  background: #151017;
1382
1248
  color: inherit;
1383
1249
  }
1384
- .flow-step strong {
1250
+ :where(.jev-devtools) .flow-step strong {
1385
1251
  white-space: normal;
1386
1252
  width: 100%;
1387
1253
  }
1388
- .flow-step-description {
1254
+ :where(.jev-devtools) .flow-step-description {
1389
1255
  overflow-wrap: anywhere;
1390
1256
  font-size: 12px;
1391
1257
  }
1392
- .flow-step.flow-request {
1258
+ :where(.jev-devtools) .flow-step.flow-request {
1393
1259
  display: block;
1394
1260
  padding: 0;
1395
1261
  background: #0d0a0f;
@@ -1397,7 +1263,7 @@
1397
1263
  content-visibility: auto;
1398
1264
  contain-intrinsic-size: auto 640px;
1399
1265
  }
1400
- .flow-request-heading {
1266
+ :where(.jev-devtools) .flow-request-heading {
1401
1267
  width: 100%;
1402
1268
  min-height: 64px;
1403
1269
  gap: 20px;
@@ -1412,7 +1278,7 @@
1412
1278
  background: transparent;
1413
1279
  color: inherit;
1414
1280
  }
1415
- .flow-request-heading .eyebrow {
1281
+ :where(.jev-devtools) .flow-request-heading .eyebrow {
1416
1282
  display: block;
1417
1283
  margin-bottom: 4px;
1418
1284
  }
@@ -1433,64 +1299,64 @@
1433
1299
  .jev-devtools .lab-flow-embedded .lab-choice-browser {
1434
1300
  height: 520px;
1435
1301
  }
1436
- .flow-step.selected {
1302
+ :where(.jev-devtools) .flow-step.selected {
1437
1303
  outline: 2px solid #e551ba;
1438
1304
  outline-offset: 3px;
1439
1305
  }
1440
- .flow-step[data-status="completed"] {
1306
+ :where(.jev-devtools) .flow-step[data-status="completed"] {
1441
1307
  border-color: #e551ba;
1442
1308
  }
1443
- .flow-step[data-status="running"] {
1309
+ :where(.jev-devtools) .flow-step[data-status="running"] {
1444
1310
  border-color: #e551ba;
1445
1311
  background: #2b1728;
1446
1312
  }
1447
- .flow-step[data-status="untaken"],
1448
- .flow-step[data-status="blocked"] {
1313
+ :where(.jev-devtools) .flow-step[data-status="untaken"],
1314
+ :where(.jev-devtools) .flow-step[data-status="blocked"] {
1449
1315
  color: #948797;
1450
1316
  border-color: #403746;
1451
1317
  background: #151017;
1452
1318
  }
1453
- .flow-step[data-status="error"] {
1319
+ :where(.jev-devtools) .flow-step[data-status="error"] {
1454
1320
  border-color: #f17c78;
1455
1321
  }
1456
- .flow-step[data-status="cancelled"] {
1322
+ :where(.jev-devtools) .flow-step[data-status="cancelled"] {
1457
1323
  border-style: dashed;
1458
1324
  }
1459
- .flow-selection {
1325
+ :where(.jev-devtools) .flow-selection {
1460
1326
  padding: 12px 20px;
1461
1327
  border-top: 1px solid #342a38;
1462
1328
  }
1463
- .flow-selection p {
1329
+ :where(.jev-devtools) .flow-selection p {
1464
1330
  margin: 6px 0;
1465
1331
  overflow-wrap: anywhere;
1466
1332
  }
1467
- .flow-request-detail {
1333
+ :where(.jev-devtools) .flow-request-detail {
1468
1334
  min-height: 450px;
1469
1335
  border-top: 1px solid #534357;
1470
1336
  }
1471
- .flow-request-detail > .request-detail {
1337
+ :where(.jev-devtools) .flow-request-detail > .request-detail {
1472
1338
  min-height: 450px;
1473
1339
  }
1474
1340
 
1475
- .flow-card-heading,
1476
- .flow-card-footer,
1477
- .flow-join-summary,
1478
- .flow-lane {
1341
+ :where(.jev-devtools) .flow-card-heading,
1342
+ :where(.jev-devtools) .flow-card-footer,
1343
+ :where(.jev-devtools) .flow-join-summary,
1344
+ :where(.jev-devtools) .flow-lane {
1479
1345
  display: flex;
1480
1346
  align-items: center;
1481
1347
  justify-content: space-between;
1482
1348
  gap: 8px;
1483
1349
  width: 100%;
1484
1350
  }
1485
- .flow-card-heading {
1351
+ :where(.jev-devtools) .flow-card-heading {
1486
1352
  justify-content: flex-start;
1487
1353
  }
1488
- .flow-task .flow-kind-icon {
1354
+ :where(.jev-devtools) .flow-task .flow-kind-icon {
1489
1355
  border: 1px solid currentColor;
1490
1356
  border-radius: 6px;
1491
1357
  padding: 4px;
1492
1358
  }
1493
- .flow-task-preview {
1359
+ :where(.jev-devtools) .flow-task-preview {
1494
1360
  display: grid;
1495
1361
  gap: 8px;
1496
1362
  min-width: 0;
@@ -1502,39 +1368,39 @@
1502
1368
  border-radius: 4px;
1503
1369
  background: #100c13;
1504
1370
  }
1505
- .flow-task-preview small {
1506
- color: var(--muted);
1371
+ :where(.jev-devtools) .flow-task-preview small {
1372
+ color: #a89bac;
1507
1373
  font-size: 11px;
1508
1374
  }
1509
- .flow-task-details {
1375
+ :where(.jev-devtools) .flow-task-details {
1510
1376
  display: grid;
1511
1377
  gap: 12px;
1512
1378
  }
1513
- .flow-task-details details {
1379
+ :where(.jev-devtools) .flow-task-details details {
1514
1380
  min-width: 0;
1515
1381
  }
1516
- .flow-task-details summary {
1382
+ :where(.jev-devtools) .flow-task-details summary {
1517
1383
  cursor: pointer;
1518
1384
  margin-bottom: 8px;
1519
1385
  }
1520
- .flow-task-details .diagram-content {
1386
+ :where(.jev-devtools) .flow-task-details .diagram-content {
1521
1387
  max-height: 320px;
1522
1388
  overflow: auto;
1523
1389
  }
1524
- .flow-kind-icon {
1390
+ :where(.jev-devtools) .flow-kind-icon {
1525
1391
  width: 26px;
1526
1392
  height: 26px;
1527
1393
  color: #e551ba;
1528
1394
  flex-shrink: 0;
1529
1395
  }
1530
- .flow-kind-icon svg {
1396
+ :where(.jev-devtools) .flow-kind-icon svg {
1531
1397
  width: 100%;
1532
1398
  height: 100%;
1533
1399
  }
1534
- .flow-card-heading .eyebrow {
1400
+ :where(.jev-devtools) .flow-card-heading .eyebrow {
1535
1401
  font-size: 10px;
1536
1402
  }
1537
- .flow-status {
1403
+ :where(.jev-devtools) .flow-status {
1538
1404
  margin-left: auto;
1539
1405
  font-size: 10px;
1540
1406
  border-radius: 20px;
@@ -1542,81 +1408,81 @@
1542
1408
  background: #342031;
1543
1409
  color: #f0b7e0;
1544
1410
  }
1545
- .flow-step[data-status="untaken"] .flow-status {
1411
+ :where(.jev-devtools) .flow-step[data-status="untaken"] .flow-status {
1546
1412
  background: #241e28;
1547
1413
  color: #948797;
1548
1414
  }
1549
- .flow-step[data-status="untaken"] .flow-kind-icon {
1415
+ :where(.jev-devtools) .flow-step[data-status="untaken"] .flow-kind-icon {
1550
1416
  color: #948797;
1551
1417
  }
1552
- .flow-card-body > strong {
1418
+ :where(.jev-devtools) .flow-card-body > strong {
1553
1419
  white-space: normal;
1554
1420
  font-size: 18px;
1555
1421
  line-height: 1.25;
1556
1422
  overflow-wrap: anywhere;
1557
1423
  }
1558
- .flow-step-description {
1424
+ :where(.jev-devtools) .flow-step-description {
1559
1425
  line-height: 1.5;
1560
1426
  color: #b9aebf;
1561
1427
  white-space: pre-wrap;
1562
1428
  }
1563
- .flow-card-footer {
1429
+ :where(.jev-devtools) .flow-card-footer {
1564
1430
  margin-top: auto;
1565
1431
  padding-top: 10px;
1566
1432
  border-top: 1px solid #342a38;
1567
1433
  font-size: 10px;
1568
1434
  color: #a092a7;
1569
1435
  }
1570
- .flow-card-footer code {
1436
+ :where(.jev-devtools) .flow-card-footer code {
1571
1437
  max-width: 45%;
1572
1438
  white-space: normal;
1573
1439
  overflow-wrap: anywhere;
1574
1440
  }
1575
- .flow-card-footer small {
1441
+ :where(.jev-devtools) .flow-card-footer small {
1576
1442
  text-align: right;
1577
1443
  }
1578
- .flow-join-summary {
1444
+ :where(.jev-devtools) .flow-join-summary {
1579
1445
  margin-top: 4px;
1580
1446
  font-size: 11px;
1581
1447
  color: #c9b9cd;
1582
1448
  }
1583
- .flow-join-summary > span {
1449
+ :where(.jev-devtools) .flow-join-summary > span {
1584
1450
  color: #ef9ed9;
1585
1451
  font-variant-numeric: tabular-nums;
1586
1452
  }
1587
- .flow-lanes {
1453
+ :where(.jev-devtools) .flow-lanes {
1588
1454
  display: flex;
1589
1455
  flex-direction: column;
1590
1456
  gap: 4px;
1591
1457
  width: 100%;
1592
1458
  }
1593
- .flow-lane {
1459
+ :where(.jev-devtools) .flow-lane {
1594
1460
  border-radius: 5px;
1595
1461
  background: #211923;
1596
1462
  padding: 6px 8px;
1597
1463
  font-size: 11px;
1598
1464
  min-height: 28px;
1599
1465
  }
1600
- .flow-lane > span {
1466
+ :where(.jev-devtools) .flow-lane > span {
1601
1467
  min-width: 0;
1602
1468
  overflow-wrap: anywhere;
1603
1469
  }
1604
- .flow-lane > span > span {
1470
+ :where(.jev-devtools) .flow-lane > span > span {
1605
1471
  color: #ef9ed9;
1606
1472
  margin-right: 4px;
1607
1473
  }
1608
- .flow-lane small {
1474
+ :where(.jev-devtools) .flow-lane small {
1609
1475
  color: #b9aebf;
1610
1476
  }
1611
- .flow-lane-details {
1477
+ :where(.jev-devtools) .flow-lane-details {
1612
1478
  padding-left: 18px;
1613
1479
  font-size: 12px;
1614
1480
  }
1615
- .flow-request-heading > span:first-child {
1481
+ :where(.jev-devtools) .flow-request-heading > span:first-child {
1616
1482
  min-width: 0;
1617
1483
  max-width: 80%;
1618
1484
  }
1619
- .flow-request-description {
1485
+ :where(.jev-devtools) .flow-request-description {
1620
1486
  display: block;
1621
1487
  white-space: pre-wrap;
1622
1488
  font-size: 12px;
@@ -1776,7 +1642,7 @@
1776
1642
  opacity: calc(0.65 + 0.35 * var(--lab-noul-probability, 1));
1777
1643
  }
1778
1644
 
1779
- .flow-condition-rule {
1645
+ :where(.jev-devtools) .flow-condition-rule {
1780
1646
  display: block;
1781
1647
  padding: 10px 12px;
1782
1648
  border: 1px solid #49324b;
@@ -1784,13 +1650,13 @@
1784
1650
  background: #211723;
1785
1651
  width: 100%;
1786
1652
  }
1787
- .flow-condition-label {
1653
+ :where(.jev-devtools) .flow-condition-label {
1788
1654
  display: block;
1789
1655
  font-size: 10px;
1790
1656
  color: #ba9dbe;
1791
1657
  margin-bottom: 5px;
1792
1658
  }
1793
- .flow-condition-rule code {
1659
+ :where(.jev-devtools) .flow-condition-rule code {
1794
1660
  display: block;
1795
1661
  white-space: pre-wrap;
1796
1662
  overflow-wrap: anywhere;
@@ -1800,13 +1666,13 @@
1800
1666
  color: #f2d7eb;
1801
1667
  }
1802
1668
 
1803
- .flow-condition-incoming {
1669
+ :where(.jev-devtools) .flow-condition-incoming {
1804
1670
  display: block;
1805
1671
  padding-bottom: 10px;
1806
1672
  margin-bottom: 10px;
1807
1673
  border-bottom: 1px solid #49324b;
1808
1674
  }
1809
- .flow-condition-input {
1675
+ :where(.jev-devtools) .flow-condition-input {
1810
1676
  display: flex;
1811
1677
  justify-content: space-between;
1812
1678
  align-items: baseline;
@@ -1814,11 +1680,11 @@
1814
1680
  font-size: 12px;
1815
1681
  padding: 3px 0;
1816
1682
  }
1817
- .flow-condition-input > span {
1683
+ :where(.jev-devtools) .flow-condition-input > span {
1818
1684
  min-width: 0;
1819
1685
  overflow-wrap: anywhere;
1820
1686
  }
1821
- .flow-condition-input > b {
1687
+ :where(.jev-devtools) .flow-condition-input > b {
1822
1688
  font-size: 17px;
1823
1689
  font-weight: 600;
1824
1690
  color: #f2d7eb;
@@ -1826,24 +1692,24 @@
1826
1692
  white-space: normal;
1827
1693
  max-width: 65%;
1828
1694
  }
1829
- .flow-input-details {
1695
+ :where(.jev-devtools) .flow-input-details {
1830
1696
  font-size: 12px;
1831
1697
  }
1832
- .flow-input-details > div {
1698
+ :where(.jev-devtools) .flow-input-details > div {
1833
1699
  display: flex;
1834
1700
  gap: 16px;
1835
1701
  margin: 6px 0;
1836
1702
  }
1837
- .flow-input-details code {
1703
+ :where(.jev-devtools) .flow-input-details code {
1838
1704
  color: #a092a7;
1839
1705
  margin-left: 8px;
1840
1706
  }
1841
- .flow-input-details dd {
1707
+ :where(.jev-devtools) .flow-input-details dd {
1842
1708
  margin: 0;
1843
1709
  overflow-wrap: anywhere;
1844
1710
  }
1845
1711
 
1846
- .flow-overview-stack {
1712
+ :where(.jev-devtools) .flow-overview-stack {
1847
1713
  display: flex;
1848
1714
  flex-direction: column;
1849
1715
  flex: 1;
@@ -1851,13 +1717,13 @@
1851
1717
  min-width: 0;
1852
1718
  overflow: hidden;
1853
1719
  }
1854
- .flow-map-progress {
1720
+ :where(.jev-devtools) .flow-map-progress {
1855
1721
  display: grid;
1856
1722
  gap: 10px;
1857
1723
  font-size: 14px;
1858
1724
  line-height: 1.5;
1859
1725
  }
1860
- .flow-map-progress small {
1726
+ :where(.jev-devtools) .flow-map-progress small {
1861
1727
  color: #b5a6bc;
1862
1728
  }
1863
1729
 
@@ -1878,7 +1744,7 @@
1878
1744
  .jev-devtools .flow-card-body:hover {
1879
1745
  background: transparent;
1880
1746
  }
1881
- .flow-collection-controls {
1747
+ :where(.jev-devtools) .flow-collection-controls {
1882
1748
  display: flex;
1883
1749
  align-items: end;
1884
1750
  gap: 10px;
@@ -1886,7 +1752,7 @@
1886
1752
  margin-top: 4px;
1887
1753
  padding-top: 12px;
1888
1754
  }
1889
- .flow-collection-controls label {
1755
+ :where(.jev-devtools) .flow-collection-controls label {
1890
1756
  display: grid;
1891
1757
  gap: 6px;
1892
1758
  flex: 1;
@@ -1902,17 +1768,17 @@
1902
1768
  flex: none;
1903
1769
  color: #efb1df;
1904
1770
  }
1905
- .flow-collection-expansion {
1771
+ :where(.jev-devtools) .flow-collection-expansion {
1906
1772
  position: absolute;
1907
1773
  width: max-content;
1908
1774
  }
1909
- .flow-item-frame {
1775
+ :where(.jev-devtools) .flow-item-frame {
1910
1776
  border: 1px solid #64415d;
1911
1777
  border-radius: 12px;
1912
1778
  background: #100c13;
1913
1779
  overflow: hidden;
1914
1780
  }
1915
- .flow-collection-heading {
1781
+ :where(.jev-devtools) .flow-collection-heading {
1916
1782
  display: flex;
1917
1783
  align-items: center;
1918
1784
  justify-content: space-between;
@@ -1921,43 +1787,43 @@
1921
1787
  border-bottom: 1px solid #49324b;
1922
1788
  background: #1c1220;
1923
1789
  }
1924
- .flow-collection-heading h3 {
1790
+ :where(.jev-devtools) .flow-collection-heading h3 {
1925
1791
  margin: 5px 0;
1926
1792
  font-size: 16px;
1927
1793
  }
1928
- .flow-collection-heading small {
1794
+ :where(.jev-devtools) .flow-collection-heading small {
1929
1795
  color: #b9aebf;
1930
1796
  }
1931
- .flow-collection-link text {
1797
+ :where(.jev-devtools) .flow-collection-link text {
1932
1798
  fill: #ce9abd;
1933
1799
  font-size: 12px;
1934
1800
  }
1935
- .flow-item-placeholder {
1801
+ :where(.jev-devtools) .flow-item-placeholder {
1936
1802
  width: 600px;
1937
1803
  padding: 24px;
1938
1804
  line-height: 1.6;
1939
1805
  }
1940
- .flow-inline-overview,
1941
- .flow-inline-overview > .whole-flow,
1942
- .flow-inline-overview > .whole-flow > .flow-workspace {
1806
+ :where(.jev-devtools) .flow-inline-overview,
1807
+ :where(.jev-devtools) .flow-inline-overview > .whole-flow,
1808
+ :where(.jev-devtools) .flow-inline-overview > .whole-flow > .flow-workspace {
1943
1809
  display: block;
1944
1810
  flex: none;
1945
1811
  }
1946
- .flow-inline-surface {
1812
+ :where(.jev-devtools) .flow-inline-surface {
1947
1813
  position: relative;
1948
1814
  }
1949
1815
 
1950
- .flow-item-content {
1816
+ :where(.jev-devtools) .flow-item-content {
1951
1817
  min-width: 0;
1952
- animation: flow-item-enter 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
1818
+ animation: jev-flow-item-enter 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
1953
1819
  }
1954
- .flow-item-forward {
1820
+ :where(.jev-devtools) .flow-item-forward {
1955
1821
  --flow-item-offset: 28px;
1956
1822
  }
1957
- .flow-item-backward {
1823
+ :where(.jev-devtools) .flow-item-backward {
1958
1824
  --flow-item-offset: -28px;
1959
1825
  }
1960
- @keyframes flow-item-enter {
1826
+ @keyframes jev-flow-item-enter {
1961
1827
  from {
1962
1828
  opacity: 0;
1963
1829
  transform: translateX(var(--flow-item-offset));
@@ -1968,7 +1834,7 @@
1968
1834
  }
1969
1835
  }
1970
1836
  @media (prefers-reduced-motion: reduce) {
1971
- .flow-item-content {
1837
+ :where(.jev-devtools) .flow-item-content {
1972
1838
  animation: none;
1973
1839
  }
1974
1840
  }
@@ -1991,14 +1857,14 @@
1991
1857
  background: #382035;
1992
1858
  border-color: #e551ba;
1993
1859
  }
1994
- .flow-item-arrow svg {
1860
+ :where(.jev-devtools) .flow-item-arrow svg {
1995
1861
  width: 28px;
1996
1862
  height: 28px;
1997
1863
  }
1998
1864
 
1999
- .flow-item-previous {
1865
+ :where(.jev-devtools) .flow-item-previous {
2000
1866
  left: -76px;
2001
1867
  }
2002
- .flow-item-next {
1868
+ :where(.jev-devtools) .flow-item-next {
2003
1869
  right: -76px;
2004
1870
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "jev-devtools",
3
- "version": "0.4.0",
3
+ "version": "0.4.1",
4
4
  "type": "module",
5
5
  "engines": {
6
6
  "node": ">=22.12"
package/skills/setup-jev-devtools/SKILL.md CHANGED
@@ -23,8 +23,8 @@ When asked to build or inspect connected calls, read [references/flows.md](refer
23
23
 
24
24
  ## Integration invariants
25
25
 
26
- - Use only public imports: `jev-devtools`, `jev-devtools/styles.css`, and server-only `jev-devtools/server` and `jev-devtools/flow`. No provider, TanStack DevTools shell, Tailwind, or shadcn setup is needed; TanStack Virtual is an internal dependency.
27
- - Mount `<JevDevtools />` once with an explicit development flag and import the CSS. Server capture must also be explicitly enabled for development; both default to off.
26
+ - Use only public imports: `jev-devtools` and server-only `jev-devtools/server` and `jev-devtools/flow`. No provider, TanStack DevTools shell, Tailwind, or shadcn setup is needed; TanStack Virtual is an internal dependency.
27
+ - Mount `<JevDevtools />` once with an explicit development flag. The drawer injects its own stylesheet into a Shadow DOM host under `document.body`; do not add a `jev-devtools/styles.css` import during setup. The CSS export remains supported for existing integrations. Do not add global `section`/`main` padding overrides to repair the drawer. Keep document-level transforms/filters on an app wrapper rather than `html`/`body`, which can affect fixed overlays. Server capture must also be explicitly enabled for development; both default to off.
28
28
  - Create a shared adapter; the inspector routes and application client must use it in the same Node realm/process. Replace existing `new TypeSafeClient(options)` construction with `inspector.createClient(options)` while preserving keys, transport options, retries, and call semantics. Keep existing `systemOne(...)` inputs and application behavior.
29
29
  - Browser and server `endpoint` paths must agree (default `/api/jev-devtools`). Route the base path and its subpaths. The server `origin` must exactly match the browser scheme, hostname, and port. A browser endpoint is a same-origin path, not an absolute backend URL.
30
30
  - Keep keys in server environment variables, never `VITE_*` or `NEXT_PUBLIC_*`. Use the host's environment loader and an ignored local env file. If a key is unavailable, complete setup and use the clearly labeled sample verification in [references/verify.md](references/verify.md); report that live inference remains unverified.
package/skills/setup-jev-devtools/references/flows.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Build and inspect a Jev flow
2
2
 
3
- For `jev-devtools` **0.4.0**. Read the installed package version and `lib/flow/index.d.ts` first; online `main` may describe newer APIs. Use this recipe when the user asks to connect multiple Jev requests, inspect branches, run server function steps, or visualize parallel checks, collections, and loops. Adding the inspector alone does not require converting existing calls to flows.
3
+ For `jev-devtools` **0.4.1**. Read the installed package version and `lib/flow/index.d.ts` first; online `main` may describe newer APIs. Use this recipe when the user asks to connect multiple Jev requests, inspect branches, run server function steps, or visualize parallel checks, collections, and loops. Adding the inspector alone does not require converting existing calls to flows.
4
4
 
5
5
  ## Plan the integration
6
6
 
@@ -9,7 +9,7 @@ For `jev-devtools` **0.4.0**. Read the installed package version and `lib/flow/i
9
9
  3. Import `defineJevFlow` (and `all`, `any`, `not` when needed) from **server-only** `jev-devtools/flow`. Define the graph once at module scope and call `run()` from the existing Node handler/action. In Next.js, mark the module `server-only` and keep the executing route/segment on the Node runtime. No new client provider or root component is needed.
10
10
  4. A named output returns data and does not execute an action. Existing business actions can remain in the application after the returned outcome; use `task()` when the user wants application-owned server work included in the flow. Preserve authorization, idempotency, input validation, and error handling. Cancellation cannot undo side effects.
11
11
 
12
- If importing question helpers as below, install `@typesafe-ai/sdk` as a direct dependency in the server workspace using its package manager. Version 0.4.0 requires SDK `>=0.7.0 <0.8.0` and is verified with 0.7.0; preserve a compatible existing version rather than silently changing SDK semantics. The flow also accepts ordinary SDK question objects.
12
+ If importing question helpers as below, install `@typesafe-ai/sdk` as a direct dependency in the server workspace using its package manager. Version 0.4.1 requires SDK `>=0.7.0 <0.8.0` and is verified with 0.7.0; preserve a compatible existing version rather than silently changing SDK semantics. The flow also accepts ordinary SDK question objects.
13
13
 
14
14
  ## Complete example: parallel checks, one decision, two outcomes
15
15
 
package/skills/setup-jev-devtools/references/nextjs.md CHANGED
@@ -68,7 +68,7 @@ export function Devtools() {
68
68
  }
69
69
  ```
70
70
 
71
- In the **existing** root layout, import `jev-devtools/styles.css`, import `Devtools`, and add `<Devtools />` inside `<body>` alongside the existing children/providers. Keep the layout a Server Component; do not mark the entire layout `use client`. Ensure segments doing Jev work run on Node, not Edge. The drawer renders no SSR markup and connects after mounting in development.
71
+ In the **existing** root layout, import `Devtools` and add `<Devtools />` inside `<body>` alongside the existing children/providers. Keep the layout a Server Component; do not mark the entire layout `use client`. Ensure segments doing Jev work run on Node, not Edge. The drawer renders no SSR markup and connects after mounting in development. It injects its own stylesheet into its Shadow DOM; no CSS import is needed.
72
72
 
73
73
  ## Verify
74
74
 
package/skills/setup-jev-devtools/references/react-node.md CHANGED
@@ -6,13 +6,12 @@ Add to the existing root without replacing providers or routing:
6
6
 
7
7
  ```tsx
8
8
  import { JevDevtools } from 'jev-devtools';
9
- import 'jev-devtools/styles.css';
10
9
 
11
10
  // Inside the existing root JSX, alongside the app:
12
11
  <JevDevtools enabled={import.meta.env.DEV} defaultOpen={false} />
13
12
  ```
14
13
 
15
- `import.meta.env.DEV` is Vite-specific. For another bundler use its existing development flag. The component is SSR-safe; no provider or client prop is required. `endpoint` defaults to `/api/jev-devtools`. CSS is scoped to the inspector.
14
+ `import.meta.env.DEV` is Vite-specific. For another bundler use its existing development flag. The component is SSR-safe; no provider or client prop is required. `endpoint` defaults to `/api/jev-devtools`. The drawer injects its own stylesheet into its Shadow DOM; no CSS import is needed.
16
15
 
17
16
  ## Existing Express/Connect backend
18
17
 
package/skills/setup-jev-devtools/references/verify.md CHANGED
@@ -68,7 +68,7 @@ Report HTTP/capture checks separately from visual browser checks, and sample ver
68
68
 
69
69
  | Symptom | Check |
70
70
  | --- | --- |
71
- | No launcher | Mount once, import CSS, and explicitly enable in development. It intentionally renders nothing on the server. |
71
+ | No launcher | Mount once and explicitly enable in development. Styles load automatically; no CSS import is needed. It intentionally renders nothing on the server. |
72
72
  | Disconnected or HTML instead of config | Ensure base path **and** subpaths reach the adapter before the SPA fallback; check proxy and Next optional catch-all. |
73
73
  | 403 | Match scheme/hostname/port and Host exactly; preserve proxy Host, verify Origin and authorization. Don't disable guards. |
74
74
  | Connected but empty | Use the adapter's instrumented client, same adapter/key/process and session. Direct SDK clients are not intercepted. |