@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/{editor-area.css → editor/area.css} RENAMED
@@ -1,454 +1,454 @@
1
- .workbench-editor-area {
2
- display: flex;
3
- flex-direction: column;
4
- height: 100%;
5
- min-height: 0;
6
- background: var(--vscode-editor-background, var(--color-bg));
7
- }
8
-
9
- .workbench-editor-area--empty {
10
- display: grid;
11
- place-items: center;
12
- }
13
-
14
- .workbench-editor-area__empty {
15
- color: var(--color-text-muted);
16
- font-size: var(--font-size-sm, 0.875rem);
17
- }
18
-
19
- .workbench-editor-area__missing-resource {
20
- display: flex;
21
- flex: 1;
22
- align-items: center;
23
- justify-content: center;
24
- min-height: 0;
25
- padding: 24px;
26
- }
27
-
28
- .workbench-editor-area__missing-resource-body {
29
- max-width: 32rem;
30
- color: var(--color-text-muted);
31
- text-align: center;
32
- }
33
-
34
- .workbench-editor-area__missing-resource-title {
35
- margin: 0 0 8px;
36
- color: var(--vscode-foreground, var(--color-text));
37
- font-size: 1rem;
38
- font-weight: 600;
39
- }
40
-
41
- .workbench-editor-area__missing-resource-message,
42
- .workbench-editor-area__missing-resource-path {
43
- margin: 0 0 8px;
44
- font-size: var(--font-size-sm, 0.875rem);
45
- }
46
-
47
- .workbench-editor-area__missing-resource-path {
48
- font-family: var(--font-family-mono, monospace);
49
- word-break: break-all;
50
- }
51
-
52
- .workbench-editor-area__missing-resource-close {
53
- margin-top: 12px;
54
- padding: 6px 12px;
55
- border: 1px solid var(--vscode-button-border, var(--color-border));
56
- border-radius: 4px;
57
- background: var(--vscode-button-secondaryBackground, var(--color-bg-subtle));
58
- color: var(--vscode-button-secondaryForeground, var(--color-text));
59
- cursor: pointer;
60
- font: inherit;
61
- }
62
-
63
- .workbench-editor-area__missing-resource-close:hover {
64
- background: var(--vscode-button-secondaryHoverBackground, var(--color-bg-muted));
65
- }
66
-
67
- .workbench-editor-area__content {
68
- display: flex;
69
- flex-direction: column;
70
- flex: 1;
71
- min-height: 0;
72
- overflow: hidden;
73
- }
74
-
75
- .workbench-editor-area__group-split.ui-workbench-split-view {
76
- width: 100%;
77
- height: 100%;
78
- }
79
-
80
- .workbench-editor-area__group-pane {
81
- position: relative;
82
- display: flex;
83
- flex: 1;
84
- flex-direction: column;
85
- min-width: 0;
86
- min-height: 0;
87
- background: var(--vscode-editor-background, var(--color-bg));
88
- }
89
-
90
- .workbench-editor-area__group-body {
91
- position: relative;
92
- display: flex;
93
- flex: 1;
94
- min-width: 0;
95
- min-height: 0;
96
- }
97
-
98
- .workbench-editor-area__drop-overlay {
99
- position: absolute;
100
- inset: 0;
101
- z-index: 3;
102
- pointer-events: none;
103
- }
104
-
105
- .workbench-editor-area__group-pane[data-drop-side='left'] .workbench-editor-area__drop-overlay {
106
- right: 50%;
107
- background: var(
108
- --vscode-editorGroup-dropBackground,
109
- color-mix(in srgb, var(--vscode-focusBorder, var(--color-focus-border)) 18%, transparent)
110
- );
111
- outline: 1px dashed var(--vscode-focusBorder, var(--color-focus-border));
112
- outline-offset: -2px;
113
- }
114
-
115
- .workbench-editor-area__group-pane[data-drop-side='right'] .workbench-editor-area__drop-overlay {
116
- left: 50%;
117
- background: var(
118
- --vscode-editorGroup-dropBackground,
119
- color-mix(in srgb, var(--vscode-focusBorder, var(--color-focus-border)) 18%, transparent)
120
- );
121
- outline: 1px dashed var(--vscode-focusBorder, var(--color-focus-border));
122
- outline-offset: -2px;
123
- }
124
-
125
- .workbench-editor-area__group-pane[data-drop-side='top'] .workbench-editor-area__drop-overlay {
126
- bottom: 50%;
127
- background: var(
128
- --vscode-editorGroup-dropBackground,
129
- color-mix(in srgb, var(--vscode-focusBorder, var(--color-focus-border)) 18%, transparent)
130
- );
131
- outline: 1px dashed var(--vscode-focusBorder, var(--color-focus-border));
132
- outline-offset: -2px;
133
- }
134
-
135
- .workbench-editor-area__group-pane[data-drop-side='bottom'] .workbench-editor-area__drop-overlay {
136
- top: 50%;
137
- background: var(
138
- --vscode-editorGroup-dropBackground,
139
- color-mix(in srgb, var(--vscode-focusBorder, var(--color-focus-border)) 18%, transparent)
140
- );
141
- outline: 1px dashed var(--vscode-focusBorder, var(--color-focus-border));
142
- outline-offset: -2px;
143
- }
144
-
145
- .workbench-editor-area__group-pane[data-drop-side='center'] .workbench-editor-area__drop-overlay {
146
- background: var(
147
- --vscode-editorGroup-dropBackground,
148
- color-mix(in srgb, var(--vscode-focusBorder, var(--color-focus-border)) 12%, transparent)
149
- );
150
- outline: 1px dashed var(--vscode-focusBorder, var(--color-focus-border));
151
- outline-offset: -2px;
152
- }
153
-
154
- .workbench-editor-area__group-actions {
155
- display: flex;
156
- flex-shrink: 0;
157
- align-items: center;
158
- gap: 4px;
159
- height: 100%;
160
- }
161
-
162
- .workbench-editor-area__host {
163
- box-sizing: border-box;
164
- flex: 1;
165
- min-width: 0;
166
- height: 100%;
167
- min-height: 0;
168
- padding: 16px;
169
- }
170
-
171
- .workbench-editor-area__text-editor {
172
- display: flex;
173
- flex: 1;
174
- flex-direction: column;
175
- min-width: 0;
176
- height: 100%;
177
- min-height: 0;
178
- }
179
-
180
- .workbench-editor-area__mode-toolbar-outlet {
181
- display: flex;
182
- flex-shrink: 0;
183
- align-items: center;
184
- height: 100%;
185
- }
186
-
187
- .workbench-editor-area__view-toolbar {
188
- box-sizing: border-box;
189
- display: flex;
190
- flex-shrink: 0;
191
- gap: 2px;
192
- align-items: center;
193
- height: 100%;
194
- }
195
-
196
- .workbench-editor-area__view-button.ui-icon-button {
197
- color: var(--vscode-tab-inactiveForeground, var(--color-text-muted));
198
- opacity: 0.62;
199
- }
200
-
201
- .workbench-editor-area__view-button.ui-icon-button .codicon {
202
- font-size: 15px;
203
- }
204
-
205
- .workbench-editor-area__view-button.ui-icon-button:hover {
206
- opacity: 1;
207
- background: var(--vscode-toolbar-hoverBackground, var(--color-bg-hover));
208
- color: var(--vscode-tab-hoverForeground, var(--vscode-foreground, var(--color-text)));
209
- }
210
-
211
- .workbench-editor-area__view-button.ui-icon-button[aria-pressed='true'],
212
- .workbench-editor-area__view-button.ui-icon-button[aria-checked='true'],
213
- .workbench-editor-area__view-button--active.ui-icon-button {
214
- opacity: 1;
215
- color: var(--vscode-tab-activeForeground, var(--color-text));
216
- background: color-mix(
217
- in srgb,
218
- var(--vscode-tab-activeForeground, var(--color-text)) 14%,
219
- transparent
220
- );
221
- border-color: color-mix(
222
- in srgb,
223
- var(--vscode-focusBorder, var(--color-focus-border, var(--color-accent))) 35%,
224
- transparent
225
- );
226
- }
227
-
228
- .workbench-editor-area__view-button.ui-icon-button[aria-pressed='true']:hover,
229
- .workbench-editor-area__view-button.ui-icon-button[aria-checked='true']:hover,
230
- .workbench-editor-area__view-button--active.ui-icon-button:hover {
231
- background: color-mix(
232
- in srgb,
233
- var(--vscode-tab-activeForeground, var(--color-text)) 20%,
234
- transparent
235
- );
236
- }
237
-
238
- .workbench-editor-area__text-editor-body {
239
- display: flex;
240
- flex: 1;
241
- flex-direction: column;
242
- min-width: 0;
243
- min-height: 0;
244
- }
245
-
246
- .workbench-editor-area__text-editor-body > *:last-child {
247
- flex: 1;
248
- min-width: 0;
249
- min-height: 0;
250
- }
251
-
252
- .workbench-editor-area__split.ui-workbench-split-view {
253
- width: 100%;
254
- height: 100%;
255
- }
256
-
257
- .workbench-editor-area__split-pane {
258
- display: flex;
259
- flex: 1;
260
- min-width: 0;
261
- min-height: 0;
262
- }
263
-
264
- .workbench-editor-area__source-pane {
265
- display: flex;
266
- flex: 1;
267
- min-width: 0;
268
- min-height: 0;
269
- }
270
-
271
- .workbench-editor-area__source-pane .workbench-monaco-panel {
272
- --panel-bg: var(--vscode-editor-background, var(--color-bg));
273
- background: var(--vscode-editor-background, var(--color-bg));
274
- }
275
-
276
- .workbench-editor-area__source-pane .workbench-monaco-panel,
277
- .workbench-editor-area__source-pane .workbench-monaco-panel__body {
278
- box-sizing: border-box;
279
- flex: 1;
280
- min-width: 0;
281
- min-height: 0;
282
- }
283
-
284
- .workbench-editor-area__source-pane .workbench-monaco-panel,
285
- .workbench-editor-area__source-pane .workspace-editor__monaco {
286
- box-sizing: border-box;
287
- min-width: 0;
288
- min-height: 0;
289
- height: 100%;
290
- }
291
-
292
- .workbench-editor-area__source-pane .workbench-monaco-panel__body {
293
- padding: 0;
294
- border: 0;
295
- }
296
-
297
- .workbench-editor-area__editor-loading {
298
- display: grid;
299
- flex: 1;
300
- min-width: 0;
301
- min-height: 0;
302
- place-items: center;
303
- color: var(--color-text-muted);
304
- font-size: var(--font-size-sm, 0.875rem);
305
- }
306
-
307
- .workbench-editor-area__preview-pane {
308
- flex: 1;
309
- min-width: 0;
310
- min-height: 0;
311
- padding: 16px;
312
- background: var(--vscode-editor-background, var(--color-bg));
313
- }
314
-
315
- .workbench-editor-area__preview-pane:has(.ui-jdw-preview-viewport) {
316
- padding: 0;
317
- overflow: hidden;
318
- }
319
-
320
- .workbench-editor-area__jdw-preview,
321
- .workbench-editor-area__jdw-preview-viewport,
322
- .workbench-editor-area__preview-pane .ui-jdw-preview-viewport-host {
323
- min-height: 100%;
324
- height: 100%;
325
- }
326
-
327
- .workbench-editor-area__form,
328
- .workbench-editor-area__form-placeholder {
329
- box-sizing: border-box;
330
- flex: 1 1 auto;
331
- align-self: stretch;
332
- min-width: 0;
333
- min-height: 0;
334
- width: 100%;
335
- padding: 16px;
336
- }
337
-
338
- .workbench-editor-area__form {
339
- padding: 0;
340
- }
341
-
342
- .workbench-editor-area__form-grid {
343
- --workbench-editor-form-indent: 14px;
344
- box-sizing: border-box;
345
- display: grid;
346
- grid-template-columns: minmax(9rem, 34%) minmax(12rem, 1fr);
347
- column-gap: 20px;
348
- row-gap: 4px;
349
- align-items: start;
350
- align-content: start;
351
- width: 100%;
352
- max-width: 960px;
353
- min-height: min-content;
354
- padding: 16px;
355
- }
356
-
357
- .workbench-editor-area__form-field {
358
- display: contents;
359
- }
360
-
361
- .workbench-editor-area__form-label {
362
- grid-column: 1;
363
- align-self: start;
364
- padding-block: 7px;
365
- padding-inline-start: calc(
366
- var(--workbench-editor-form-depth, 0) * var(--workbench-editor-form-indent)
367
- );
368
- color: var(--color-text-muted);
369
- font-size: var(--font-size-sm, 0.875rem);
370
- line-height: 1.4;
371
- overflow-wrap: anywhere;
372
- text-align: end;
373
- }
374
-
375
- .workbench-editor-area__form-control,
376
- .workbench-editor-area__form-readonly {
377
- grid-column: 2;
378
- align-self: start;
379
- }
380
-
381
- .workbench-editor-area__form-control.ui-input,
382
- .workbench-editor-area__form-control.ui-select {
383
- width: 100%;
384
- max-width: 640px;
385
- min-width: 0;
386
- }
387
-
388
- .workbench-editor-area__form-readonly {
389
- box-sizing: border-box;
390
- min-width: 0;
391
- max-width: 640px;
392
- padding: 5px 8px;
393
- border: 1px solid var(--vscode-input-border, var(--color-border));
394
- border-radius: var(--radius-sm, 4px);
395
- background: var(--vscode-input-background, var(--color-bg));
396
- color: var(--vscode-descriptionForeground, var(--color-text-muted));
397
- font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
398
- font-size: var(--font-size-xs, 0.75rem);
399
- line-height: 1.5;
400
- }
401
-
402
- .workbench-editor-area__form-group-header {
403
- grid-column: 1 / -1;
404
- display: flex;
405
- align-items: center;
406
- gap: 8px;
407
- min-width: 0;
408
- margin-top: 8px;
409
- padding-top: 8px;
410
- padding-inline-start: calc(
411
- var(--workbench-editor-form-depth, 0) * var(--workbench-editor-form-indent)
412
- );
413
- border-top: 1px solid var(--vscode-editorGroup-border, var(--color-border));
414
- }
415
-
416
- .workbench-editor-area__form-grid > .workbench-editor-area__form-group-header {
417
- margin-top: 0;
418
- padding-top: 0;
419
- border-top: 0;
420
- }
421
-
422
- .workbench-editor-area__form-group-header .workbench-editor-area__form-label {
423
- grid-column: auto;
424
- padding-block: 0;
425
- padding-inline-start: 0;
426
- color: var(--color-text);
427
- font-weight: 600;
428
- text-align: start;
429
- }
430
-
431
- .workbench-editor-area__form-badge {
432
- flex-shrink: 0;
433
- padding: 1px 6px;
434
- border-radius: var(--radius-sm, 4px);
435
- background: var(--vscode-badge-background, var(--color-bg-elevated));
436
- color: var(--vscode-badge-foreground, var(--color-text-muted));
437
- font-size: var(--font-size-xs, 0.75rem);
438
- line-height: 1.4;
439
- }
440
-
441
- .workbench-editor-area__form-empty {
442
- grid-column: 2;
443
- align-self: start;
444
- padding-block: 4px;
445
- color: var(--color-text-muted);
446
- font-size: var(--font-size-sm, 0.875rem);
447
- }
448
-
449
- .workbench-editor-area__form-placeholder p {
450
- margin: 0 0 8px;
451
- color: var(--color-text-muted);
452
- font-size: var(--font-size-sm, 0.875rem);
453
- line-height: 1.5;
454
- }
1
+ .workbench-editor-area {
2
+ display: flex;
3
+ flex-direction: column;
4
+ height: 100%;
5
+ min-height: 0;
6
+ background: var(--vscode-editor-background, var(--color-bg));
7
+ }
8
+
9
+ .workbench-editor-area--empty {
10
+ display: grid;
11
+ place-items: center;
12
+ }
13
+
14
+ .workbench-editor-area__empty {
15
+ color: var(--color-text-muted);
16
+ font-size: var(--font-size-sm, 0.875rem);
17
+ }
18
+
19
+ .workbench-editor-area__missing-resource {
20
+ display: flex;
21
+ flex: 1;
22
+ align-items: center;
23
+ justify-content: center;
24
+ min-height: 0;
25
+ padding: 24px;
26
+ }
27
+
28
+ .workbench-editor-area__missing-resource-body {
29
+ max-width: 32rem;
30
+ color: var(--color-text-muted);
31
+ text-align: center;
32
+ }
33
+
34
+ .workbench-editor-area__missing-resource-title {
35
+ margin: 0 0 8px;
36
+ color: var(--vscode-foreground, var(--color-text));
37
+ font-size: 1rem;
38
+ font-weight: 600;
39
+ }
40
+
41
+ .workbench-editor-area__missing-resource-message,
42
+ .workbench-editor-area__missing-resource-path {
43
+ margin: 0 0 8px;
44
+ font-size: var(--font-size-sm, 0.875rem);
45
+ }
46
+
47
+ .workbench-editor-area__missing-resource-path {
48
+ font-family: var(--font-family-mono, monospace);
49
+ word-break: break-all;
50
+ }
51
+
52
+ .workbench-editor-area__missing-resource-close {
53
+ margin-top: 12px;
54
+ padding: 6px 12px;
55
+ border: 1px solid var(--vscode-button-border, var(--color-border));
56
+ border-radius: 4px;
57
+ background: var(--vscode-button-secondaryBackground, var(--color-bg-subtle));
58
+ color: var(--vscode-button-secondaryForeground, var(--color-text));
59
+ cursor: pointer;
60
+ font: inherit;
61
+ }
62
+
63
+ .workbench-editor-area__missing-resource-close:hover {
64
+ background: var(--vscode-button-secondaryHoverBackground, var(--color-bg-muted));
65
+ }
66
+
67
+ .workbench-editor-area__content {
68
+ display: flex;
69
+ flex-direction: column;
70
+ flex: 1;
71
+ min-height: 0;
72
+ overflow: hidden;
73
+ }
74
+
75
+ .workbench-editor-area__group-split.ui-workbench-split-view {
76
+ width: 100%;
77
+ height: 100%;
78
+ }
79
+
80
+ .workbench-editor-area__group-pane {
81
+ position: relative;
82
+ display: flex;
83
+ flex: 1;
84
+ flex-direction: column;
85
+ min-width: 0;
86
+ min-height: 0;
87
+ background: var(--vscode-editor-background, var(--color-bg));
88
+ }
89
+
90
+ .workbench-editor-area__group-body {
91
+ position: relative;
92
+ display: flex;
93
+ flex: 1;
94
+ min-width: 0;
95
+ min-height: 0;
96
+ }
97
+
98
+ .workbench-editor-area__drop-overlay {
99
+ position: absolute;
100
+ inset: 0;
101
+ z-index: 3;
102
+ pointer-events: none;
103
+ }
104
+
105
+ .workbench-editor-area__group-pane[data-drop-side='left'] .workbench-editor-area__drop-overlay {
106
+ right: 50%;
107
+ background: var(
108
+ --vscode-editorGroup-dropBackground,
109
+ color-mix(in srgb, var(--vscode-focusBorder, var(--color-focus-border)) 18%, transparent)
110
+ );
111
+ outline: 1px dashed var(--vscode-focusBorder, var(--color-focus-border));
112
+ outline-offset: -2px;
113
+ }
114
+
115
+ .workbench-editor-area__group-pane[data-drop-side='right'] .workbench-editor-area__drop-overlay {
116
+ left: 50%;
117
+ background: var(
118
+ --vscode-editorGroup-dropBackground,
119
+ color-mix(in srgb, var(--vscode-focusBorder, var(--color-focus-border)) 18%, transparent)
120
+ );
121
+ outline: 1px dashed var(--vscode-focusBorder, var(--color-focus-border));
122
+ outline-offset: -2px;
123
+ }
124
+
125
+ .workbench-editor-area__group-pane[data-drop-side='top'] .workbench-editor-area__drop-overlay {
126
+ bottom: 50%;
127
+ background: var(
128
+ --vscode-editorGroup-dropBackground,
129
+ color-mix(in srgb, var(--vscode-focusBorder, var(--color-focus-border)) 18%, transparent)
130
+ );
131
+ outline: 1px dashed var(--vscode-focusBorder, var(--color-focus-border));
132
+ outline-offset: -2px;
133
+ }
134
+
135
+ .workbench-editor-area__group-pane[data-drop-side='bottom'] .workbench-editor-area__drop-overlay {
136
+ top: 50%;
137
+ background: var(
138
+ --vscode-editorGroup-dropBackground,
139
+ color-mix(in srgb, var(--vscode-focusBorder, var(--color-focus-border)) 18%, transparent)
140
+ );
141
+ outline: 1px dashed var(--vscode-focusBorder, var(--color-focus-border));
142
+ outline-offset: -2px;
143
+ }
144
+
145
+ .workbench-editor-area__group-pane[data-drop-side='center'] .workbench-editor-area__drop-overlay {
146
+ background: var(
147
+ --vscode-editorGroup-dropBackground,
148
+ color-mix(in srgb, var(--vscode-focusBorder, var(--color-focus-border)) 12%, transparent)
149
+ );
150
+ outline: 1px dashed var(--vscode-focusBorder, var(--color-focus-border));
151
+ outline-offset: -2px;
152
+ }
153
+
154
+ .workbench-editor-area__group-actions {
155
+ display: flex;
156
+ flex-shrink: 0;
157
+ align-items: center;
158
+ gap: 4px;
159
+ height: 100%;
160
+ }
161
+
162
+ .workbench-editor-area__host {
163
+ box-sizing: border-box;
164
+ flex: 1;
165
+ min-width: 0;
166
+ height: 100%;
167
+ min-height: 0;
168
+ padding: 16px;
169
+ }
170
+
171
+ .workbench-editor-area__text-editor {
172
+ display: flex;
173
+ flex: 1;
174
+ flex-direction: column;
175
+ min-width: 0;
176
+ height: 100%;
177
+ min-height: 0;
178
+ }
179
+
180
+ .workbench-editor-area__mode-toolbar-outlet {
181
+ display: flex;
182
+ flex-shrink: 0;
183
+ align-items: center;
184
+ height: 100%;
185
+ }
186
+
187
+ .workbench-editor-area__view-toolbar {
188
+ box-sizing: border-box;
189
+ display: flex;
190
+ flex-shrink: 0;
191
+ gap: 2px;
192
+ align-items: center;
193
+ height: 100%;
194
+ }
195
+
196
+ .workbench-editor-area__view-button.ui-icon-button {
197
+ color: var(--vscode-tab-inactiveForeground, var(--color-text-muted));
198
+ opacity: 0.62;
199
+ }
200
+
201
+ .workbench-editor-area__view-button.ui-icon-button .codicon {
202
+ font-size: 15px;
203
+ }
204
+
205
+ .workbench-editor-area__view-button.ui-icon-button:hover {
206
+ opacity: 1;
207
+ background: var(--vscode-toolbar-hoverBackground, var(--color-bg-hover));
208
+ color: var(--vscode-tab-hoverForeground, var(--vscode-foreground, var(--color-text)));
209
+ }
210
+
211
+ .workbench-editor-area__view-button.ui-icon-button[aria-pressed='true'],
212
+ .workbench-editor-area__view-button.ui-icon-button[aria-checked='true'],
213
+ .workbench-editor-area__view-button--active.ui-icon-button {
214
+ opacity: 1;
215
+ color: var(--vscode-tab-activeForeground, var(--color-text));
216
+ background: color-mix(
217
+ in srgb,
218
+ var(--vscode-tab-activeForeground, var(--color-text)) 14%,
219
+ transparent
220
+ );
221
+ border-color: color-mix(
222
+ in srgb,
223
+ var(--vscode-focusBorder, var(--color-focus-border, var(--color-accent))) 35%,
224
+ transparent
225
+ );
226
+ }
227
+
228
+ .workbench-editor-area__view-button.ui-icon-button[aria-pressed='true']:hover,
229
+ .workbench-editor-area__view-button.ui-icon-button[aria-checked='true']:hover,
230
+ .workbench-editor-area__view-button--active.ui-icon-button:hover {
231
+ background: color-mix(
232
+ in srgb,
233
+ var(--vscode-tab-activeForeground, var(--color-text)) 20%,
234
+ transparent
235
+ );
236
+ }
237
+
238
+ .workbench-editor-area__text-editor-body {
239
+ display: flex;
240
+ flex: 1;
241
+ flex-direction: column;
242
+ min-width: 0;
243
+ min-height: 0;
244
+ }
245
+
246
+ .workbench-editor-area__text-editor-body > *:last-child {
247
+ flex: 1;
248
+ min-width: 0;
249
+ min-height: 0;
250
+ }
251
+
252
+ .workbench-editor-area__split.ui-workbench-split-view {
253
+ width: 100%;
254
+ height: 100%;
255
+ }
256
+
257
+ .workbench-editor-area__split-pane {
258
+ display: flex;
259
+ flex: 1;
260
+ min-width: 0;
261
+ min-height: 0;
262
+ }
263
+
264
+ .workbench-editor-area__source-pane {
265
+ display: flex;
266
+ flex: 1;
267
+ min-width: 0;
268
+ min-height: 0;
269
+ }
270
+
271
+ .workbench-editor-area__source-pane .workbench-monaco-panel {
272
+ --panel-bg: var(--vscode-editor-background, var(--color-bg));
273
+ background: var(--vscode-editor-background, var(--color-bg));
274
+ }
275
+
276
+ .workbench-editor-area__source-pane .workbench-monaco-panel,
277
+ .workbench-editor-area__source-pane .workbench-monaco-panel__body {
278
+ box-sizing: border-box;
279
+ flex: 1;
280
+ min-width: 0;
281
+ min-height: 0;
282
+ }
283
+
284
+ .workbench-editor-area__source-pane .workbench-monaco-panel,
285
+ .workbench-editor-area__source-pane .workspace-editor__monaco {
286
+ box-sizing: border-box;
287
+ min-width: 0;
288
+ min-height: 0;
289
+ height: 100%;
290
+ }
291
+
292
+ .workbench-editor-area__source-pane .workbench-monaco-panel__body {
293
+ padding: 0;
294
+ border: 0;
295
+ }
296
+
297
+ .workbench-editor-area__editor-loading {
298
+ display: grid;
299
+ flex: 1;
300
+ min-width: 0;
301
+ min-height: 0;
302
+ place-items: center;
303
+ color: var(--color-text-muted);
304
+ font-size: var(--font-size-sm, 0.875rem);
305
+ }
306
+
307
+ .workbench-editor-area__preview-pane {
308
+ flex: 1;
309
+ min-width: 0;
310
+ min-height: 0;
311
+ padding: 16px;
312
+ background: var(--vscode-editor-background, var(--color-bg));
313
+ }
314
+
315
+ .workbench-editor-area__preview-pane:has(.ui-jdw-preview-viewport) {
316
+ padding: 0;
317
+ overflow: hidden;
318
+ }
319
+
320
+ .workbench-editor-area__jdw-preview,
321
+ .workbench-editor-area__jdw-preview-viewport,
322
+ .workbench-editor-area__preview-pane .ui-jdw-preview-viewport-host {
323
+ min-height: 100%;
324
+ height: 100%;
325
+ }
326
+
327
+ .workbench-editor-area__form,
328
+ .workbench-editor-area__form-placeholder {
329
+ box-sizing: border-box;
330
+ flex: 1 1 auto;
331
+ align-self: stretch;
332
+ min-width: 0;
333
+ min-height: 0;
334
+ width: 100%;
335
+ padding: 16px;
336
+ }
337
+
338
+ .workbench-editor-area__form {
339
+ padding: 0;
340
+ }
341
+
342
+ .workbench-editor-area__form-grid {
343
+ --workbench-editor-form-indent: 14px;
344
+ box-sizing: border-box;
345
+ display: grid;
346
+ grid-template-columns: minmax(9rem, 34%) minmax(12rem, 1fr);
347
+ column-gap: 20px;
348
+ row-gap: 4px;
349
+ align-items: start;
350
+ align-content: start;
351
+ width: 100%;
352
+ max-width: 960px;
353
+ min-height: min-content;
354
+ padding: 16px;
355
+ }
356
+
357
+ .workbench-editor-area__form-field {
358
+ display: contents;
359
+ }
360
+
361
+ .workbench-editor-area__form-label {
362
+ grid-column: 1;
363
+ align-self: start;
364
+ padding-block: 7px;
365
+ padding-inline-start: calc(
366
+ var(--workbench-editor-form-depth, 0) * var(--workbench-editor-form-indent)
367
+ );
368
+ color: var(--color-text-muted);
369
+ font-size: var(--font-size-sm, 0.875rem);
370
+ line-height: 1.4;
371
+ overflow-wrap: anywhere;
372
+ text-align: end;
373
+ }
374
+
375
+ .workbench-editor-area__form-control,
376
+ .workbench-editor-area__form-readonly {
377
+ grid-column: 2;
378
+ align-self: start;
379
+ }
380
+
381
+ .workbench-editor-area__form-control.ui-input,
382
+ .workbench-editor-area__form-control.ui-select {
383
+ width: 100%;
384
+ max-width: 640px;
385
+ min-width: 0;
386
+ }
387
+
388
+ .workbench-editor-area__form-readonly {
389
+ box-sizing: border-box;
390
+ min-width: 0;
391
+ max-width: 640px;
392
+ padding: 5px 8px;
393
+ border: 1px solid var(--vscode-input-border, var(--color-border));
394
+ border-radius: var(--radius-sm, 4px);
395
+ background: var(--vscode-input-background, var(--color-bg));
396
+ color: var(--vscode-descriptionForeground, var(--color-text-muted));
397
+ font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
398
+ font-size: var(--font-size-xs, 0.75rem);
399
+ line-height: 1.5;
400
+ }
401
+
402
+ .workbench-editor-area__form-group-header {
403
+ grid-column: 1 / -1;
404
+ display: flex;
405
+ align-items: center;
406
+ gap: 8px;
407
+ min-width: 0;
408
+ margin-top: 8px;
409
+ padding-top: 8px;
410
+ padding-inline-start: calc(
411
+ var(--workbench-editor-form-depth, 0) * var(--workbench-editor-form-indent)
412
+ );
413
+ border-top: 1px solid var(--vscode-editorGroup-border, var(--color-border));
414
+ }
415
+
416
+ .workbench-editor-area__form-grid > .workbench-editor-area__form-group-header {
417
+ margin-top: 0;
418
+ padding-top: 0;
419
+ border-top: 0;
420
+ }
421
+
422
+ .workbench-editor-area__form-group-header .workbench-editor-area__form-label {
423
+ grid-column: auto;
424
+ padding-block: 0;
425
+ padding-inline-start: 0;
426
+ color: var(--color-text);
427
+ font-weight: 600;
428
+ text-align: start;
429
+ }
430
+
431
+ .workbench-editor-area__form-badge {
432
+ flex-shrink: 0;
433
+ padding: 1px 6px;
434
+ border-radius: var(--radius-sm, 4px);
435
+ background: var(--vscode-badge-background, var(--color-bg-elevated));
436
+ color: var(--vscode-badge-foreground, var(--color-text-muted));
437
+ font-size: var(--font-size-xs, 0.75rem);
438
+ line-height: 1.4;
439
+ }
440
+
441
+ .workbench-editor-area__form-empty {
442
+ grid-column: 2;
443
+ align-self: start;
444
+ padding-block: 4px;
445
+ color: var(--color-text-muted);
446
+ font-size: var(--font-size-sm, 0.875rem);
447
+ }
448
+
449
+ .workbench-editor-area__form-placeholder p {
450
+ margin: 0 0 8px;
451
+ color: var(--color-text-muted);
452
+ font-size: var(--font-size-sm, 0.875rem);
453
+ line-height: 1.5;
454
+ }