jev-devtools 0.3.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -9
- package/lib/flow/index.d.ts +62 -1
- package/lib/flow/index.js +466 -25
- package/lib/flow/runtime.d.ts +5 -0
- package/lib/flow/runtime.js +81 -0
- package/lib/server/flows.d.ts +3 -0
- package/lib/server/flows.js +89 -17
- package/lib/server/index.d.ts +6 -1
- package/lib/server/index.js +15 -0
- package/lib/server/recorder.js +7 -2
- package/lib/src/FlowDetailsPanel.d.ts +8 -0
- package/lib/src/FlowDetailsPanel.js +79 -0
- package/lib/src/FlowOverview.d.ts +2 -1
- package/lib/src/FlowOverview.js +292 -80
- package/lib/src/condition-inputs.js +12 -3
- package/lib/src/flow-condition.js +3 -2
- package/lib/src/flow-protocol.d.ts +27 -2
- package/lib/src/inspector-styles.js +1 -1
- package/lib/src/inspector.css +280 -35
- package/lib/src/useDiagramViewport.d.ts +1 -1
- package/lib/src/useDiagramViewport.js +11 -6
- package/package.json +6 -3
- package/skills/setup-jev-devtools/SKILL.md +5 -5
- package/skills/setup-jev-devtools/references/flows.md +86 -9
- package/skills/setup-jev-devtools/references/nextjs.md +2 -0
- package/skills/setup-jev-devtools/references/react-node.md +2 -2
|
@@ -12,24 +12,33 @@ export type FlowCondition = {
|
|
|
12
12
|
name?: string;
|
|
13
13
|
stepId?: string;
|
|
14
14
|
path?: string[];
|
|
15
|
+
source?: "task";
|
|
15
16
|
} | {
|
|
16
17
|
op: "literal";
|
|
17
18
|
value: string | number | boolean | null;
|
|
18
19
|
} | {
|
|
19
|
-
op: "eq" | "lt" | "gte" | "all" | "any" | "not";
|
|
20
|
+
op: "eq" | "lt" | "gt" | "gte" | "all" | "any" | "not";
|
|
20
21
|
args: FlowCondition[];
|
|
21
22
|
};
|
|
22
23
|
/** Structural metadata and authored rules; runtime inputs/answers stay in request captures. */
|
|
23
24
|
export type FlowNode = FlowDisplay & {
|
|
24
25
|
id: string;
|
|
25
|
-
kind: "jev" | "branch" | "parallel" | "output";
|
|
26
|
+
kind: "jev" | "task" | "map" | "loop" | "if" | "merge" | "branch" | "parallel" | "output";
|
|
26
27
|
dependencies: string[];
|
|
27
28
|
path: string[];
|
|
28
29
|
condition?: string;
|
|
30
|
+
/** Conditional merge edges; only the selected arm supplies a value. */
|
|
31
|
+
merge?: {
|
|
32
|
+
condition: string;
|
|
33
|
+
then: string;
|
|
34
|
+
else: string;
|
|
35
|
+
};
|
|
29
36
|
/** Optional for older captures; Json allows redacted/truncated subtrees. */
|
|
30
37
|
conditionRule?: Json | FlowCondition;
|
|
31
38
|
/** Named concurrent lanes; optional for older captures. */
|
|
32
39
|
lanes?: string[];
|
|
40
|
+
/** Reusable item program; map nesting is not supported in v1. */
|
|
41
|
+
itemDefinition?: FlowDefinition;
|
|
33
42
|
};
|
|
34
43
|
export type FlowDefinition = {
|
|
35
44
|
version: 1;
|
|
@@ -46,6 +55,22 @@ export type FlowStep = {
|
|
|
46
55
|
decision?: boolean;
|
|
47
56
|
traceId?: string;
|
|
48
57
|
error?: string;
|
|
58
|
+
/** Optional bounded, redacted task input/output or selected merge value; never executable code. */
|
|
59
|
+
data?: Json;
|
|
60
|
+
captureWarnings?: string[];
|
|
61
|
+
loop?: {
|
|
62
|
+
maxIterations: number;
|
|
63
|
+
stopReason?: "condition" | "limit";
|
|
64
|
+
};
|
|
65
|
+
collection?: {
|
|
66
|
+
total: number;
|
|
67
|
+
concurrency: number;
|
|
68
|
+
items: Array<{
|
|
69
|
+
index: number;
|
|
70
|
+
status: FlowStep["status"];
|
|
71
|
+
run?: FlowRun;
|
|
72
|
+
}>;
|
|
73
|
+
};
|
|
49
74
|
};
|
|
50
75
|
export type FlowRun = {
|
|
51
76
|
version: 1;
|
|
@@ -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: auto;\n}\n.flow-overview-viewport {\n position: relative;\n min-height: 240px;\n flex: 1 0 260px;\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 color: #c0b8c4;\n pointer-events: none;\n}\n.flow-step {\n position: absolute;\n width: 220px;\n min-height: 98px;\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 overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\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 height: 64px;\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-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-step > strong {\n white-space: normal;\n font-size: 18px;\n line-height: 1.25;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow-wrap: anywhere;\n}\n.flow-step-description {\n line-height: 1.5;\n color: #b9aebf;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\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 overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\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 overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\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: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\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: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\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 overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.flow-condition-input > b {\n font-size: 17px;\n font-weight: 600;\n color: #f2d7eb;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\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";
|
|
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";
|
package/lib/src/inspector.css
CHANGED
|
@@ -1274,12 +1274,74 @@
|
|
|
1274
1274
|
/* Connected requests share one camera and one opt-in full request detail. */
|
|
1275
1275
|
.whole-flow {
|
|
1276
1276
|
min-width: 0;
|
|
1277
|
+
overflow: hidden;
|
|
1278
|
+
}
|
|
1279
|
+
.whole-flow > .detail-header,
|
|
1280
|
+
.whole-flow > .lab-flow-toolbar {
|
|
1281
|
+
flex-shrink: 0;
|
|
1282
|
+
}
|
|
1283
|
+
.flow-workspace {
|
|
1284
|
+
display: flex;
|
|
1285
|
+
flex-direction: column;
|
|
1286
|
+
flex: 1;
|
|
1287
|
+
min-height: 0;
|
|
1288
|
+
overflow: hidden;
|
|
1289
|
+
}
|
|
1290
|
+
.flow-details-panel {
|
|
1291
|
+
flex: none;
|
|
1292
|
+
min-width: 0;
|
|
1293
|
+
background: #130f17;
|
|
1294
|
+
border-top: 1px solid #342a38;
|
|
1295
|
+
}
|
|
1296
|
+
.flow-details-bar {
|
|
1297
|
+
display: flex;
|
|
1298
|
+
align-items: center;
|
|
1299
|
+
gap: 12px;
|
|
1300
|
+
height: 36px;
|
|
1301
|
+
padding: 0 12px;
|
|
1302
|
+
}
|
|
1303
|
+
.jev-devtools .flow-details-bar button {
|
|
1304
|
+
flex: none;
|
|
1305
|
+
padding: 4px 8px;
|
|
1306
|
+
font-size: 11px;
|
|
1307
|
+
}
|
|
1308
|
+
.flow-details-bar > span {
|
|
1309
|
+
color: #b5a6bc;
|
|
1310
|
+
font-size: 11px;
|
|
1311
|
+
overflow: hidden;
|
|
1312
|
+
white-space: nowrap;
|
|
1313
|
+
text-overflow: ellipsis;
|
|
1314
|
+
}
|
|
1315
|
+
.flow-details-body {
|
|
1277
1316
|
overflow: auto;
|
|
1317
|
+
overscroll-behavior: contain;
|
|
1318
|
+
scrollbar-gutter: stable;
|
|
1319
|
+
}
|
|
1320
|
+
.flow-details-resize {
|
|
1321
|
+
display: flex;
|
|
1322
|
+
align-items: center;
|
|
1323
|
+
justify-content: center;
|
|
1324
|
+
height: 8px;
|
|
1325
|
+
cursor: ns-resize;
|
|
1326
|
+
touch-action: none;
|
|
1327
|
+
user-select: none;
|
|
1328
|
+
}
|
|
1329
|
+
.flow-details-resize span {
|
|
1330
|
+
width: 40px;
|
|
1331
|
+
height: 2px;
|
|
1332
|
+
border-radius: 2px;
|
|
1333
|
+
background: #6c5874;
|
|
1334
|
+
}
|
|
1335
|
+
.flow-details-resize:hover,
|
|
1336
|
+
.flow-details-resize:focus-visible {
|
|
1337
|
+
background: #392239;
|
|
1338
|
+
outline: 1px solid #e551ba;
|
|
1339
|
+
outline-offset: -1px;
|
|
1278
1340
|
}
|
|
1279
1341
|
.flow-overview-viewport {
|
|
1280
1342
|
position: relative;
|
|
1281
|
-
min-height:
|
|
1282
|
-
flex: 1 0
|
|
1343
|
+
min-height: 0;
|
|
1344
|
+
flex: 1 1 0;
|
|
1283
1345
|
overflow: hidden;
|
|
1284
1346
|
touch-action: none;
|
|
1285
1347
|
cursor: grab;
|
|
@@ -1300,13 +1362,15 @@
|
|
|
1300
1362
|
.flow-connections {
|
|
1301
1363
|
position: absolute;
|
|
1302
1364
|
inset: 0;
|
|
1365
|
+
overflow: visible;
|
|
1303
1366
|
color: #c0b8c4;
|
|
1304
1367
|
pointer-events: none;
|
|
1305
1368
|
}
|
|
1306
1369
|
.flow-step {
|
|
1307
1370
|
position: absolute;
|
|
1308
1371
|
width: 220px;
|
|
1309
|
-
min-height:
|
|
1372
|
+
min-height: 172px;
|
|
1373
|
+
overflow-wrap: anywhere;
|
|
1310
1374
|
display: flex;
|
|
1311
1375
|
flex-direction: column;
|
|
1312
1376
|
gap: 8px;
|
|
@@ -1318,9 +1382,7 @@
|
|
|
1318
1382
|
color: inherit;
|
|
1319
1383
|
}
|
|
1320
1384
|
.flow-step strong {
|
|
1321
|
-
|
|
1322
|
-
text-overflow: ellipsis;
|
|
1323
|
-
white-space: nowrap;
|
|
1385
|
+
white-space: normal;
|
|
1324
1386
|
width: 100%;
|
|
1325
1387
|
}
|
|
1326
1388
|
.flow-step-description {
|
|
@@ -1337,7 +1399,8 @@
|
|
|
1337
1399
|
}
|
|
1338
1400
|
.flow-request-heading {
|
|
1339
1401
|
width: 100%;
|
|
1340
|
-
height: 64px;
|
|
1402
|
+
min-height: 64px;
|
|
1403
|
+
gap: 20px;
|
|
1341
1404
|
display: flex;
|
|
1342
1405
|
align-items: center;
|
|
1343
1406
|
justify-content: space-between;
|
|
@@ -1422,6 +1485,42 @@
|
|
|
1422
1485
|
.flow-card-heading {
|
|
1423
1486
|
justify-content: flex-start;
|
|
1424
1487
|
}
|
|
1488
|
+
.flow-task .flow-kind-icon {
|
|
1489
|
+
border: 1px solid currentColor;
|
|
1490
|
+
border-radius: 6px;
|
|
1491
|
+
padding: 4px;
|
|
1492
|
+
}
|
|
1493
|
+
.flow-task-preview {
|
|
1494
|
+
display: grid;
|
|
1495
|
+
gap: 8px;
|
|
1496
|
+
min-width: 0;
|
|
1497
|
+
}
|
|
1498
|
+
.jev-devtools .flow-task-preview .diagram-content {
|
|
1499
|
+
max-height: 280px;
|
|
1500
|
+
padding: 8px 10px;
|
|
1501
|
+
border: 1px solid #35283b;
|
|
1502
|
+
border-radius: 4px;
|
|
1503
|
+
background: #100c13;
|
|
1504
|
+
}
|
|
1505
|
+
.flow-task-preview small {
|
|
1506
|
+
color: var(--muted);
|
|
1507
|
+
font-size: 11px;
|
|
1508
|
+
}
|
|
1509
|
+
.flow-task-details {
|
|
1510
|
+
display: grid;
|
|
1511
|
+
gap: 12px;
|
|
1512
|
+
}
|
|
1513
|
+
.flow-task-details details {
|
|
1514
|
+
min-width: 0;
|
|
1515
|
+
}
|
|
1516
|
+
.flow-task-details summary {
|
|
1517
|
+
cursor: pointer;
|
|
1518
|
+
margin-bottom: 8px;
|
|
1519
|
+
}
|
|
1520
|
+
.flow-task-details .diagram-content {
|
|
1521
|
+
max-height: 320px;
|
|
1522
|
+
overflow: auto;
|
|
1523
|
+
}
|
|
1425
1524
|
.flow-kind-icon {
|
|
1426
1525
|
width: 26px;
|
|
1427
1526
|
height: 26px;
|
|
@@ -1450,22 +1549,16 @@
|
|
|
1450
1549
|
.flow-step[data-status="untaken"] .flow-kind-icon {
|
|
1451
1550
|
color: #948797;
|
|
1452
1551
|
}
|
|
1453
|
-
.flow-
|
|
1552
|
+
.flow-card-body > strong {
|
|
1454
1553
|
white-space: normal;
|
|
1455
1554
|
font-size: 18px;
|
|
1456
1555
|
line-height: 1.25;
|
|
1457
|
-
display: -webkit-box;
|
|
1458
|
-
-webkit-line-clamp: 2;
|
|
1459
|
-
-webkit-box-orient: vertical;
|
|
1460
1556
|
overflow-wrap: anywhere;
|
|
1461
1557
|
}
|
|
1462
1558
|
.flow-step-description {
|
|
1463
1559
|
line-height: 1.5;
|
|
1464
1560
|
color: #b9aebf;
|
|
1465
|
-
|
|
1466
|
-
-webkit-line-clamp: 3;
|
|
1467
|
-
-webkit-box-orient: vertical;
|
|
1468
|
-
overflow: hidden;
|
|
1561
|
+
white-space: pre-wrap;
|
|
1469
1562
|
}
|
|
1470
1563
|
.flow-card-footer {
|
|
1471
1564
|
margin-top: auto;
|
|
@@ -1476,9 +1569,8 @@
|
|
|
1476
1569
|
}
|
|
1477
1570
|
.flow-card-footer code {
|
|
1478
1571
|
max-width: 45%;
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
white-space: nowrap;
|
|
1572
|
+
white-space: normal;
|
|
1573
|
+
overflow-wrap: anywhere;
|
|
1482
1574
|
}
|
|
1483
1575
|
.flow-card-footer small {
|
|
1484
1576
|
text-align: right;
|
|
@@ -1506,9 +1598,8 @@
|
|
|
1506
1598
|
min-height: 28px;
|
|
1507
1599
|
}
|
|
1508
1600
|
.flow-lane > span {
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
white-space: nowrap;
|
|
1601
|
+
min-width: 0;
|
|
1602
|
+
overflow-wrap: anywhere;
|
|
1512
1603
|
}
|
|
1513
1604
|
.flow-lane > span > span {
|
|
1514
1605
|
color: #ef9ed9;
|
|
@@ -1526,10 +1617,8 @@
|
|
|
1526
1617
|
max-width: 80%;
|
|
1527
1618
|
}
|
|
1528
1619
|
.flow-request-description {
|
|
1529
|
-
display:
|
|
1530
|
-
-
|
|
1531
|
-
-webkit-box-orient: vertical;
|
|
1532
|
-
overflow: hidden;
|
|
1620
|
+
display: block;
|
|
1621
|
+
white-space: pre-wrap;
|
|
1533
1622
|
font-size: 12px;
|
|
1534
1623
|
line-height: 1.5;
|
|
1535
1624
|
color: #b9aebf;
|
|
@@ -1702,10 +1791,8 @@
|
|
|
1702
1791
|
margin-bottom: 5px;
|
|
1703
1792
|
}
|
|
1704
1793
|
.flow-condition-rule code {
|
|
1705
|
-
display:
|
|
1706
|
-
-
|
|
1707
|
-
-webkit-box-orient: vertical;
|
|
1708
|
-
overflow: hidden;
|
|
1794
|
+
display: block;
|
|
1795
|
+
white-space: pre-wrap;
|
|
1709
1796
|
overflow-wrap: anywhere;
|
|
1710
1797
|
font:
|
|
1711
1798
|
12px/1.6 ui-monospace,
|
|
@@ -1728,17 +1815,15 @@
|
|
|
1728
1815
|
padding: 3px 0;
|
|
1729
1816
|
}
|
|
1730
1817
|
.flow-condition-input > span {
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
white-space: nowrap;
|
|
1818
|
+
min-width: 0;
|
|
1819
|
+
overflow-wrap: anywhere;
|
|
1734
1820
|
}
|
|
1735
1821
|
.flow-condition-input > b {
|
|
1736
1822
|
font-size: 17px;
|
|
1737
1823
|
font-weight: 600;
|
|
1738
1824
|
color: #f2d7eb;
|
|
1739
|
-
overflow:
|
|
1740
|
-
|
|
1741
|
-
white-space: nowrap;
|
|
1825
|
+
overflow-wrap: anywhere;
|
|
1826
|
+
white-space: normal;
|
|
1742
1827
|
max-width: 65%;
|
|
1743
1828
|
}
|
|
1744
1829
|
.flow-input-details {
|
|
@@ -1757,3 +1842,163 @@
|
|
|
1757
1842
|
margin: 0;
|
|
1758
1843
|
overflow-wrap: anywhere;
|
|
1759
1844
|
}
|
|
1845
|
+
|
|
1846
|
+
.flow-overview-stack {
|
|
1847
|
+
display: flex;
|
|
1848
|
+
flex-direction: column;
|
|
1849
|
+
flex: 1;
|
|
1850
|
+
min-height: 0;
|
|
1851
|
+
min-width: 0;
|
|
1852
|
+
overflow: hidden;
|
|
1853
|
+
}
|
|
1854
|
+
.flow-map-progress {
|
|
1855
|
+
display: grid;
|
|
1856
|
+
gap: 10px;
|
|
1857
|
+
font-size: 14px;
|
|
1858
|
+
line-height: 1.5;
|
|
1859
|
+
}
|
|
1860
|
+
.flow-map-progress small {
|
|
1861
|
+
color: #b5a6bc;
|
|
1862
|
+
}
|
|
1863
|
+
|
|
1864
|
+
.jev-devtools .flow-card-body {
|
|
1865
|
+
display: flex;
|
|
1866
|
+
flex-direction: column;
|
|
1867
|
+
gap: 8px;
|
|
1868
|
+
width: 100%;
|
|
1869
|
+
flex: 1;
|
|
1870
|
+
padding: 0;
|
|
1871
|
+
border: 0;
|
|
1872
|
+
border-radius: 0;
|
|
1873
|
+
background: transparent;
|
|
1874
|
+
color: inherit;
|
|
1875
|
+
font: inherit;
|
|
1876
|
+
text-align: left;
|
|
1877
|
+
}
|
|
1878
|
+
.jev-devtools .flow-card-body:hover {
|
|
1879
|
+
background: transparent;
|
|
1880
|
+
}
|
|
1881
|
+
.flow-collection-controls {
|
|
1882
|
+
display: flex;
|
|
1883
|
+
align-items: end;
|
|
1884
|
+
gap: 10px;
|
|
1885
|
+
border-top: 1px solid #49324b;
|
|
1886
|
+
margin-top: 4px;
|
|
1887
|
+
padding-top: 12px;
|
|
1888
|
+
}
|
|
1889
|
+
.flow-collection-controls label {
|
|
1890
|
+
display: grid;
|
|
1891
|
+
gap: 6px;
|
|
1892
|
+
flex: 1;
|
|
1893
|
+
min-width: 0;
|
|
1894
|
+
color: #b9aebf;
|
|
1895
|
+
font-size: 11px;
|
|
1896
|
+
}
|
|
1897
|
+
.jev-devtools .flow-collection-controls select {
|
|
1898
|
+
width: 100%;
|
|
1899
|
+
min-width: 0;
|
|
1900
|
+
}
|
|
1901
|
+
.jev-devtools .flow-collection-controls button {
|
|
1902
|
+
flex: none;
|
|
1903
|
+
color: #efb1df;
|
|
1904
|
+
}
|
|
1905
|
+
.flow-collection-expansion {
|
|
1906
|
+
position: absolute;
|
|
1907
|
+
width: max-content;
|
|
1908
|
+
}
|
|
1909
|
+
.flow-item-frame {
|
|
1910
|
+
border: 1px solid #64415d;
|
|
1911
|
+
border-radius: 12px;
|
|
1912
|
+
background: #100c13;
|
|
1913
|
+
overflow: hidden;
|
|
1914
|
+
}
|
|
1915
|
+
.flow-collection-heading {
|
|
1916
|
+
display: flex;
|
|
1917
|
+
align-items: center;
|
|
1918
|
+
justify-content: space-between;
|
|
1919
|
+
gap: 24px;
|
|
1920
|
+
padding: 16px 20px;
|
|
1921
|
+
border-bottom: 1px solid #49324b;
|
|
1922
|
+
background: #1c1220;
|
|
1923
|
+
}
|
|
1924
|
+
.flow-collection-heading h3 {
|
|
1925
|
+
margin: 5px 0;
|
|
1926
|
+
font-size: 16px;
|
|
1927
|
+
}
|
|
1928
|
+
.flow-collection-heading small {
|
|
1929
|
+
color: #b9aebf;
|
|
1930
|
+
}
|
|
1931
|
+
.flow-collection-link text {
|
|
1932
|
+
fill: #ce9abd;
|
|
1933
|
+
font-size: 12px;
|
|
1934
|
+
}
|
|
1935
|
+
.flow-item-placeholder {
|
|
1936
|
+
width: 600px;
|
|
1937
|
+
padding: 24px;
|
|
1938
|
+
line-height: 1.6;
|
|
1939
|
+
}
|
|
1940
|
+
.flow-inline-overview,
|
|
1941
|
+
.flow-inline-overview > .whole-flow,
|
|
1942
|
+
.flow-inline-overview > .whole-flow > .flow-workspace {
|
|
1943
|
+
display: block;
|
|
1944
|
+
flex: none;
|
|
1945
|
+
}
|
|
1946
|
+
.flow-inline-surface {
|
|
1947
|
+
position: relative;
|
|
1948
|
+
}
|
|
1949
|
+
|
|
1950
|
+
.flow-item-content {
|
|
1951
|
+
min-width: 0;
|
|
1952
|
+
animation: flow-item-enter 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
|
|
1953
|
+
}
|
|
1954
|
+
.flow-item-forward {
|
|
1955
|
+
--flow-item-offset: 28px;
|
|
1956
|
+
}
|
|
1957
|
+
.flow-item-backward {
|
|
1958
|
+
--flow-item-offset: -28px;
|
|
1959
|
+
}
|
|
1960
|
+
@keyframes flow-item-enter {
|
|
1961
|
+
from {
|
|
1962
|
+
opacity: 0;
|
|
1963
|
+
transform: translateX(var(--flow-item-offset));
|
|
1964
|
+
}
|
|
1965
|
+
to {
|
|
1966
|
+
opacity: 1;
|
|
1967
|
+
transform: translateX(0);
|
|
1968
|
+
}
|
|
1969
|
+
}
|
|
1970
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1971
|
+
.flow-item-content {
|
|
1972
|
+
animation: none;
|
|
1973
|
+
}
|
|
1974
|
+
}
|
|
1975
|
+
.jev-devtools .flow-item-arrow {
|
|
1976
|
+
position: absolute;
|
|
1977
|
+
top: 50%;
|
|
1978
|
+
transform: translateY(-50%);
|
|
1979
|
+
display: grid;
|
|
1980
|
+
place-items: center;
|
|
1981
|
+
width: 56px;
|
|
1982
|
+
height: 56px;
|
|
1983
|
+
padding: 12px;
|
|
1984
|
+
margin: 0 auto;
|
|
1985
|
+
border: 1px solid #64415d;
|
|
1986
|
+
border-radius: 6px;
|
|
1987
|
+
background: #211623;
|
|
1988
|
+
color: #efa7db;
|
|
1989
|
+
}
|
|
1990
|
+
.jev-devtools .flow-item-arrow:hover:not(:disabled) {
|
|
1991
|
+
background: #382035;
|
|
1992
|
+
border-color: #e551ba;
|
|
1993
|
+
}
|
|
1994
|
+
.flow-item-arrow svg {
|
|
1995
|
+
width: 28px;
|
|
1996
|
+
height: 28px;
|
|
1997
|
+
}
|
|
1998
|
+
|
|
1999
|
+
.flow-item-previous {
|
|
2000
|
+
left: -76px;
|
|
2001
|
+
}
|
|
2002
|
+
.flow-item-next {
|
|
2003
|
+
right: -76px;
|
|
2004
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type Point } from "./diagram-camera.js";
|
|
2
2
|
/** Lab-style camera. Pointer frames update the transform without rerendering cards. */
|
|
3
|
-
export declare function useDiagramViewport(width: number, height: number, scene: string): {
|
|
3
|
+
export declare function useDiagramViewport(width: number, height: number, scene: string, origin?: Point): {
|
|
4
4
|
viewport: import("react").RefObject<HTMLDivElement | null>;
|
|
5
5
|
canvas: import("react").RefObject<HTMLDivElement | null>;
|
|
6
6
|
zoom: number;
|