@workbench-kit/shell-react 0.0.2-prototype.0.2.6 → 0.0.2-prototype.0.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (95) hide show
  1. package/README.md +41 -0
  2. package/package.json +9 -9
  3. package/src/{chat-ai-mock-proposals.ts → chat/ai-mock-proposals.ts} +39 -39
  4. package/src/{chat-command-input.ts → chat/command-input.ts} +52 -52
  5. package/src/{chat-command-policy.ts → chat/command-policy.ts} +54 -54
  6. package/src/{chat-command-surface.tsx → chat/command-surface.tsx} +155 -155
  7. package/src/{use-workbench-chat-command-proposals.ts → chat/use-chat-command-proposals.ts} +194 -194
  8. package/src/{chat-view-data.ts → chat/view-data.ts} +20 -20
  9. package/src/{chat-view.tsx → chat/view.tsx} +220 -220
  10. package/src/{command-inspector-surface.tsx → commands/inspector-surface.tsx} +46 -46
  11. package/src/{use-workbench-command-descriptors.ts → commands/use-command-descriptors.ts} +41 -41
  12. package/src/{use-context-key-revision.ts → commands/use-context-key-revision.ts} +18 -18
  13. package/src/{commands-view-data.ts → commands/view-data.ts} +17 -17
  14. package/src/{commands-view.tsx → commands/view.tsx} +43 -43
  15. package/src/devtools/WorkbenchDevtoolsPanel.tsx +124 -124
  16. package/src/devtools/WorkbenchDevtoolsShell.tsx +17 -17
  17. package/src/devtools/index.ts +11 -11
  18. package/src/devtools/use-workbench-devtools-snapshot.ts +84 -84
  19. package/src/devtools/workbench-devtools-snapshot.ts +140 -140
  20. package/src/devtools/workbench-devtools.css +82 -82
  21. package/src/{editor-area-dnd.ts → editor/area-dnd.ts} +69 -69
  22. package/src/{editor-area-model.ts → editor/area-model.ts} +71 -71
  23. package/src/{editor-area.css → editor/area.css} +454 -454
  24. package/src/{editor-area.tsx → editor/area.tsx} +676 -676
  25. package/src/{editor-host-surface.tsx → editor/host-surface.tsx} +631 -634
  26. package/src/{editor-pane-visibility.ts → editor/pane-visibility.ts} +130 -130
  27. package/src/{editor-resource.ts → editor/resource.ts} +36 -36
  28. package/src/{editor-state-storage.ts → editor/state-storage.ts} +182 -193
  29. package/src/{editor-tab-context-menu.ts → editor/tab-context-menu.ts} +118 -118
  30. package/src/{use-editor.ts → editor/use-editor.ts} +114 -107
  31. package/src/{editor-view-providers.tsx → editor/view-providers.tsx} +552 -552
  32. package/src/{editor-workspace-file-availability.ts → editor/workspace-file-availability.ts} +15 -15
  33. package/src/{editor-workspace-reconcile.tsx → editor/workspace-reconcile.tsx} +31 -28
  34. package/src/{explorer-context-menu.ts → explorer/context-menu.ts} +114 -114
  35. package/src/{createCommandWorkspaceExplorerPort.ts → explorer/create-command-workspace-explorer-port.ts} +86 -86
  36. package/src/{explorer-reveal.ts → explorer/reveal.ts} +112 -112
  37. package/src/{search-view-data.ts → explorer/search-view-data.ts} +15 -15
  38. package/src/{search-view.tsx → explorer/search-view.tsx} +65 -62
  39. package/src/{use-active-workspace-path.ts → explorer/use-active-workspace-path.ts} +15 -15
  40. package/src/{explorer-view-data.ts → explorer/view-data.ts} +58 -58
  41. package/src/{explorer-view.tsx → explorer/view.tsx} +227 -224
  42. package/src/{extension-context-menu.ts → extensions/context-menu.ts} +52 -52
  43. package/src/{extension-management-model.ts → extensions/management-model.ts} +313 -313
  44. package/src/{use-extension-management.ts → extensions/use-extension-management.ts} +241 -193
  45. package/src/{extensions-view-data.ts → extensions/view-data.ts} +19 -19
  46. package/src/{extensions-view.tsx → extensions/view.tsx} +63 -38
  47. package/src/{field-remap-demo.tsx → field-remap/demo.tsx} +18 -18
  48. package/src/{field-remap-editor-surface.tsx → field-remap/editor-surface.tsx} +36 -36
  49. package/src/{field-remap-flow-adapter.ts → field-remap/flow-adapter.ts} +240 -240
  50. package/src/{field-remap-flow.tsx → field-remap/flow.tsx} +369 -369
  51. package/src/{field-remap-graph.tsx → field-remap/graph.tsx} +559 -559
  52. package/src/field-remap/jsonata-transform.ts +166 -0
  53. package/src/{field-remap-panel.tsx → field-remap/panel.tsx} +193 -175
  54. package/src/{field-remap-samples.ts → field-remap/samples.ts} +352 -352
  55. package/src/{table-mapping-adapter.ts → field-remap/table-mapping-adapter.ts} +59 -59
  56. package/src/{field-remap-tree.tsx → field-remap/tree.tsx} +404 -404
  57. package/src/{field-remap-view-data.ts → field-remap/view-data.ts} +16 -16
  58. package/src/{field-remap-view.css → field-remap/view.css} +676 -676
  59. package/src/{field-remap-view.tsx → field-remap/view.tsx} +86 -86
  60. package/src/index.ts +212 -199
  61. package/src/{json-form-source-patch.ts → jdw/json-form-source-patch.ts} +323 -323
  62. package/src/{jdw-lab-view-data.ts → jdw/lab-view-data.ts} +25 -25
  63. package/src/{jdw-lab-view.css → jdw/lab-view.css} +21 -21
  64. package/src/{jdw-lab-view.tsx → jdw/lab-view.tsx} +79 -79
  65. package/src/{jdw-widget-form-view.tsx → jdw/widget-form-view.tsx} +68 -65
  66. package/src/{jdw-widget-preview-view.tsx → jdw/widget-preview-view.tsx} +54 -51
  67. package/src/{keybinding-overrides-storage.ts → management/keybinding-overrides-storage.ts} +49 -57
  68. package/src/{keybinding-management-settings.tsx → management/keybinding-settings.tsx} +16 -16
  69. package/src/{management-palette-commands.ts → management/palette-commands.ts} +38 -38
  70. package/src/{preference-settings-storage.ts → management/preference-settings-storage.ts} +50 -58
  71. package/src/{management-settings-ids.ts → management/settings-ids.ts} +12 -12
  72. package/src/{management-settings.tsx → management/settings.tsx} +96 -75
  73. package/src/{use-command-management.ts → management/use-command-management.ts} +191 -191
  74. package/src/{use-keybinding-management.ts → management/use-keybinding-management.ts} +130 -130
  75. package/src/{shell-model.tsx → shell/model.tsx} +149 -149
  76. package/src/{provider.tsx → shell/provider.tsx} +603 -573
  77. package/src/{shell-secondary-actions.tsx → shell/secondary-actions.tsx} +59 -59
  78. package/src/{shell-settings-constants.ts → shell/settings-constants.ts} +9 -9
  79. package/src/{shell-settings.tsx → shell/settings.tsx} +599 -599
  80. package/src/{shell.tsx → shell/shell.tsx} +680 -649
  81. package/src/{shell-titlebar-layout-controls.tsx → shell/titlebar-layout-controls.tsx} +4 -4
  82. package/src/{shell-view-host.tsx → shell/view-host.tsx} +212 -199
  83. package/src/{workbench-appearance-storage.ts → workbench/appearance-storage.ts} +107 -115
  84. package/src/{workbench-command-host.tsx → workbench/command-host.tsx} +243 -243
  85. package/src/{workbench-command-palette.ts → workbench/command-palette.ts} +208 -208
  86. package/src/{workbench-keybinding-bridge.ts → workbench/keybinding-bridge.ts} +54 -54
  87. package/src/{workbench-layout-storage.ts → workbench/layout-storage.ts} +134 -145
  88. package/src/{workbench-profile-modal.tsx → workbench/profile-modal.tsx} +118 -118
  89. package/src/{workbench-shell-command-registration.ts → workbench/shell-command-registration.ts} +58 -58
  90. package/src/{workbench-startup-gate.tsx → workbench/startup-gate.tsx} +136 -136
  91. package/src/{workbench-status-sections.ts → workbench/status-sections.ts} +43 -43
  92. package/src/{use-persisted-workbench-appearance.ts → workbench/use-persisted-appearance.ts} +33 -33
  93. package/src/{workbench-user-commands.ts → workbench/user-commands.ts} +46 -46
  94. package/src/{workspace-view-state.ts → workbench/workspace-view-state.ts} +35 -35
  95. package/src/jsonata-transform.ts +0 -36
package/src/{field-remap-view.css → field-remap/view.css} RENAMED
@@ -1,676 +1,676 @@
1
- .workbench-field-remap-view {
2
- height: 100%;
3
- }
4
-
5
- .workbench-field-remap-view__list {
6
- padding: 0.5rem;
7
- }
8
-
9
- .workbench-field-remap-editor-surface {
10
- box-sizing: border-box;
11
- flex: 1 1 auto;
12
- align-self: stretch;
13
- width: 100%;
14
- min-width: 0;
15
- height: 100%;
16
- color: var(--vscode-editor-foreground, var(--color-text));
17
- background: var(--vscode-editor-background, var(--color-bg));
18
- }
19
-
20
- .workbench-field-remap-demo {
21
- box-sizing: border-box;
22
- display: flex;
23
- flex-direction: column;
24
- gap: 1rem;
25
- width: 100%;
26
- min-width: 0;
27
- min-height: 0;
28
- padding: 1.25rem 1.5rem;
29
- color: var(--vscode-editor-foreground, var(--color-text));
30
- }
31
-
32
- .workbench-field-remap-demo__header {
33
- display: flex;
34
- flex-direction: column;
35
- gap: 0.35rem;
36
- }
37
-
38
- .workbench-field-remap-demo__title {
39
- margin: 0;
40
- font-size: 1.25rem;
41
- font-weight: 600;
42
- color: var(--vscode-editor-foreground, var(--color-text));
43
- }
44
-
45
- .workbench-field-remap-demo__intro {
46
- margin: 0;
47
- color: var(--vscode-descriptionForeground, var(--color-text-muted));
48
- font-size: 0.875rem;
49
- line-height: 1.45;
50
- }
51
-
52
- .workbench-field-remap-demo__intro code {
53
- font-size: 0.8em;
54
- }
55
-
56
- .workbench-field-remap-demo__error {
57
- margin: 0;
58
- color: var(--vscode-errorForeground, var(--color-danger));
59
- font-size: 0.875rem;
60
- }
61
-
62
- .workbench-field-remap-demo__warn {
63
- margin: 0;
64
- color: var(--vscode-editorWarning-foreground, var(--color-warning, #b89500));
65
- font-size: 0.875rem;
66
- }
67
-
68
- .workbench-field-remap-demo__panes {
69
- display: grid;
70
- grid-template-columns: repeat(2, minmax(0, 1fr));
71
- gap: 1rem;
72
- }
73
-
74
- @media (max-width: 800px) {
75
- .workbench-field-remap-demo__panes {
76
- grid-template-columns: 1fr;
77
- }
78
- }
79
-
80
- .workbench-field-remap-demo__pane {
81
- display: flex;
82
- flex-direction: column;
83
- gap: 0.5rem;
84
- min-width: 0;
85
- }
86
-
87
- .workbench-field-remap-demo__pane h3 {
88
- margin: 0;
89
- font-size: 0.8rem;
90
- font-weight: 600;
91
- letter-spacing: 0.02em;
92
- text-transform: uppercase;
93
- color: var(--vscode-descriptionForeground, var(--color-text-muted));
94
- }
95
-
96
- .workbench-field-remap-demo__pane pre {
97
- margin: 0;
98
- padding: 0.75rem;
99
- border: 1px solid var(--vscode-panel-border, var(--color-border));
100
- border-radius: 0.375rem;
101
- background: var(--vscode-input-background, var(--color-input-bg, var(--color-surface)));
102
- color: var(--vscode-editor-foreground, var(--color-text));
103
- font-size: 0.8rem;
104
- line-height: 1.4;
105
- overflow: auto;
106
- white-space: pre-wrap;
107
- word-break: break-word;
108
- font-family: var(
109
- --vscode-editor-font-family,
110
- ui-monospace,
111
- SFMono-Regular,
112
- Menlo,
113
- Consolas,
114
- monospace
115
- );
116
- }
117
-
118
- .workbench-field-remap-mapper {
119
- display: flex;
120
- flex-direction: column;
121
- gap: 0.75rem;
122
- min-height: 22rem;
123
- padding: 0.75rem;
124
- border: 1px solid var(--vscode-panel-border, var(--color-border));
125
- border-radius: 0.375rem;
126
- background: var(--color-surface);
127
- }
128
-
129
- .workbench-field-remap-mapper__hint {
130
- margin: 0;
131
- font-size: 0.8rem;
132
- color: var(--vscode-descriptionForeground, var(--color-text-muted));
133
- }
134
-
135
- .workbench-field-remap-mapper__columns {
136
- display: grid;
137
- grid-template-columns: repeat(2, minmax(0, 1fr));
138
- gap: 0.75rem;
139
- min-height: 14rem;
140
- }
141
-
142
- .workbench-field-remap-graph {
143
- display: grid;
144
- grid-template-columns: minmax(10rem, 1fr) minmax(18rem, 2.2fr) minmax(10rem, 1fr);
145
- gap: 0.75rem;
146
- min-height: 16rem;
147
- align-items: stretch;
148
- }
149
-
150
- @media (max-width: 960px) {
151
- .workbench-field-remap-graph {
152
- grid-template-columns: 1fr;
153
- }
154
- }
155
-
156
- .workbench-field-remap-graph__center {
157
- min-width: 0;
158
- border: 1px solid var(--vscode-panel-border, var(--color-border));
159
- border-radius: 0.25rem;
160
- background: var(--vscode-editor-background, var(--color-bg));
161
- overflow: auto;
162
- }
163
-
164
- .workbench-field-remap-graph__empty {
165
- margin: 0;
166
- padding: 0.75rem;
167
- font-size: 0.8rem;
168
- color: var(--vscode-descriptionForeground, var(--color-text-muted));
169
- }
170
-
171
- .workbench-field-remap-graph__keys {
172
- list-style: none;
173
- margin: 0;
174
- padding: 0.25rem 0;
175
- }
176
-
177
- .workbench-field-remap-graph__key {
178
- display: flex;
179
- align-items: center;
180
- gap: 0.35rem;
181
- width: calc(100% - 0.5rem);
182
- margin: 0.1rem 0.25rem;
183
- padding: 0.25rem 0.4rem;
184
- border: 0;
185
- border-radius: 0.2rem;
186
- background: transparent;
187
- color: inherit;
188
- text-align: left;
189
- cursor: pointer;
190
- font-size: 0.85rem;
191
- }
192
-
193
- .workbench-field-remap-graph__key:hover {
194
- background: var(--vscode-list-hoverBackground, rgba(127, 127, 127, 0.12));
195
- }
196
-
197
- .workbench-field-remap-graph__key.is-selected {
198
- background: var(--vscode-list-activeSelectionBackground, var(--color-accent-muted, #2a4a6a));
199
- color: var(--vscode-list-activeSelectionForeground, var(--color-text));
200
- }
201
-
202
- .workbench-field-remap-graph__key.is-mapped {
203
- font-weight: 600;
204
- }
205
-
206
- .workbench-field-remap-graph__lanes {
207
- list-style: none;
208
- margin: 0;
209
- padding: 0.4rem;
210
- display: flex;
211
- flex-direction: column;
212
- gap: 0.4rem;
213
- }
214
-
215
- .workbench-field-remap-graph__lane {
216
- display: flex;
217
- flex-wrap: wrap;
218
- align-items: center;
219
- gap: 0.35rem;
220
- padding: 0.45rem 0.5rem;
221
- border: 1px solid var(--vscode-panel-border, var(--color-border));
222
- border-radius: 0.25rem;
223
- background: var(--color-surface);
224
- }
225
-
226
- .workbench-field-remap-graph__lane.is-selected {
227
- border-color: var(--vscode-focusBorder, var(--color-accent, #3794ff));
228
- }
229
-
230
- .workbench-field-remap-graph__endpoint {
231
- max-width: 8rem;
232
- overflow: hidden;
233
- text-overflow: ellipsis;
234
- white-space: nowrap;
235
- padding: 0.2rem 0.4rem;
236
- border: 1px solid var(--vscode-panel-border, var(--color-border));
237
- border-radius: 0.2rem;
238
- background: var(--vscode-editor-background, var(--color-bg));
239
- color: inherit;
240
- font-size: 0.78rem;
241
- cursor: pointer;
242
- }
243
-
244
- .workbench-field-remap-graph__arrow {
245
- color: var(--vscode-descriptionForeground, var(--color-text-muted));
246
- font-size: 0.85rem;
247
- }
248
-
249
- .workbench-field-remap-graph__nodes {
250
- display: inline-flex;
251
- flex-wrap: wrap;
252
- align-items: center;
253
- gap: 0.3rem;
254
- min-width: 0;
255
- flex: 1;
256
- }
257
-
258
- .workbench-field-remap-graph__passthrough {
259
- padding: 0.15rem 0.4rem;
260
- border: 1px dashed var(--vscode-panel-border, var(--color-border));
261
- border-radius: 0.2rem;
262
- font-size: 0.72rem;
263
- color: var(--vscode-descriptionForeground, var(--color-text-muted));
264
- }
265
-
266
- .workbench-field-remap-graph__node {
267
- display: inline-flex;
268
- flex-wrap: wrap;
269
- align-items: center;
270
- gap: 0.25rem;
271
- padding: 0.25rem 0.35rem;
272
- border: 1px solid var(--vscode-focusBorder, var(--color-accent, #3794ff));
273
- border-radius: 0.25rem;
274
- background: var(--vscode-editor-background, var(--color-bg));
275
- }
276
-
277
- .workbench-field-remap-graph__node select,
278
- .workbench-field-remap-graph__node input {
279
- max-width: 7.5rem;
280
- padding: 0.15rem 0.25rem;
281
- border: 1px solid var(--vscode-panel-border, var(--color-border));
282
- border-radius: 0.15rem;
283
- background: var(--color-surface);
284
- color: inherit;
285
- font-size: 0.72rem;
286
- }
287
-
288
- .visually-hidden {
289
- position: absolute;
290
- width: 1px;
291
- height: 1px;
292
- padding: 0;
293
- margin: -1px;
294
- overflow: hidden;
295
- clip: rect(0, 0, 0, 0);
296
- white-space: nowrap;
297
- border: 0;
298
- }
299
-
300
- .workbench-field-remap-flow {
301
- display: flex;
302
- flex-direction: column;
303
- gap: 0.75rem;
304
- }
305
-
306
- .workbench-field-remap-flow__canvas {
307
- height: min(40rem, 70vh);
308
- min-height: 26rem;
309
- border: 1px solid var(--vscode-panel-border, var(--color-border));
310
- border-radius: 0.375rem;
311
- overflow: hidden;
312
- background: var(--vscode-editor-background, var(--color-bg));
313
- }
314
-
315
- /* XYFlow default chrome is light; bind Controls / MiniMap / dots to host tokens. */
316
- .workbench-field-remap-flow__canvas .react-flow {
317
- --xy-background-color: var(--vscode-editor-background, var(--color-bg));
318
- --xy-background-pattern-color: var(--vscode-editorIndentGuide-background, var(--color-border));
319
- --xy-controls-button-background-color: var(
320
- --vscode-button-secondaryBackground,
321
- var(--color-surface)
322
- );
323
- --xy-controls-button-background-color-hover: var(
324
- --vscode-button-secondaryHoverBackground,
325
- var(--color-bg-muted, var(--color-surface))
326
- );
327
- --xy-controls-button-color: var(--vscode-foreground, var(--color-text));
328
- --xy-controls-button-color-hover: var(--vscode-foreground, var(--color-text));
329
- --xy-controls-button-border-color: var(--vscode-panel-border, var(--color-border));
330
- --xy-controls-box-shadow: none;
331
- --xy-minimap-background-color: var(--vscode-editorWidget-background, var(--color-surface));
332
- --xy-minimap-mask-background-color: color-mix(
333
- in srgb,
334
- var(--vscode-editor-background, var(--color-bg)) 62%,
335
- transparent
336
- );
337
- --xy-minimap-node-background-color: var(
338
- --vscode-badge-background,
339
- var(--color-bg-muted, #3c3c3c)
340
- );
341
- --xy-minimap-node-stroke-color: var(--vscode-panel-border, var(--color-border));
342
- --xy-attribution-background-color: transparent;
343
- }
344
-
345
- .workbench-field-remap-flow__canvas .react-flow__controls {
346
- border: 1px solid var(--vscode-panel-border, var(--color-border));
347
- border-radius: 0.35rem;
348
- overflow: hidden;
349
- box-shadow: none;
350
- }
351
-
352
- .workbench-field-remap-flow__canvas .react-flow__controls-button {
353
- background: var(--xy-controls-button-background-color);
354
- border-bottom-color: var(--vscode-panel-border, var(--color-border));
355
- fill: var(--xy-controls-button-color);
356
- }
357
-
358
- .workbench-field-remap-flow__canvas .react-flow__controls-button:hover {
359
- background: var(--xy-controls-button-background-color-hover);
360
- }
361
-
362
- .workbench-field-remap-flow__canvas .react-flow__controls-button svg {
363
- fill: currentColor;
364
- max-width: 12px;
365
- max-height: 12px;
366
- }
367
-
368
- .workbench-field-remap-flow__canvas .react-flow__minimap {
369
- margin: 0.5rem;
370
- border: 1px solid var(--vscode-panel-border, var(--color-border));
371
- border-radius: 0.35rem;
372
- overflow: hidden;
373
- box-shadow: none;
374
- }
375
-
376
- .workbench-field-remap-flow__canvas .react-flow__node {
377
- font-size: 0.8rem;
378
- }
379
-
380
- .workbench-field-remap-flow-node {
381
- min-width: 9.5rem;
382
- max-width: 14rem;
383
- padding: 0.45rem 0.55rem;
384
- border: 1px solid var(--vscode-panel-border, var(--color-border));
385
- border-radius: 0.35rem;
386
- background: var(--color-surface);
387
- color: var(--vscode-editor-foreground, var(--color-text));
388
- box-shadow: none;
389
- }
390
-
391
- .workbench-field-remap-flow-node--object {
392
- min-width: 12.5rem;
393
- max-width: 18rem;
394
- padding: 0.4rem 0.35rem 0.45rem;
395
- }
396
-
397
- .workbench-field-remap-flow-node--source {
398
- border-left: 3px solid var(--vscode-charts-blue, #3794ff);
399
- }
400
-
401
- .workbench-field-remap-flow-node--target {
402
- border-right: 3px solid var(--vscode-charts-green, #89d185);
403
- }
404
-
405
- .workbench-field-remap-flow-node--transform {
406
- border-color: var(--vscode-focusBorder, var(--color-accent, #3794ff));
407
- background: var(--vscode-editor-background, var(--color-bg));
408
- }
409
-
410
- .workbench-field-remap-flow-node__header {
411
- display: flex;
412
- align-items: baseline;
413
- gap: 0.5rem;
414
- padding: 0.15rem 0.45rem 0.35rem;
415
- border-bottom: 1px solid var(--vscode-panel-border, var(--color-border));
416
- margin-bottom: 0.2rem;
417
- }
418
-
419
- .workbench-field-remap-flow-node__header strong {
420
- font-size: 0.85rem;
421
- }
422
-
423
- .workbench-field-remap-flow-node__title {
424
- display: flex;
425
- align-items: center;
426
- justify-content: space-between;
427
- gap: 0.35rem;
428
- font-weight: 600;
429
- }
430
-
431
- .workbench-field-remap-flow-node__hint {
432
- display: block;
433
- font-size: 0.65rem;
434
- color: var(--vscode-descriptionForeground, var(--color-text-muted));
435
- text-transform: uppercase;
436
- letter-spacing: 0.04em;
437
- }
438
-
439
- .workbench-field-remap-flow-node__id {
440
- display: block;
441
- margin-top: 0.2rem;
442
- font-size: 0.68rem;
443
- color: var(--vscode-descriptionForeground, var(--color-text-muted));
444
- }
445
-
446
- .workbench-field-remap-flow-node__ports {
447
- list-style: none;
448
- margin: 0;
449
- padding: 0;
450
- display: flex;
451
- flex-direction: column;
452
- gap: 0.1rem;
453
- }
454
-
455
- .workbench-field-remap-flow-node__port {
456
- position: relative;
457
- display: flex;
458
- align-items: center;
459
- min-height: 1.55rem;
460
- padding: 0.15rem 0.7rem;
461
- gap: 0.35rem;
462
- }
463
-
464
- .workbench-field-remap-flow-node--source .workbench-field-remap-flow-node__port {
465
- justify-content: flex-end;
466
- }
467
-
468
- .workbench-field-remap-flow-node--target .workbench-field-remap-flow-node__port {
469
- justify-content: flex-start;
470
- }
471
-
472
- .workbench-field-remap-flow-node__port-label {
473
- display: inline-flex;
474
- align-items: center;
475
- gap: 0.3rem;
476
- min-width: 0;
477
- font-size: 0.78rem;
478
- line-height: 1.2;
479
- }
480
-
481
- .workbench-field-remap-flow-node__port-label > span:first-child {
482
- overflow: hidden;
483
- text-overflow: ellipsis;
484
- white-space: nowrap;
485
- }
486
-
487
- .workbench-field-remap-flow-node__handle {
488
- width: 8px !important;
489
- height: 8px !important;
490
- border-width: 1px !important;
491
- background: var(--vscode-focusBorder, var(--color-accent, #3794ff)) !important;
492
- }
493
-
494
- .workbench-field-remap-flow-node--source .workbench-field-remap-flow-node__handle {
495
- right: -5px !important;
496
- }
497
-
498
- .workbench-field-remap-flow-node--target .workbench-field-remap-flow-node__handle {
499
- left: -5px !important;
500
- }
501
-
502
- .workbench-field-remap-flow__bindings h4 {
503
- margin: 0 0 0.35rem;
504
- font-size: 0.75rem;
505
- font-weight: 600;
506
- text-transform: uppercase;
507
- letter-spacing: 0.03em;
508
- color: var(--vscode-descriptionForeground, var(--color-text-muted));
509
- }
510
-
511
- .workbench-field-remap-flow__bindings ul {
512
- list-style: none;
513
- margin: 0;
514
- padding: 0;
515
- display: flex;
516
- flex-direction: column;
517
- gap: 0.25rem;
518
- }
519
-
520
- .workbench-field-remap-flow__bindings li {
521
- display: flex;
522
- flex-wrap: wrap;
523
- align-items: center;
524
- justify-content: space-between;
525
- gap: 0.5rem;
526
- padding: 0.35rem 0.5rem;
527
- border-radius: 0.25rem;
528
- background: var(--color-surface);
529
- font-size: 0.8rem;
530
- }
531
-
532
- .workbench-field-remap-tree {
533
- min-width: 0;
534
- border: 1px solid var(--vscode-panel-border, var(--color-border));
535
- border-radius: 0.25rem;
536
- background: var(--vscode-editor-background, var(--color-bg));
537
- overflow: auto;
538
- }
539
-
540
- .workbench-field-remap-tree__title {
541
- margin: 0;
542
- padding: 0.5rem 0.65rem;
543
- border-bottom: 1px solid var(--vscode-panel-border, var(--color-border));
544
- font-size: 0.75rem;
545
- font-weight: 600;
546
- text-transform: uppercase;
547
- letter-spacing: 0.03em;
548
- color: var(--vscode-descriptionForeground, var(--color-text-muted));
549
- }
550
-
551
- .workbench-field-remap-tree__list,
552
- .workbench-field-remap-tree__list ul {
553
- list-style: none;
554
- margin: 0;
555
- padding: 0.25rem 0;
556
- }
557
-
558
- .workbench-field-remap-tree__row {
559
- display: flex;
560
- align-items: center;
561
- gap: 0.15rem;
562
- min-height: 1.75rem;
563
- }
564
-
565
- .workbench-field-remap-tree__row.is-selected .workbench-field-remap-tree__node {
566
- background: var(--vscode-list-activeSelectionBackground, var(--color-accent-muted, #2a4a6a));
567
- color: var(--vscode-list-activeSelectionForeground, var(--color-text));
568
- }
569
-
570
- .workbench-field-remap-tree__row.is-mapped .workbench-field-remap-tree__label {
571
- font-weight: 600;
572
- }
573
-
574
- .workbench-field-remap-tree__twistie,
575
- .workbench-field-remap-tree__twistie-spacer {
576
- width: 1.1rem;
577
- flex: 0 0 1.1rem;
578
- border: 0;
579
- background: transparent;
580
- color: inherit;
581
- font-size: 0.7rem;
582
- line-height: 1;
583
- padding: 0;
584
- cursor: pointer;
585
- }
586
-
587
- .workbench-field-remap-tree__twistie-spacer {
588
- cursor: default;
589
- }
590
-
591
- .workbench-field-remap-tree__node {
592
- display: inline-flex;
593
- align-items: center;
594
- gap: 0.4rem;
595
- flex: 1;
596
- min-width: 0;
597
- margin: 0 0.25rem 0 0;
598
- padding: 0.2rem 0.4rem;
599
- border: 0;
600
- border-radius: 0.2rem;
601
- background: transparent;
602
- color: inherit;
603
- text-align: left;
604
- cursor: pointer;
605
- }
606
-
607
- .workbench-field-remap-tree__node:hover {
608
- background: var(
609
- --vscode-list-hoverBackground,
610
- var(--color-surface-hover, rgba(127, 127, 127, 0.12))
611
- );
612
- }
613
-
614
- .workbench-field-remap-tree__label {
615
- overflow: hidden;
616
- text-overflow: ellipsis;
617
- white-space: nowrap;
618
- font-size: 0.85rem;
619
- }
620
-
621
- .workbench-field-remap-mapper__list-context {
622
- display: flex;
623
- flex-direction: column;
624
- gap: 0.5rem;
625
- padding: 0.5rem 0.65rem;
626
- border: 1px solid var(--vscode-focusBorder, var(--color-accent, #3794ff));
627
- border-radius: 0.25rem;
628
- }
629
-
630
- .workbench-field-remap-mapper__list-context-bar {
631
- display: flex;
632
- flex-wrap: wrap;
633
- align-items: center;
634
- gap: 0.5rem;
635
- font-size: 0.8rem;
636
- }
637
-
638
- .workbench-field-remap-mapper__edges-panel h4 {
639
- margin: 0 0 0.35rem;
640
- font-size: 0.75rem;
641
- font-weight: 600;
642
- text-transform: uppercase;
643
- letter-spacing: 0.03em;
644
- color: var(--vscode-descriptionForeground, var(--color-text-muted));
645
- }
646
-
647
- .workbench-field-remap-mapper__edges {
648
- list-style: none;
649
- margin: 0;
650
- padding: 0;
651
- display: flex;
652
- flex-direction: column;
653
- gap: 0.25rem;
654
- }
655
-
656
- .workbench-field-remap-mapper__edges li {
657
- display: flex;
658
- flex-wrap: wrap;
659
- align-items: center;
660
- justify-content: space-between;
661
- gap: 0.5rem;
662
- padding: 0.35rem 0.5rem;
663
- border-radius: 0.25rem;
664
- background: var(--vscode-editor-background, var(--color-bg));
665
- font-size: 0.8rem;
666
- }
667
-
668
- .workbench-field-remap-mapper__edges code {
669
- font-size: 0.78rem;
670
- word-break: break-all;
671
- }
672
-
673
- .workbench-field-remap-mapper__edge-actions {
674
- display: inline-flex;
675
- gap: 0.25rem;
676
- }
1
+ .workbench-field-remap-view {
2
+ height: 100%;
3
+ }
4
+
5
+ .workbench-field-remap-view__list {
6
+ padding: 0.5rem;
7
+ }
8
+
9
+ .workbench-field-remap-editor-surface {
10
+ box-sizing: border-box;
11
+ flex: 1 1 auto;
12
+ align-self: stretch;
13
+ width: 100%;
14
+ min-width: 0;
15
+ height: 100%;
16
+ color: var(--vscode-editor-foreground, var(--color-text));
17
+ background: var(--vscode-editor-background, var(--color-bg));
18
+ }
19
+
20
+ .workbench-field-remap-demo {
21
+ box-sizing: border-box;
22
+ display: flex;
23
+ flex-direction: column;
24
+ gap: 1rem;
25
+ width: 100%;
26
+ min-width: 0;
27
+ min-height: 0;
28
+ padding: 1.25rem 1.5rem;
29
+ color: var(--vscode-editor-foreground, var(--color-text));
30
+ }
31
+
32
+ .workbench-field-remap-demo__header {
33
+ display: flex;
34
+ flex-direction: column;
35
+ gap: 0.35rem;
36
+ }
37
+
38
+ .workbench-field-remap-demo__title {
39
+ margin: 0;
40
+ font-size: 1.25rem;
41
+ font-weight: 600;
42
+ color: var(--vscode-editor-foreground, var(--color-text));
43
+ }
44
+
45
+ .workbench-field-remap-demo__intro {
46
+ margin: 0;
47
+ color: var(--vscode-descriptionForeground, var(--color-text-muted));
48
+ font-size: 0.875rem;
49
+ line-height: 1.45;
50
+ }
51
+
52
+ .workbench-field-remap-demo__intro code {
53
+ font-size: 0.8em;
54
+ }
55
+
56
+ .workbench-field-remap-demo__error {
57
+ margin: 0;
58
+ color: var(--vscode-errorForeground, var(--color-danger));
59
+ font-size: 0.875rem;
60
+ }
61
+
62
+ .workbench-field-remap-demo__warn {
63
+ margin: 0;
64
+ color: var(--vscode-editorWarning-foreground, var(--color-warning, #b89500));
65
+ font-size: 0.875rem;
66
+ }
67
+
68
+ .workbench-field-remap-demo__panes {
69
+ display: grid;
70
+ grid-template-columns: repeat(2, minmax(0, 1fr));
71
+ gap: 1rem;
72
+ }
73
+
74
+ @media (max-width: 800px) {
75
+ .workbench-field-remap-demo__panes {
76
+ grid-template-columns: 1fr;
77
+ }
78
+ }
79
+
80
+ .workbench-field-remap-demo__pane {
81
+ display: flex;
82
+ flex-direction: column;
83
+ gap: 0.5rem;
84
+ min-width: 0;
85
+ }
86
+
87
+ .workbench-field-remap-demo__pane h3 {
88
+ margin: 0;
89
+ font-size: 0.8rem;
90
+ font-weight: 600;
91
+ letter-spacing: 0.02em;
92
+ text-transform: uppercase;
93
+ color: var(--vscode-descriptionForeground, var(--color-text-muted));
94
+ }
95
+
96
+ .workbench-field-remap-demo__pane pre {
97
+ margin: 0;
98
+ padding: 0.75rem;
99
+ border: 1px solid var(--vscode-panel-border, var(--color-border));
100
+ border-radius: 0.375rem;
101
+ background: var(--vscode-input-background, var(--color-input-bg, var(--color-surface)));
102
+ color: var(--vscode-editor-foreground, var(--color-text));
103
+ font-size: 0.8rem;
104
+ line-height: 1.4;
105
+ overflow: auto;
106
+ white-space: pre-wrap;
107
+ word-break: break-word;
108
+ font-family: var(
109
+ --vscode-editor-font-family,
110
+ ui-monospace,
111
+ SFMono-Regular,
112
+ Menlo,
113
+ Consolas,
114
+ monospace
115
+ );
116
+ }
117
+
118
+ .workbench-field-remap-mapper {
119
+ display: flex;
120
+ flex-direction: column;
121
+ gap: 0.75rem;
122
+ min-height: 22rem;
123
+ padding: 0.75rem;
124
+ border: 1px solid var(--vscode-panel-border, var(--color-border));
125
+ border-radius: 0.375rem;
126
+ background: var(--color-surface);
127
+ }
128
+
129
+ .workbench-field-remap-mapper__hint {
130
+ margin: 0;
131
+ font-size: 0.8rem;
132
+ color: var(--vscode-descriptionForeground, var(--color-text-muted));
133
+ }
134
+
135
+ .workbench-field-remap-mapper__columns {
136
+ display: grid;
137
+ grid-template-columns: repeat(2, minmax(0, 1fr));
138
+ gap: 0.75rem;
139
+ min-height: 14rem;
140
+ }
141
+
142
+ .workbench-field-remap-graph {
143
+ display: grid;
144
+ grid-template-columns: minmax(10rem, 1fr) minmax(18rem, 2.2fr) minmax(10rem, 1fr);
145
+ gap: 0.75rem;
146
+ min-height: 16rem;
147
+ align-items: stretch;
148
+ }
149
+
150
+ @media (max-width: 960px) {
151
+ .workbench-field-remap-graph {
152
+ grid-template-columns: 1fr;
153
+ }
154
+ }
155
+
156
+ .workbench-field-remap-graph__center {
157
+ min-width: 0;
158
+ border: 1px solid var(--vscode-panel-border, var(--color-border));
159
+ border-radius: 0.25rem;
160
+ background: var(--vscode-editor-background, var(--color-bg));
161
+ overflow: auto;
162
+ }
163
+
164
+ .workbench-field-remap-graph__empty {
165
+ margin: 0;
166
+ padding: 0.75rem;
167
+ font-size: 0.8rem;
168
+ color: var(--vscode-descriptionForeground, var(--color-text-muted));
169
+ }
170
+
171
+ .workbench-field-remap-graph__keys {
172
+ list-style: none;
173
+ margin: 0;
174
+ padding: 0.25rem 0;
175
+ }
176
+
177
+ .workbench-field-remap-graph__key {
178
+ display: flex;
179
+ align-items: center;
180
+ gap: 0.35rem;
181
+ width: calc(100% - 0.5rem);
182
+ margin: 0.1rem 0.25rem;
183
+ padding: 0.25rem 0.4rem;
184
+ border: 0;
185
+ border-radius: 0.2rem;
186
+ background: transparent;
187
+ color: inherit;
188
+ text-align: left;
189
+ cursor: pointer;
190
+ font-size: 0.85rem;
191
+ }
192
+
193
+ .workbench-field-remap-graph__key:hover {
194
+ background: var(--vscode-list-hoverBackground, rgba(127, 127, 127, 0.12));
195
+ }
196
+
197
+ .workbench-field-remap-graph__key.is-selected {
198
+ background: var(--vscode-list-activeSelectionBackground, var(--color-accent-muted, #2a4a6a));
199
+ color: var(--vscode-list-activeSelectionForeground, var(--color-text));
200
+ }
201
+
202
+ .workbench-field-remap-graph__key.is-mapped {
203
+ font-weight: 600;
204
+ }
205
+
206
+ .workbench-field-remap-graph__lanes {
207
+ list-style: none;
208
+ margin: 0;
209
+ padding: 0.4rem;
210
+ display: flex;
211
+ flex-direction: column;
212
+ gap: 0.4rem;
213
+ }
214
+
215
+ .workbench-field-remap-graph__lane {
216
+ display: flex;
217
+ flex-wrap: wrap;
218
+ align-items: center;
219
+ gap: 0.35rem;
220
+ padding: 0.45rem 0.5rem;
221
+ border: 1px solid var(--vscode-panel-border, var(--color-border));
222
+ border-radius: 0.25rem;
223
+ background: var(--color-surface);
224
+ }
225
+
226
+ .workbench-field-remap-graph__lane.is-selected {
227
+ border-color: var(--vscode-focusBorder, var(--color-accent, #3794ff));
228
+ }
229
+
230
+ .workbench-field-remap-graph__endpoint {
231
+ max-width: 8rem;
232
+ overflow: hidden;
233
+ text-overflow: ellipsis;
234
+ white-space: nowrap;
235
+ padding: 0.2rem 0.4rem;
236
+ border: 1px solid var(--vscode-panel-border, var(--color-border));
237
+ border-radius: 0.2rem;
238
+ background: var(--vscode-editor-background, var(--color-bg));
239
+ color: inherit;
240
+ font-size: 0.78rem;
241
+ cursor: pointer;
242
+ }
243
+
244
+ .workbench-field-remap-graph__arrow {
245
+ color: var(--vscode-descriptionForeground, var(--color-text-muted));
246
+ font-size: 0.85rem;
247
+ }
248
+
249
+ .workbench-field-remap-graph__nodes {
250
+ display: inline-flex;
251
+ flex-wrap: wrap;
252
+ align-items: center;
253
+ gap: 0.3rem;
254
+ min-width: 0;
255
+ flex: 1;
256
+ }
257
+
258
+ .workbench-field-remap-graph__passthrough {
259
+ padding: 0.15rem 0.4rem;
260
+ border: 1px dashed var(--vscode-panel-border, var(--color-border));
261
+ border-radius: 0.2rem;
262
+ font-size: 0.72rem;
263
+ color: var(--vscode-descriptionForeground, var(--color-text-muted));
264
+ }
265
+
266
+ .workbench-field-remap-graph__node {
267
+ display: inline-flex;
268
+ flex-wrap: wrap;
269
+ align-items: center;
270
+ gap: 0.25rem;
271
+ padding: 0.25rem 0.35rem;
272
+ border: 1px solid var(--vscode-focusBorder, var(--color-accent, #3794ff));
273
+ border-radius: 0.25rem;
274
+ background: var(--vscode-editor-background, var(--color-bg));
275
+ }
276
+
277
+ .workbench-field-remap-graph__node select,
278
+ .workbench-field-remap-graph__node input {
279
+ max-width: 7.5rem;
280
+ padding: 0.15rem 0.25rem;
281
+ border: 1px solid var(--vscode-panel-border, var(--color-border));
282
+ border-radius: 0.15rem;
283
+ background: var(--color-surface);
284
+ color: inherit;
285
+ font-size: 0.72rem;
286
+ }
287
+
288
+ .visually-hidden {
289
+ position: absolute;
290
+ width: 1px;
291
+ height: 1px;
292
+ padding: 0;
293
+ margin: -1px;
294
+ overflow: hidden;
295
+ clip: rect(0, 0, 0, 0);
296
+ white-space: nowrap;
297
+ border: 0;
298
+ }
299
+
300
+ .workbench-field-remap-flow {
301
+ display: flex;
302
+ flex-direction: column;
303
+ gap: 0.75rem;
304
+ }
305
+
306
+ .workbench-field-remap-flow__canvas {
307
+ height: min(40rem, 70vh);
308
+ min-height: 26rem;
309
+ border: 1px solid var(--vscode-panel-border, var(--color-border));
310
+ border-radius: 0.375rem;
311
+ overflow: hidden;
312
+ background: var(--vscode-editor-background, var(--color-bg));
313
+ }
314
+
315
+ /* XYFlow default chrome is light; bind Controls / MiniMap / dots to host tokens. */
316
+ .workbench-field-remap-flow__canvas .react-flow {
317
+ --xy-background-color: var(--vscode-editor-background, var(--color-bg));
318
+ --xy-background-pattern-color: var(--vscode-editorIndentGuide-background, var(--color-border));
319
+ --xy-controls-button-background-color: var(
320
+ --vscode-button-secondaryBackground,
321
+ var(--color-surface)
322
+ );
323
+ --xy-controls-button-background-color-hover: var(
324
+ --vscode-button-secondaryHoverBackground,
325
+ var(--color-bg-muted, var(--color-surface))
326
+ );
327
+ --xy-controls-button-color: var(--vscode-foreground, var(--color-text));
328
+ --xy-controls-button-color-hover: var(--vscode-foreground, var(--color-text));
329
+ --xy-controls-button-border-color: var(--vscode-panel-border, var(--color-border));
330
+ --xy-controls-box-shadow: none;
331
+ --xy-minimap-background-color: var(--vscode-editorWidget-background, var(--color-surface));
332
+ --xy-minimap-mask-background-color: color-mix(
333
+ in srgb,
334
+ var(--vscode-editor-background, var(--color-bg)) 62%,
335
+ transparent
336
+ );
337
+ --xy-minimap-node-background-color: var(
338
+ --vscode-badge-background,
339
+ var(--color-bg-muted, #3c3c3c)
340
+ );
341
+ --xy-minimap-node-stroke-color: var(--vscode-panel-border, var(--color-border));
342
+ --xy-attribution-background-color: transparent;
343
+ }
344
+
345
+ .workbench-field-remap-flow__canvas .react-flow__controls {
346
+ border: 1px solid var(--vscode-panel-border, var(--color-border));
347
+ border-radius: 0.35rem;
348
+ overflow: hidden;
349
+ box-shadow: none;
350
+ }
351
+
352
+ .workbench-field-remap-flow__canvas .react-flow__controls-button {
353
+ background: var(--xy-controls-button-background-color);
354
+ border-bottom-color: var(--vscode-panel-border, var(--color-border));
355
+ fill: var(--xy-controls-button-color);
356
+ }
357
+
358
+ .workbench-field-remap-flow__canvas .react-flow__controls-button:hover {
359
+ background: var(--xy-controls-button-background-color-hover);
360
+ }
361
+
362
+ .workbench-field-remap-flow__canvas .react-flow__controls-button svg {
363
+ fill: currentColor;
364
+ max-width: 12px;
365
+ max-height: 12px;
366
+ }
367
+
368
+ .workbench-field-remap-flow__canvas .react-flow__minimap {
369
+ margin: 0.5rem;
370
+ border: 1px solid var(--vscode-panel-border, var(--color-border));
371
+ border-radius: 0.35rem;
372
+ overflow: hidden;
373
+ box-shadow: none;
374
+ }
375
+
376
+ .workbench-field-remap-flow__canvas .react-flow__node {
377
+ font-size: 0.8rem;
378
+ }
379
+
380
+ .workbench-field-remap-flow-node {
381
+ min-width: 9.5rem;
382
+ max-width: 14rem;
383
+ padding: 0.45rem 0.55rem;
384
+ border: 1px solid var(--vscode-panel-border, var(--color-border));
385
+ border-radius: 0.35rem;
386
+ background: var(--color-surface);
387
+ color: var(--vscode-editor-foreground, var(--color-text));
388
+ box-shadow: none;
389
+ }
390
+
391
+ .workbench-field-remap-flow-node--object {
392
+ min-width: 12.5rem;
393
+ max-width: 18rem;
394
+ padding: 0.4rem 0.35rem 0.45rem;
395
+ }
396
+
397
+ .workbench-field-remap-flow-node--source {
398
+ border-left: 3px solid var(--vscode-charts-blue, #3794ff);
399
+ }
400
+
401
+ .workbench-field-remap-flow-node--target {
402
+ border-right: 3px solid var(--vscode-charts-green, #89d185);
403
+ }
404
+
405
+ .workbench-field-remap-flow-node--transform {
406
+ border-color: var(--vscode-focusBorder, var(--color-accent, #3794ff));
407
+ background: var(--vscode-editor-background, var(--color-bg));
408
+ }
409
+
410
+ .workbench-field-remap-flow-node__header {
411
+ display: flex;
412
+ align-items: baseline;
413
+ gap: 0.5rem;
414
+ padding: 0.15rem 0.45rem 0.35rem;
415
+ border-bottom: 1px solid var(--vscode-panel-border, var(--color-border));
416
+ margin-bottom: 0.2rem;
417
+ }
418
+
419
+ .workbench-field-remap-flow-node__header strong {
420
+ font-size: 0.85rem;
421
+ }
422
+
423
+ .workbench-field-remap-flow-node__title {
424
+ display: flex;
425
+ align-items: center;
426
+ justify-content: space-between;
427
+ gap: 0.35rem;
428
+ font-weight: 600;
429
+ }
430
+
431
+ .workbench-field-remap-flow-node__hint {
432
+ display: block;
433
+ font-size: 0.65rem;
434
+ color: var(--vscode-descriptionForeground, var(--color-text-muted));
435
+ text-transform: uppercase;
436
+ letter-spacing: 0.04em;
437
+ }
438
+
439
+ .workbench-field-remap-flow-node__id {
440
+ display: block;
441
+ margin-top: 0.2rem;
442
+ font-size: 0.68rem;
443
+ color: var(--vscode-descriptionForeground, var(--color-text-muted));
444
+ }
445
+
446
+ .workbench-field-remap-flow-node__ports {
447
+ list-style: none;
448
+ margin: 0;
449
+ padding: 0;
450
+ display: flex;
451
+ flex-direction: column;
452
+ gap: 0.1rem;
453
+ }
454
+
455
+ .workbench-field-remap-flow-node__port {
456
+ position: relative;
457
+ display: flex;
458
+ align-items: center;
459
+ min-height: 1.55rem;
460
+ padding: 0.15rem 0.7rem;
461
+ gap: 0.35rem;
462
+ }
463
+
464
+ .workbench-field-remap-flow-node--source .workbench-field-remap-flow-node__port {
465
+ justify-content: flex-end;
466
+ }
467
+
468
+ .workbench-field-remap-flow-node--target .workbench-field-remap-flow-node__port {
469
+ justify-content: flex-start;
470
+ }
471
+
472
+ .workbench-field-remap-flow-node__port-label {
473
+ display: inline-flex;
474
+ align-items: center;
475
+ gap: 0.3rem;
476
+ min-width: 0;
477
+ font-size: 0.78rem;
478
+ line-height: 1.2;
479
+ }
480
+
481
+ .workbench-field-remap-flow-node__port-label > span:first-child {
482
+ overflow: hidden;
483
+ text-overflow: ellipsis;
484
+ white-space: nowrap;
485
+ }
486
+
487
+ .workbench-field-remap-flow-node__handle {
488
+ width: 8px !important;
489
+ height: 8px !important;
490
+ border-width: 1px !important;
491
+ background: var(--vscode-focusBorder, var(--color-accent, #3794ff)) !important;
492
+ }
493
+
494
+ .workbench-field-remap-flow-node--source .workbench-field-remap-flow-node__handle {
495
+ right: -5px !important;
496
+ }
497
+
498
+ .workbench-field-remap-flow-node--target .workbench-field-remap-flow-node__handle {
499
+ left: -5px !important;
500
+ }
501
+
502
+ .workbench-field-remap-flow__bindings h4 {
503
+ margin: 0 0 0.35rem;
504
+ font-size: 0.75rem;
505
+ font-weight: 600;
506
+ text-transform: uppercase;
507
+ letter-spacing: 0.03em;
508
+ color: var(--vscode-descriptionForeground, var(--color-text-muted));
509
+ }
510
+
511
+ .workbench-field-remap-flow__bindings ul {
512
+ list-style: none;
513
+ margin: 0;
514
+ padding: 0;
515
+ display: flex;
516
+ flex-direction: column;
517
+ gap: 0.25rem;
518
+ }
519
+
520
+ .workbench-field-remap-flow__bindings li {
521
+ display: flex;
522
+ flex-wrap: wrap;
523
+ align-items: center;
524
+ justify-content: space-between;
525
+ gap: 0.5rem;
526
+ padding: 0.35rem 0.5rem;
527
+ border-radius: 0.25rem;
528
+ background: var(--color-surface);
529
+ font-size: 0.8rem;
530
+ }
531
+
532
+ .workbench-field-remap-tree {
533
+ min-width: 0;
534
+ border: 1px solid var(--vscode-panel-border, var(--color-border));
535
+ border-radius: 0.25rem;
536
+ background: var(--vscode-editor-background, var(--color-bg));
537
+ overflow: auto;
538
+ }
539
+
540
+ .workbench-field-remap-tree__title {
541
+ margin: 0;
542
+ padding: 0.5rem 0.65rem;
543
+ border-bottom: 1px solid var(--vscode-panel-border, var(--color-border));
544
+ font-size: 0.75rem;
545
+ font-weight: 600;
546
+ text-transform: uppercase;
547
+ letter-spacing: 0.03em;
548
+ color: var(--vscode-descriptionForeground, var(--color-text-muted));
549
+ }
550
+
551
+ .workbench-field-remap-tree__list,
552
+ .workbench-field-remap-tree__list ul {
553
+ list-style: none;
554
+ margin: 0;
555
+ padding: 0.25rem 0;
556
+ }
557
+
558
+ .workbench-field-remap-tree__row {
559
+ display: flex;
560
+ align-items: center;
561
+ gap: 0.15rem;
562
+ min-height: 1.75rem;
563
+ }
564
+
565
+ .workbench-field-remap-tree__row.is-selected .workbench-field-remap-tree__node {
566
+ background: var(--vscode-list-activeSelectionBackground, var(--color-accent-muted, #2a4a6a));
567
+ color: var(--vscode-list-activeSelectionForeground, var(--color-text));
568
+ }
569
+
570
+ .workbench-field-remap-tree__row.is-mapped .workbench-field-remap-tree__label {
571
+ font-weight: 600;
572
+ }
573
+
574
+ .workbench-field-remap-tree__twistie,
575
+ .workbench-field-remap-tree__twistie-spacer {
576
+ width: 1.1rem;
577
+ flex: 0 0 1.1rem;
578
+ border: 0;
579
+ background: transparent;
580
+ color: inherit;
581
+ font-size: 0.7rem;
582
+ line-height: 1;
583
+ padding: 0;
584
+ cursor: pointer;
585
+ }
586
+
587
+ .workbench-field-remap-tree__twistie-spacer {
588
+ cursor: default;
589
+ }
590
+
591
+ .workbench-field-remap-tree__node {
592
+ display: inline-flex;
593
+ align-items: center;
594
+ gap: 0.4rem;
595
+ flex: 1;
596
+ min-width: 0;
597
+ margin: 0 0.25rem 0 0;
598
+ padding: 0.2rem 0.4rem;
599
+ border: 0;
600
+ border-radius: 0.2rem;
601
+ background: transparent;
602
+ color: inherit;
603
+ text-align: left;
604
+ cursor: pointer;
605
+ }
606
+
607
+ .workbench-field-remap-tree__node:hover {
608
+ background: var(
609
+ --vscode-list-hoverBackground,
610
+ var(--color-surface-hover, rgba(127, 127, 127, 0.12))
611
+ );
612
+ }
613
+
614
+ .workbench-field-remap-tree__label {
615
+ overflow: hidden;
616
+ text-overflow: ellipsis;
617
+ white-space: nowrap;
618
+ font-size: 0.85rem;
619
+ }
620
+
621
+ .workbench-field-remap-mapper__list-context {
622
+ display: flex;
623
+ flex-direction: column;
624
+ gap: 0.5rem;
625
+ padding: 0.5rem 0.65rem;
626
+ border: 1px solid var(--vscode-focusBorder, var(--color-accent, #3794ff));
627
+ border-radius: 0.25rem;
628
+ }
629
+
630
+ .workbench-field-remap-mapper__list-context-bar {
631
+ display: flex;
632
+ flex-wrap: wrap;
633
+ align-items: center;
634
+ gap: 0.5rem;
635
+ font-size: 0.8rem;
636
+ }
637
+
638
+ .workbench-field-remap-mapper__edges-panel h4 {
639
+ margin: 0 0 0.35rem;
640
+ font-size: 0.75rem;
641
+ font-weight: 600;
642
+ text-transform: uppercase;
643
+ letter-spacing: 0.03em;
644
+ color: var(--vscode-descriptionForeground, var(--color-text-muted));
645
+ }
646
+
647
+ .workbench-field-remap-mapper__edges {
648
+ list-style: none;
649
+ margin: 0;
650
+ padding: 0;
651
+ display: flex;
652
+ flex-direction: column;
653
+ gap: 0.25rem;
654
+ }
655
+
656
+ .workbench-field-remap-mapper__edges li {
657
+ display: flex;
658
+ flex-wrap: wrap;
659
+ align-items: center;
660
+ justify-content: space-between;
661
+ gap: 0.5rem;
662
+ padding: 0.35rem 0.5rem;
663
+ border-radius: 0.25rem;
664
+ background: var(--vscode-editor-background, var(--color-bg));
665
+ font-size: 0.8rem;
666
+ }
667
+
668
+ .workbench-field-remap-mapper__edges code {
669
+ font-size: 0.78rem;
670
+ word-break: break-all;
671
+ }
672
+
673
+ .workbench-field-remap-mapper__edge-actions {
674
+ display: inline-flex;
675
+ gap: 0.25rem;
676
+ }