@workbench-kit/react 0.0.2-prototype.0.2.2 → 0.0.2-prototype.0.2.20

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 (169) hide show
  1. package/README.md +125 -0
  2. package/package.json +27 -20
  3. package/src/index.ts +60 -29
  4. package/src/jdw/JsonCodeEditorPane.tsx +7 -6
  5. package/src/jdw/builtins/renderBuiltinWidgetLeaf.tsx +1 -3
  6. package/src/jdw/createBuiltinJdwRegistry.ts +1 -4
  7. package/src/jdw/cssRenderBackend.tsx +1 -4
  8. package/src/json-config/JsonConfigWorkbench.tsx +1 -1
  9. package/src/layout/index.ts +11 -0
  10. package/src/layout/sidebar/SideBarTree.tsx +301 -0
  11. package/src/layout/sidebar/SidebarActionIconBar.tsx +3 -3
  12. package/src/layout/sidebar/WorkbenchSidebarActions.tsx +1 -1
  13. package/src/layout/sidebar/index.ts +13 -0
  14. package/src/modal/Modal.tsx +55 -25
  15. package/src/modal/ModalTitlebar.tsx +8 -8
  16. package/src/modal/modalPosition.ts +3 -6
  17. package/src/modal/useModalFocusTrap.ts +142 -0
  18. package/src/modal/useModalWindowFrame.ts +2 -2
  19. package/src/overlay/ContextMenu.tsx +112 -5
  20. package/src/overlay/context-menu.css +4 -2
  21. package/src/overlay/measureAnchoredOverlayPanel.ts +4 -6
  22. package/src/overlay/usePointerPassthroughRegion.ts +2 -0
  23. package/src/primitives/absolute-box/AbsoluteBox.tsx +4 -4
  24. package/src/primitives/button/Button.tsx +4 -4
  25. package/src/primitives/catalog-browse-card/CatalogBrowseCard.tsx +6 -6
  26. package/src/primitives/catalog-browse-pane/CatalogBrowsePane.tsx +15 -15
  27. package/src/primitives/catalog-filter-overlay/CatalogFilterOverlay.tsx +2 -2
  28. package/src/primitives/checkbox/Checkbox.tsx +1 -1
  29. package/src/primitives/chip/Chip.tsx +2 -2
  30. package/src/primitives/codicon/Codicon.tsx +1 -1
  31. package/src/primitives/file-icon/FileIcon.tsx +1 -1
  32. package/src/primitives/icon-button/IconButton.tsx +1 -1
  33. package/src/primitives/index.ts +5 -0
  34. package/src/primitives/library-detail-layout/LibraryDetailLayout.tsx +123 -9
  35. package/src/primitives/library-detail-layout/index.ts +5 -0
  36. package/src/primitives/library-detail-layout/library-detail-layout.css +57 -0
  37. package/src/primitives/library-detail-layout/resolve-hero-cover-media.ts +80 -0
  38. package/src/primitives/library-facet-filter-panel/LibraryFacetFilterPanel.tsx +12 -12
  39. package/src/primitives/library-facet-filter-strip/LibraryFacetFilterStrip.tsx +4 -4
  40. package/src/primitives/number-input/NumberInput.tsx +5 -5
  41. package/src/primitives/record-media-hero/RecordMediaHero.tsx +10 -6
  42. package/src/primitives/scroll-area/ScrollArea.tsx +5 -5
  43. package/src/primitives/scroll-area-infinite-load/useScrollAreaInfiniteLoad.ts +5 -5
  44. package/src/primitives/searchable-multi-select/SearchableMultiSelect.tsx +7 -7
  45. package/src/primitives/select/Select.tsx +1 -13
  46. package/src/primitives/text-area/TextArea.tsx +1 -1
  47. package/src/primitives/text-input/TextInput.tsx +1 -1
  48. package/src/primitives/workbench-media-slot/WorkbenchMediaPlaceholder.tsx +2 -2
  49. package/src/primitives/workbench-media-slot/WorkbenchMediaSlot.tsx +16 -10
  50. package/src/primitives/workbench-thumbnail/WorkbenchThumbnail.tsx +4 -4
  51. package/src/styles.css +1 -2
  52. package/src/test-utils/workbenchMonacoMock.tsx +20 -0
  53. package/src/utils/clamp.ts +4 -0
  54. package/src/utils/normalizeKeyToken.ts +13 -0
  55. package/src/utils/readNumber.ts +4 -0
  56. package/src/widget-tree/WidgetTreeCanvasPreview.tsx +1 -4
  57. package/src/widget-tree/WidgetTreeWorkspaceShell.tsx +2 -2
  58. package/src/workbench/chat/ChatCommandProposalCard.tsx +4 -4
  59. package/src/workbench/chat/ChatConversationBar.tsx +3 -3
  60. package/src/workbench/chat/ChatHistoryMenu.tsx +1 -1
  61. package/src/workbench/chat/ChatMessageCollapsible.tsx +4 -0
  62. package/src/workbench/chat/ChatMessageItem.tsx +68 -10
  63. package/src/workbench/chat/ChatMessageList.tsx +1 -1
  64. package/src/workbench/chat/ChatPanel.tsx +32 -23
  65. package/src/workbench/chat/ChatPhasedRunProgress.tsx +86 -13
  66. package/src/workbench/chat/ChatRenameDialog.tsx +1 -1
  67. package/src/workbench/chat/chat-conversation.css +2 -2
  68. package/src/workbench/chat/chat-ui.css +8 -0
  69. package/src/workbench/chat/chatConversation.ts +2 -2
  70. package/src/workbench/chat/chatMessageMeta.tsx +4 -4
  71. package/src/workbench/chat/index.ts +1 -0
  72. package/src/workbench/chat/types.ts +7 -7
  73. package/src/workbench/chat/useCancelRuntimeOnUnmount.ts +4 -4
  74. package/src/workbench/chat/useChatPrependPagination.ts +10 -10
  75. package/src/workbench/chat/useSlashCommandSuggest.ts +1 -1
  76. package/src/workbench/{WorkbenchModalPortal.tsx → chrome/WorkbenchModalPortal.tsx} +1 -1
  77. package/src/workbench/chrome/workbench-chrome.css +4 -0
  78. package/src/workbench/{CommandGroupShell.tsx → commands/CommandGroupShell.tsx} +2 -2
  79. package/src/workbench/{CommandList.tsx → commands/CommandList.tsx} +5 -5
  80. package/src/workbench/{CommandPalette.tsx → commands/CommandPalette.tsx} +16 -42
  81. package/src/workbench/{ConfirmationFlow.tsx → commands/ConfirmationFlow.tsx} +5 -5
  82. package/src/workbench/{ShortcutCommandBridge.tsx → commands/ShortcutCommandBridge.tsx} +1 -13
  83. package/src/workbench/commands/WorkbenchQuickOpen.tsx +462 -0
  84. package/src/workbench/{command-model.ts → commands/command-model.ts} +5 -1
  85. package/src/workbench/commands/command-ui.ts +3 -0
  86. package/src/workbench/{commands.ts → commands/commands.ts} +1 -1
  87. package/src/workbench/commands/createWorkspaceFilesQuickOpenProvider.ts +86 -0
  88. package/src/workbench/commands/quick-open-model.ts +66 -0
  89. package/src/workbench/{WorkbenchEditorTabs.tsx → editor/WorkbenchEditorTabs.tsx} +1 -1
  90. package/src/workbench/{editor-tabs-dnd.ts → editor/editor-tabs-dnd.ts} +1 -1
  91. package/src/workbench/{editorTabContextMenu.ts → editor/editorTabContextMenu.ts} +2 -2
  92. package/src/workbench/{useEditorTabsStripDnd.ts → editor/useEditorTabsStripDnd.ts} +1 -1
  93. package/src/workbench/{useWorkbenchEditorTabContextMenu.tsx → editor/useWorkbenchEditorTabContextMenu.tsx} +1 -1
  94. package/src/workbench/editor-tabs/index.ts +9 -9
  95. package/src/workbench/index.ts +110 -74
  96. package/src/workbench/management/ExtensionManagementPanel.tsx +32 -36
  97. package/src/workbench/management/ExtensionManagementSidebar.tsx +19 -35
  98. package/src/workbench/management/IntegrationSettingsSurface.tsx +2 -5
  99. package/src/workbench/management/IntegrationsShell.tsx +1 -1
  100. package/src/workbench/management/KeybindingCaptureField.tsx +1 -9
  101. package/src/workbench/management/WorkbenchDialogFrame.tsx +2 -2
  102. package/src/workbench/management/WorkbenchNotice.tsx +2 -5
  103. package/src/workbench/management/createWorkbenchNotify.tsx +88 -0
  104. package/src/workbench/management/extension-install-approval.ts +72 -0
  105. package/src/workbench/management/extension-management-filters.ts +38 -0
  106. package/src/workbench/management/index.ts +14 -0
  107. package/src/workbench/management/management.css +28 -0
  108. package/src/workbench/management/types.ts +14 -1
  109. package/src/workbench/management/useWorkbenchNotify.ts +10 -0
  110. package/src/workbench/{MarkdownPreview.tsx → markdown/MarkdownPreview.tsx} +22 -7
  111. package/src/workbench/markdown/markdownRemarkPlugins.ts +12 -0
  112. package/src/workbench/markdown/sanitizeMarkdownHref.ts +29 -0
  113. package/src/workbench/settings/StructuredDataForm.tsx +1 -4
  114. package/src/workbench/settings/structuredDataFormModel.ts +2 -1
  115. package/src/workbench/{ActivityBar.tsx → shell/ActivityBar.tsx} +8 -8
  116. package/src/workbench/{ArtifactShell.tsx → shell/ArtifactShell.tsx} +25 -25
  117. package/src/workbench/{SplitView.tsx → shell/SplitView.tsx} +3 -3
  118. package/src/workbench/{StatusBar.tsx → shell/StatusBar.tsx} +8 -8
  119. package/src/workbench/{StructuredArtifactEditor.tsx → shell/StructuredArtifactEditor.tsx} +9 -9
  120. package/src/workbench/{Timeline.tsx → shell/Timeline.tsx} +77 -20
  121. package/src/workbench/{WorkbenchCanvasShell.defaults.ts → shell/WorkbenchCanvasShell.defaults.ts} +1 -1
  122. package/src/workbench/{WorkbenchCanvasShell.model.ts → shell/WorkbenchCanvasShell.model.ts} +5 -5
  123. package/src/workbench/{WorkbenchCanvasShell.tsx → shell/WorkbenchCanvasShell.tsx} +6 -6
  124. package/src/workbench/{WorkbenchDesktopTitleBar.tsx → shell/WorkbenchDesktopTitleBar.tsx} +15 -15
  125. package/src/workbench/{WorkbenchShell.tsx → shell/WorkbenchShell.tsx} +45 -6
  126. package/src/workbench/{WorkbenchShellTitleBarLayoutControls.tsx → shell/WorkbenchShellTitleBarLayoutControls.tsx} +16 -19
  127. package/src/workbench/{WorkbenchStandaloneShell.tsx → shell/WorkbenchStandaloneShell.tsx} +4 -4
  128. package/src/workbench/{WorkbenchViewEditor.tsx → shell/WorkbenchViewEditor.tsx} +7 -7
  129. package/src/workbench/{WorkbenchViewSidebar.tsx → shell/WorkbenchViewSidebar.tsx} +7 -7
  130. package/src/workbench/{WorkbenchWindowChromeControls.tsx → shell/WorkbenchWindowChromeControls.tsx} +18 -15
  131. package/src/workbench/shell/activity-bar.css +47 -0
  132. package/src/workbench/{shell.ts → shell/shell.ts} +18 -12
  133. package/src/workbench/{shellViewModel.ts → shell/shellViewModel.ts} +3 -3
  134. package/src/workbench/{standalone.ts → shell/standalone.ts} +14 -2
  135. package/src/workbench/{useDeferredWorkbenchMount.ts → shell/useDeferredWorkbenchMount.ts} +3 -3
  136. package/src/workbench/{useWorkbenchAppearanceDocumentSync.tsx → shell/useWorkbenchAppearanceDocumentSync.tsx} +1 -1
  137. package/src/workbench/{useWorkbenchSidebarActionBarDnd.ts → shell/useWorkbenchSidebarActionBarDnd.ts} +1 -1
  138. package/src/workbench/{useWorkbenchSidebarViewPlacementDropZone.ts → shell/useWorkbenchSidebarViewPlacementDropZone.ts} +2 -2
  139. package/src/workbench/{workbenchViewRouteState.ts → shell/workbenchViewRouteState.ts} +4 -4
  140. package/src/workbench/{WorkbenchThemeProvider.tsx → theme/WorkbenchThemeProvider.tsx} +4 -4
  141. package/src/workbench/{theme.ts → theme/theme.ts} +1 -1
  142. package/src/workbench/{themePresets.ts → theme/themePresets.ts} +3 -2
  143. package/src/workbench/views/view-hosts.css +3 -3
  144. package/src/workbench/workspace/WorkspaceEditorPanel.tsx +1 -1
  145. package/src/workbench/workspace/WorkspaceExplorer.tsx +104 -3
  146. package/src/workbench/workspace/workspaceExplorerKeyboard.ts +109 -0
  147. package/src/workbench/workspace/workspaceJsonDiagnostics.ts +6 -5
  148. package/src/workbench/jdw/jdw-editors.css +0 -4
  149. package/src/workbench/jdw/jdw.css +0 -2
  150. package/src/workbench/markdownRemarkPlugins.ts +0 -4
  151. package/src/workbench/workbench-chrome.css +0 -4
  152. /package/src/workbench/{WorkbenchPlatformContext.tsx → chrome/WorkbenchPlatformContext.tsx} +0 -0
  153. /package/src/workbench/{workbenchModalViewState.ts → chrome/workbenchModalViewState.ts} +0 -0
  154. /package/src/workbench/{workbenchOverlaysContext.tsx → chrome/workbenchOverlaysContext.tsx} +0 -0
  155. /package/src/workbench/{workbenchPlatformChrome.ts → chrome/workbenchPlatformChrome.ts} +0 -0
  156. /package/src/workbench/{command-execution-policy.ts → commands/command-execution-policy.ts} +0 -0
  157. /package/src/workbench/{keyboard.ts → commands/keyboard.ts} +0 -0
  158. /package/src/workbench/{workbenchContextMenu.ts → commands/workbenchContextMenu.ts} +0 -0
  159. /package/src/workbench/{activityBarOrder.ts → shell/activityBarOrder.ts} +0 -0
  160. /package/src/workbench/{appearanceLabels.ts → shell/appearanceLabels.ts} +0 -0
  161. /package/src/workbench/{hardReset.ts → shell/hardReset.ts} +0 -0
  162. /package/src/workbench/{shellPresets.ts → shell/shellPresets.ts} +0 -0
  163. /package/src/workbench/{shellState.ts → shell/shellState.ts} +0 -0
  164. /package/src/workbench/{sidebarViewPlacementDnd.ts → shell/sidebarViewPlacementDnd.ts} +0 -0
  165. /package/src/workbench/{status.ts → shell/status.ts} +0 -0
  166. /package/src/workbench/{useWorkbenchSidebarLayout.tsx → shell/useWorkbenchSidebarLayout.tsx} +0 -0
  167. /package/src/workbench/{useWorkbenchStandaloneShellStateSync.tsx → shell/useWorkbenchStandaloneShellStateSync.tsx} +0 -0
  168. /package/src/workbench/{workbenchSidebarLayoutContext.ts → shell/workbenchSidebarLayoutContext.ts} +0 -0
  169. /package/src/workbench/{workbenchStandaloneShellReactContext.tsx → shell/workbenchStandaloneShellReactContext.tsx} +0 -0
@@ -32,6 +32,53 @@
32
32
  border-top: 1px solid var(--vscode-panel-border, var(--color-border));
33
33
  }
34
34
 
35
+ .workbench-bottom-panel__header {
36
+ display: flex;
37
+ flex-shrink: 0;
38
+ align-items: stretch;
39
+ gap: 0;
40
+ min-height: 28px;
41
+ border-bottom: 1px solid var(--vscode-panel-border, var(--color-border));
42
+ background: var(--vscode-panel-background, var(--color-surface));
43
+ }
44
+
45
+ .workbench-bottom-panel__tab {
46
+ appearance: none;
47
+ border: none;
48
+ background: transparent;
49
+ color: var(--color-text-muted);
50
+ font: inherit;
51
+ font-size: 12px;
52
+ padding: 4px 12px;
53
+ cursor: pointer;
54
+ }
55
+
56
+ .workbench-bottom-panel__tab:hover {
57
+ color: var(--color-text);
58
+ }
59
+
60
+ .workbench-bottom-panel__tab--active {
61
+ color: var(--color-text);
62
+ box-shadow: inset 0 -2px 0 var(--color-accent, var(--color-primary));
63
+ }
64
+
65
+ .workbench-bottom-panel__body {
66
+ flex: 1;
67
+ min-height: 0;
68
+ overflow: auto;
69
+ padding: 8px 12px;
70
+ }
71
+
72
+ .workbench-bottom-panel__view {
73
+ min-height: 0;
74
+ }
75
+
76
+ .workbench-bottom-panel__empty {
77
+ color: var(--color-text-muted);
78
+ font-size: 12px;
79
+ padding: 8px 12px;
80
+ }
81
+
35
82
  .ui-workbench-activity-bar__item {
36
83
  --ui-button-width: var(--workbench-activity-bar-item-size);
37
84
  --ui-button-min-width: 0;
@@ -64,22 +64,22 @@ export type {
64
64
  WorkbenchViewEditorEmptyStateSurfaceProps,
65
65
  WorkbenchViewEditorProps,
66
66
  } from './WorkbenchViewEditor';
67
- export { WorkbenchEditorTabs } from './WorkbenchEditorTabs';
68
- export type { WorkbenchEditorTabsProps } from './WorkbenchEditorTabs';
67
+ export { WorkbenchEditorTabs } from '../editor/WorkbenchEditorTabs';
68
+ export type { WorkbenchEditorTabsProps } from '../editor/WorkbenchEditorTabs';
69
69
  export {
70
70
  createWorkbenchStandaloneEditorTabCommandContext,
71
71
  createWorkbenchStandaloneEditorTabContextMenuItems,
72
72
  isWorkbenchEditorTabClosable,
73
- } from './editorTabContextMenu';
73
+ } from '../editor/editorTabContextMenu';
74
74
  export type {
75
75
  CreateWorkbenchStandaloneEditorTabCommandContextInput,
76
76
  WorkbenchStandaloneEditorTabLike,
77
- } from './editorTabContextMenu';
78
- export { useWorkbenchEditorTabContextMenu } from './useWorkbenchEditorTabContextMenu';
77
+ } from '../editor/editorTabContextMenu';
78
+ export { useWorkbenchEditorTabContextMenu } from '../editor/useWorkbenchEditorTabContextMenu';
79
79
  export type {
80
80
  UseWorkbenchEditorTabContextMenuOptions,
81
81
  UseWorkbenchEditorTabContextMenuResult,
82
- } from './useWorkbenchEditorTabContextMenu';
82
+ } from '../editor/useWorkbenchEditorTabContextMenu';
83
83
  export { WorkbenchViewSidebar } from './WorkbenchViewSidebar';
84
84
  export type { WorkbenchViewSidebarItem, WorkbenchViewSidebarProps } from './WorkbenchViewSidebar';
85
85
  export {
@@ -90,23 +90,29 @@ export type {
90
90
  WorkbenchDesktopTitleBarProps,
91
91
  WorkbenchDesktopWindowControlsProps,
92
92
  } from './WorkbenchDesktopTitleBar';
93
- export { WorkbenchPlatformProvider, useWorkbenchHostPlatform } from './WorkbenchPlatformContext';
94
- export type { WorkbenchPlatformProviderProps } from './WorkbenchPlatformContext';
93
+ export {
94
+ WorkbenchPlatformProvider,
95
+ useWorkbenchHostPlatform,
96
+ } from '../chrome/WorkbenchPlatformContext';
97
+ export type { WorkbenchPlatformProviderProps } from '../chrome/WorkbenchPlatformContext';
95
98
  export {
96
99
  resolveWorkbenchHostPlatform,
97
100
  resolveWorkbenchWindowChromeDataAttributes,
98
- } from './workbenchPlatformChrome';
99
- export type { WorkbenchHostPlatform, WorkbenchWindowChromeMode } from './workbenchPlatformChrome';
101
+ } from '../chrome/workbenchPlatformChrome';
102
+ export type {
103
+ WorkbenchHostPlatform,
104
+ WorkbenchWindowChromeMode,
105
+ } from '../chrome/workbenchPlatformChrome';
100
106
  export {
101
107
  WorkbenchWindowChromeControls,
102
108
  shouldUseDarwinPlatformChrome,
103
109
  } from './WorkbenchWindowChromeControls';
104
110
  export type { WorkbenchWindowChromeControlsProps } from './WorkbenchWindowChromeControls';
105
- export { useWorkbenchModalViewState } from './workbenchModalViewState';
111
+ export { useWorkbenchModalViewState } from '../chrome/workbenchModalViewState';
106
112
  export type {
107
113
  UseWorkbenchModalViewStateOptions,
108
114
  WorkbenchModalViewState,
109
- } from './workbenchModalViewState';
115
+ } from '../chrome/workbenchModalViewState';
110
116
  export {
111
117
  WorkbenchSidebarLayoutProvider,
112
118
  useWorkbenchSidebarLayout,
@@ -5,7 +5,7 @@ import type {
5
5
  WorkbenchViewEditorTabItem,
6
6
  } from '@workbench-kit/platform';
7
7
 
8
- import type { EditorTab } from '../primitives/workbench-editor';
8
+ import type { EditorTab } from '../../primitives/workbench-editor';
9
9
  import type { ActivityBarItem } from './ActivityBar';
10
10
  import type { WorkbenchShellProps } from './WorkbenchShell';
11
11
  import type { WorkbenchViewSidebarItem, WorkbenchViewSidebarProps } from './WorkbenchViewSidebar';
@@ -24,8 +24,8 @@ export interface CreateWorkbenchShellActivityBarFromViewModelInput<
24
24
  TViewId extends string,
25
25
  TIcon = unknown,
26
26
  > {
27
- readonly activeId?: TViewId | undefined;
28
- readonly activityBarProps?: WorkbenchShellActivityBarViewModelProps | undefined;
27
+ readonly activeId?: TViewId;
28
+ readonly activityBarProps?: WorkbenchShellActivityBarViewModelProps;
29
29
  readonly model: WorkbenchViewActivityBarModel<TViewId, TIcon>;
30
30
  readonly onSelect?:
31
31
  ((viewId: TViewId, item: WorkbenchViewActivityBarItem<TViewId, TIcon>) => void) | undefined;
@@ -6,8 +6,8 @@ import type {
6
6
  } from '@workbench-kit/contracts';
7
7
  import type { ReactNode } from 'react';
8
8
  import type { StatusBarSectionModel } from './StatusBar';
9
- import type { WorkbenchShellCommandContext } from './commands';
10
- import type { WorkspaceFile } from './workspace';
9
+ import type { WorkbenchShellCommandContext } from '../commands/commands';
10
+ import type { WorkspaceFile } from '../workspace';
11
11
 
12
12
  export type WorkbenchTheme = 'light' | 'dark' | (string & {});
13
13
 
@@ -99,3 +99,15 @@ export type WorkbenchStandaloneBootstrapEvent<TActivityId extends string = strin
99
99
  | { type: 'activity-change'; payload: WorkbenchActivityChangeEvent<TActivityId> }
100
100
  | { type: 'status-message'; message: string }
101
101
  | { type: 'error'; error: Error };
102
+
103
+ export * from './WorkbenchStandaloneShell';
104
+ export {
105
+ createWorkbenchStandaloneShellStateSnapshot,
106
+ useWorkbenchStandaloneShellContext,
107
+ } from './workbenchStandaloneShellReactContext';
108
+ export type {
109
+ WorkbenchStandaloneShellStateChange,
110
+ WorkbenchStandaloneShellStateChangeKind,
111
+ WorkbenchStandaloneShellStateSnapshot,
112
+ } from './workbenchStandaloneShellReactContext';
113
+ export { useWorkbenchStandaloneShellStateSync } from './useWorkbenchStandaloneShellStateSync';
@@ -1,9 +1,9 @@
1
1
  import { startTransition, useEffect, useRef, useState } from 'react';
2
2
 
3
3
  export interface UseDeferredWorkbenchMountOptions {
4
- readonly delayMs?: number | undefined;
5
- readonly disabled?: boolean | undefined;
6
- readonly initialReady?: boolean | undefined;
4
+ readonly delayMs?: number;
5
+ readonly disabled?: boolean;
6
+ readonly initialReady?: boolean;
7
7
  }
8
8
 
9
9
  export function useDeferredWorkbenchMount({
@@ -1,6 +1,6 @@
1
1
  import { useLayoutEffect } from 'react';
2
2
 
3
- import { applyWorkbenchAppearance, type WorkbenchAppearanceSettings } from './themePresets';
3
+ import { applyWorkbenchAppearance, type WorkbenchAppearanceSettings } from '../theme/themePresets';
4
4
 
5
5
  /**
6
6
  * Keeps `document.documentElement` theme attributes aligned with appearance settings.
@@ -22,7 +22,7 @@ export interface WorkbenchSidebarActionBarDropTarget {
22
22
 
23
23
  export interface UseWorkbenchSidebarActionBarDndOptions {
24
24
  readonly itemIds: readonly string[];
25
- readonly onReorder?: ((itemIds: string[]) => void) | undefined;
25
+ readonly onReorder?: (itemIds: string[]) => void;
26
26
  readonly orientation?: ActivityBarOrientation;
27
27
  readonly placementDraggable?: boolean;
28
28
  readonly reorderable?: boolean;
@@ -20,9 +20,9 @@ export type WorkbenchSidebarViewPlacementDropZoneProps = HTMLAttributes<HTMLElem
20
20
  };
21
21
 
22
22
  export interface UseWorkbenchSidebarViewPlacementDropZoneOptions {
23
- readonly acceptViewForDrop?: ((viewId: string) => boolean) | undefined;
23
+ readonly acceptViewForDrop?: (viewId: string) => boolean;
24
24
  readonly onDropView: (viewId: string) => void;
25
- readonly zoneId?: string | undefined;
25
+ readonly zoneId?: string;
26
26
  }
27
27
 
28
28
  function chainDragHandler<E extends DragEvent<HTMLElement>>(
@@ -20,11 +20,11 @@ export interface WorkbenchViewRouteBrowserWindow {
20
20
 
21
21
  export interface UseWorkbenchViewRouteStateOptions<TViewId extends string> {
22
22
  readonly defaultViewId: TViewId;
23
- readonly discardedParams?: ReadonlyArray<string> | undefined;
23
+ readonly discardedParams?: ReadonlyArray<string>;
24
24
  readonly isViewId: (value: string | null) => value is TViewId;
25
- readonly routeWindow?: WorkbenchViewRouteBrowserWindow | undefined;
26
- readonly tabsParam?: string | undefined;
27
- readonly viewParam?: string | undefined;
25
+ readonly routeWindow?: WorkbenchViewRouteBrowserWindow;
26
+ readonly tabsParam?: string;
27
+ readonly viewParam?: string;
28
28
  }
29
29
 
30
30
  export interface WorkbenchViewRouteState<
@@ -1,8 +1,8 @@
1
1
  import { useEffect, useMemo, type ComponentPropsWithoutRef, type ReactNode } from 'react';
2
- import './chrome/workbench-host.css';
3
- import './chrome/workbench-platform-chrome.css';
2
+ import '../chrome/workbench-host.css';
3
+ import '../chrome/workbench-platform-chrome.css';
4
4
 
5
- import { WorkbenchPlatformProvider } from './WorkbenchPlatformContext';
5
+ import { WorkbenchPlatformProvider } from '../chrome/WorkbenchPlatformContext';
6
6
  import {
7
7
  applyWorkbenchThemeProviderAttributes,
8
8
  type WorkbenchThemeProviderAttributes,
@@ -11,7 +11,7 @@ import type { ResolvedWorkbenchTheme } from './theme';
11
11
  import {
12
12
  resolveWorkbenchHostPlatform,
13
13
  type WorkbenchHostPlatform,
14
- } from './workbenchPlatformChrome';
14
+ } from '../chrome/workbenchPlatformChrome';
15
15
 
16
16
  export interface WorkbenchThemeProviderProps extends Omit<
17
17
  ComponentPropsWithoutRef<'div'>,
@@ -1,5 +1,5 @@
1
1
  import { useSyncExternalStore } from 'react';
2
- import type { WorkbenchTheme } from './standalone';
2
+ import type { WorkbenchTheme } from '../shell/standalone';
3
3
 
4
4
  export type ResolvedWorkbenchTheme = 'dark' | 'light';
5
5
 
@@ -1,6 +1,6 @@
1
1
  import { resolveWorkbenchTheme, type ResolvedWorkbenchTheme } from './theme';
2
- import type { WorkbenchTheme } from './standalone';
3
- import { applyWorkbenchShellAttributes } from './shellPresets';
2
+ import type { WorkbenchTheme } from '../shell/standalone';
3
+ import { applyWorkbenchShellAttributes } from '../shell/shellPresets';
4
4
 
5
5
  export interface WorkbenchThemePresetManifestEntry<TId extends string = string> {
6
6
  readonly id: TId;
@@ -20,6 +20,7 @@ export const DARK_THEME_PRESET_MANIFEST = [
20
20
  { id: 'modern', label: 'Modern Dark' },
21
21
  { id: 'dark-plus', label: 'Dark+' },
22
22
  { id: 'hc-black', label: 'High Contrast Black' },
23
+ { id: 'slate', label: 'Slate (alias pack)' },
23
24
  ] as const satisfies readonly WorkbenchThemePresetManifestEntry[];
24
25
 
25
26
  export type LightThemePresetId = (typeof LIGHT_THEME_PRESET_MANIFEST)[number]['id'];
@@ -3,19 +3,19 @@
3
3
  .workbench-search-view,
4
4
  .workbench-chat-view,
5
5
  .workbench-primary-sidebar .ui-sidebar-view,
6
- .shell-react-primary-sidebar {
6
+ .shell-react-sidebar-host {
7
7
  display: flex;
8
8
  flex: 1 1 auto;
9
9
  flex-direction: column;
10
10
  min-height: 0;
11
11
  }
12
12
 
13
- .shell-react-primary-sidebar > section {
13
+ .shell-react-sidebar-host > section {
14
14
  /* section is semantic only; view host frame carries sidebar flex sizing */
15
15
  display: contents;
16
16
  }
17
17
 
18
- .shell-react-primary-sidebar [data-view-host-id] {
18
+ .shell-react-sidebar-host [data-view-host-id] {
19
19
  display: flex;
20
20
  flex: 1 1 auto;
21
21
  flex-direction: column;
@@ -19,7 +19,7 @@ import {
19
19
  createWorkbenchEditorTabListMenuEntries,
20
20
  createWorkbenchEditorTabMenuEntries,
21
21
  type WorkbenchEditorCommandContext,
22
- } from '../commands';
22
+ } from '../commands/commands';
23
23
  import { fileNameOfPath } from './path';
24
24
  import { WorkspaceEditor, type WorkspaceEditorTheme } from './WorkspaceEditor';
25
25
  import { WorkspaceFileIcon } from './WorkspaceFileIcon';
@@ -23,6 +23,10 @@ import { TextInput } from '../../primitives/text-input';
23
23
  import { cxCodicon } from '../../utils/codicon';
24
24
  import { explorerTreeDepthStyle } from './explorer-tree-style';
25
25
  import { flattenWorkspaceTree } from './tree';
26
+ import {
27
+ resolveWorkspaceExplorerHorizontalNavigationAction,
28
+ resolveWorkspaceExplorerNavigationPath,
29
+ } from './workspaceExplorerKeyboard.js';
26
30
  import { WorkspaceFileIcon } from './WorkspaceFileIcon';
27
31
  import type { WorkspaceTreeNode } from './types';
28
32
 
@@ -30,7 +34,7 @@ export const WORKSPACE_EXPLORER_DRAG_DATA_TYPE = 'application/x-newchobo-ui-work
30
34
  export const WORKSPACE_EXPLORER_DRAG_METADATA_DATA_TYPE = `${WORKSPACE_EXPLORER_DRAG_DATA_TYPE}.metadata`;
31
35
 
32
36
  export type WorkspaceExplorerSelectionChangeReason =
33
- 'clear' | 'click' | 'context-menu' | 'drag-start' | 'folder-click';
37
+ 'clear' | 'click' | 'context-menu' | 'drag-start' | 'folder-click' | 'keyboard';
34
38
 
35
39
  export interface WorkspaceExplorerSelectionChangeMeta {
36
40
  event?: DragEvent<HTMLButtonElement> | MouseEvent<HTMLButtonElement>;
@@ -91,6 +95,8 @@ export interface WorkspaceExplorerInlineEditCommitMeta {
91
95
 
92
96
  export interface WorkspaceExplorerProps {
93
97
  activePath?: string;
98
+ /** Accessible name for the `role="tree"` list. Defaults to "Workspace files". */
99
+ ariaLabel?: string;
94
100
  dragDataType?: string;
95
101
  dragMetadataDataType?: string;
96
102
  dragMetadataFactory?: WorkspaceExplorerDragMetadataFactory;
@@ -120,10 +126,16 @@ export interface WorkspaceExplorerProps {
120
126
  renderItemActions?: (node: WorkspaceTreeNode, meta: WorkspaceExplorerItemActionMeta) => ReactNode;
121
127
  selectedPaths?: Iterable<string>;
122
128
  selectionAnchorPath?: string;
129
+ /**
130
+ * When true (default), Arrow/Home/End focus updates also emit selection
131
+ * (file → single `paths`; folder → `{ focusedPath, paths: [] }`).
132
+ */
133
+ selectionFollowsFocus?: boolean;
123
134
  }
124
135
 
125
136
  export function WorkspaceExplorer({
126
137
  activePath,
138
+ ariaLabel = 'Workspace files',
127
139
  dragDataType = WORKSPACE_EXPLORER_DRAG_DATA_TYPE,
128
140
  dragMetadataDataType = WORKSPACE_EXPLORER_DRAG_METADATA_DATA_TYPE,
129
141
  dragMetadataFactory,
@@ -146,6 +158,7 @@ export function WorkspaceExplorer({
146
158
  renderItemActions,
147
159
  selectedPaths = [],
148
160
  selectionAnchorPath,
161
+ selectionFollowsFocus = true,
149
162
  }: WorkspaceExplorerProps) {
150
163
  const sectionBaseDepth = useSidebarSectionBaseDepth();
151
164
  const draggedPathsRef = useRef<string[]>([]);
@@ -311,7 +324,85 @@ export function WorkspaceExplorer({
311
324
  onItemContextMenu?.(event, node, meta);
312
325
  };
313
326
 
327
+ const focusPath = (path: string, node: WorkspaceTreeNode | undefined) => {
328
+ if (!onSelectionChange || !selectionFollowsFocus) {
329
+ if (onSelectionChange) {
330
+ onSelectionChange(
331
+ {
332
+ ...currentSelection,
333
+ focusedPath: path,
334
+ paths: node?.type === 'folder' ? [] : currentSelection.paths,
335
+ },
336
+ { mode: 'single', node, reason: 'keyboard' },
337
+ );
338
+ }
339
+ return;
340
+ }
341
+
342
+ if (node?.type === 'folder') {
343
+ onSelectionChange(
344
+ { ...currentSelection, focusedPath: path, paths: [] },
345
+ { mode: 'single', node, reason: 'keyboard' },
346
+ );
347
+ return;
348
+ }
349
+
350
+ onSelectionChange(
351
+ {
352
+ ...updateWorkspaceSelection({
353
+ mode: 'single',
354
+ orderedPaths: visibleFilePaths,
355
+ selection: currentSelection,
356
+ targetPath: path,
357
+ }),
358
+ focusedPath: path,
359
+ },
360
+ { mode: 'single', node, reason: 'keyboard' },
361
+ );
362
+ };
363
+
314
364
  const handleItemKeyDown = (event: KeyboardEvent<HTMLButtonElement>, node: WorkspaceTreeNode) => {
365
+ if (
366
+ event.key === 'ArrowDown' ||
367
+ event.key === 'ArrowUp' ||
368
+ event.key === 'Home' ||
369
+ event.key === 'End'
370
+ ) {
371
+ const nextPath = resolveWorkspaceExplorerNavigationPath(
372
+ visibleNodes,
373
+ focusedPath ?? node.path,
374
+ event.key,
375
+ );
376
+ if (!nextPath || nextPath === (focusedPath ?? node.path)) {
377
+ return;
378
+ }
379
+ event.preventDefault();
380
+ const nextNode = visibleNodes.find((row) => row.node.path === nextPath)?.node;
381
+ focusPath(nextPath, nextNode);
382
+ return;
383
+ }
384
+
385
+ if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
386
+ const action = resolveWorkspaceExplorerHorizontalNavigationAction(
387
+ visibleNodes,
388
+ focusedPath ?? node.path,
389
+ expandedPaths,
390
+ event.key,
391
+ { filterActive: Boolean(filterQuery.trim()) },
392
+ );
393
+ if (!action) {
394
+ return;
395
+ }
396
+ event.preventDefault();
397
+ if (action.type === 'toggle') {
398
+ onToggleFolder(action.path);
399
+ return;
400
+ }
401
+ const nextNode = visibleNodes.find((row) => row.node.path === action.path)?.node;
402
+ focusPath(action.path, nextNode);
403
+ return;
404
+ }
405
+
315
406
  if (event.key !== 'Delete' && event.key !== 'F2') return;
316
407
 
317
408
  const meta = getItemActionMeta(node);
@@ -506,8 +597,10 @@ export function WorkspaceExplorer({
506
597
  return (
507
598
  <SideBarList
508
599
  fill
509
- aria-label="Workspace files"
600
+ aria-keyshortcuts="ArrowLeft ArrowRight ArrowUp ArrowDown Home End Delete F2"
601
+ aria-label={ariaLabel}
510
602
  dropTarget={dropTargetPath === ''}
603
+ role="tree"
511
604
  onContextMenu={(event) => {
512
605
  onBackgroundContextMenu?.(event);
513
606
  }}
@@ -520,7 +613,7 @@ export function WorkspaceExplorer({
520
613
  }
521
614
  }}
522
615
  >
523
- {visibleNodes.map(({ depth, node }) => {
616
+ {visibleNodes.map(({ depth, node }, index) => {
524
617
  const isFolder = node.type === 'folder';
525
618
  const expanded = expandedPaths.has(node.path) || Boolean(filterQuery.trim());
526
619
  const isFocused = focusedPath === node.path;
@@ -528,6 +621,7 @@ export function WorkspaceExplorer({
528
621
  const dropTarget = isFolder && dropTargetPath === node.path;
529
622
  const editingRename =
530
623
  inlineEdit?.kind.startsWith('rename') && inlineEdit.path === node.path;
624
+ const tabIndex = isFocused || (!focusedPath && index === 0) ? 0 : -1;
531
625
 
532
626
  return editingRename ? (
533
627
  renderInlineEdit({
@@ -553,6 +647,13 @@ export function WorkspaceExplorer({
553
647
  draggable={Boolean(onRequestMove)}
554
648
  dropTarget={dropTarget}
555
649
  selected={selected}
650
+ tabIndex={tabIndex}
651
+ wrapperProps={{
652
+ role: 'treeitem',
653
+ 'aria-level': depth + 1,
654
+ 'aria-selected': selected,
655
+ ...(isFolder ? { 'aria-expanded': expanded } : {}),
656
+ }}
556
657
  onClick={(event) => {
557
658
  if (isFolder) {
558
659
  selectFolder(event, node);
@@ -0,0 +1,109 @@
1
+ import { parentPathOf } from '@workbench-kit/workspace';
2
+
3
+ import type { WorkspaceTreeNode } from './types.js';
4
+
5
+ export type WorkspaceExplorerVisibleRow = {
6
+ readonly depth: number;
7
+ readonly node: WorkspaceTreeNode;
8
+ };
9
+
10
+ export type WorkspaceExplorerVerticalNavigationKey = 'ArrowDown' | 'ArrowUp' | 'Home' | 'End';
11
+
12
+ export type WorkspaceExplorerHorizontalNavigationKey = 'ArrowLeft' | 'ArrowRight';
13
+
14
+ export type WorkspaceExplorerHorizontalNavigationAction =
15
+ | { readonly type: 'toggle'; readonly path: string }
16
+ | { readonly type: 'focus'; readonly path: string };
17
+
18
+ function rowIndexByPath(
19
+ rows: readonly WorkspaceExplorerVisibleRow[],
20
+ path: string | undefined,
21
+ ): number {
22
+ if (!path) {
23
+ return -1;
24
+ }
25
+ return rows.findIndex((row) => row.node.path === path);
26
+ }
27
+
28
+ /**
29
+ * Resolve the next focused path for vertical tree navigation over visible
30
+ * (already collapse-filtered) explorer rows.
31
+ */
32
+ export function resolveWorkspaceExplorerNavigationPath(
33
+ rows: readonly WorkspaceExplorerVisibleRow[],
34
+ focusedPath: string | undefined,
35
+ key: WorkspaceExplorerVerticalNavigationKey,
36
+ ): string | null {
37
+ if (rows.length === 0) {
38
+ return null;
39
+ }
40
+
41
+ const currentIndex = rowIndexByPath(rows, focusedPath);
42
+ const fallbackIndex = currentIndex >= 0 ? currentIndex : 0;
43
+
44
+ if (key === 'Home') {
45
+ return rows[0]?.node.path ?? null;
46
+ }
47
+ if (key === 'End') {
48
+ return rows[rows.length - 1]?.node.path ?? null;
49
+ }
50
+ if (key === 'ArrowDown') {
51
+ return rows[Math.min(rows.length - 1, fallbackIndex + 1)]?.node.path ?? null;
52
+ }
53
+ return rows[Math.max(0, fallbackIndex - 1)]?.node.path ?? null;
54
+ }
55
+
56
+ function firstChildPath(
57
+ rows: readonly WorkspaceExplorerVisibleRow[],
58
+ parentPath: string,
59
+ ): string | null {
60
+ return rows.find((row) => parentPathOf(row.node.path) === parentPath)?.node.path ?? null;
61
+ }
62
+
63
+ /**
64
+ * Resolve expand/collapse/parent focus for ArrowLeft/ArrowRight.
65
+ * Call `onToggleFolder` only for `toggle` actions (toggle-only host API).
66
+ */
67
+ export function resolveWorkspaceExplorerHorizontalNavigationAction(
68
+ rows: readonly WorkspaceExplorerVisibleRow[],
69
+ focusedPath: string | undefined,
70
+ expandedPaths: ReadonlySet<string>,
71
+ key: WorkspaceExplorerHorizontalNavigationKey,
72
+ options: { readonly filterActive?: boolean } = {},
73
+ ): WorkspaceExplorerHorizontalNavigationAction | null {
74
+ const currentIndex = rowIndexByPath(rows, focusedPath);
75
+ const current = rows[currentIndex >= 0 ? currentIndex : 0];
76
+ if (!current) {
77
+ return null;
78
+ }
79
+
80
+ const { node } = current;
81
+ const filterActive = options.filterActive ?? false;
82
+ const isFolder = node.type === 'folder';
83
+ const expanded = isFolder && (expandedPaths.has(node.path) || filterActive);
84
+
85
+ if (key === 'ArrowRight') {
86
+ if (!isFolder) {
87
+ return null;
88
+ }
89
+ if (!expanded && !filterActive) {
90
+ return { type: 'toggle', path: node.path };
91
+ }
92
+ const childPath = firstChildPath(rows, node.path);
93
+ return childPath ? { type: 'focus', path: childPath } : null;
94
+ }
95
+
96
+ // ArrowLeft
97
+ if (isFolder && expanded && !filterActive) {
98
+ return { type: 'toggle', path: node.path };
99
+ }
100
+
101
+ const parentPath = parentPathOf(node.path);
102
+ if (!parentPath) {
103
+ return null;
104
+ }
105
+ if (rowIndexByPath(rows, parentPath) < 0) {
106
+ return null;
107
+ }
108
+ return { type: 'focus', path: parentPath };
109
+ }
@@ -68,11 +68,12 @@ export function configureWorkspaceEditorJsonDiagnostics(
68
68
  const schemas = getWorkspaceEditorJsonDiagnosticsSchemas(file);
69
69
  if (schemas.length === 0) return;
70
70
 
71
- const jsonDefaults = (
72
- monacoInstance.languages.json as unknown as {
73
- jsonDefaults?: { setDiagnosticsOptions: (options: unknown) => void };
74
- }
75
- ).jsonDefaults;
71
+ const jsonLanguage = monacoInstance.languages.json as unknown as
72
+ | {
73
+ jsonDefaults?: { setDiagnosticsOptions: (options: unknown) => void };
74
+ }
75
+ | undefined;
76
+ const jsonDefaults = jsonLanguage?.jsonDefaults;
76
77
  if (!jsonDefaults) return;
77
78
 
78
79
  jsonDefaults.setDiagnosticsOptions({
@@ -1,4 +0,0 @@
1
- /* Reserved for JDW editor surfaces that still need package-local chrome.
2
- * Screen Spec shell layout now uses WorkbenchFill / SplitView / LabeledPane /
3
- * SidebarStack — prefer those over new BEM here.
4
- */
@@ -1,2 +0,0 @@
1
- /* workbench/jdw feature styles — Plan A import hub */
2
- @import './jdw-editors.css';
@@ -1,4 +0,0 @@
1
- import remarkGfm from 'remark-gfm';
2
-
3
- /** Shared remark plugins for workbench markdown surfaces (preview, chat, etc.). */
4
- export const workbenchMarkdownRemarkPlugins = [remarkGfm];
@@ -1,4 +0,0 @@
1
- /* Workbench shell and platform chrome */
2
- @import './shell/index.css';
3
- @import './chrome/index.css';
4
- @import './command-palette/command-palette.css';