@workbench-kit/shell-react 0.0.2-prototype.0.2.41 → 0.0.2-prototype.0.2.44

package/src/field-remap/view.css

@@ -53,6 +53,50 @@
   font-size: 0.8em;
 }
 
+.workbench-field-remap-document-io {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 0.75rem;
+  margin-top: 0.25rem;
+}
+
+.workbench-field-remap-document-io__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.workbench-field-remap-document-io__availability,
+.workbench-field-remap-document-io__status {
+  color: var(--vscode-descriptionForeground, var(--color-text-muted));
+  font-size: 0.8rem;
+}
+
+.workbench-field-remap-document-io__status[data-status='error'],
+.workbench-field-remap-document-import__error {
+  color: var(--vscode-errorForeground, var(--color-danger));
+}
+
+.workbench-field-remap-document-export__description,
+.workbench-field-remap-document-import__description,
+.workbench-field-remap-document-import__error {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.45;
+}
+
+.workbench-field-remap-document-export__label,
+.workbench-field-remap-document-import__label {
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.workbench-field-remap-document-export__body textarea,
+.workbench-field-remap-document-import__body textarea {
+  min-height: 14rem;
+}
+
 .workbench-field-remap-demo__error {
   margin: 0;
   color: var(--vscode-errorForeground, var(--color-danger));
@@ -486,22 +530,6 @@
   gap: 0.35rem;
 }
 
-.workbench-field-remap-detail__draft-ports {
-  display: grid;
-  gap: 0.5rem;
-  margin: 0;
-}
-
-.workbench-field-remap-detail__draft-ports dt {
-  font-size: 0.7rem;
-  text-transform: uppercase;
-  color: var(--vscode-descriptionForeground, var(--color-text-muted));
-}
-
-.workbench-field-remap-detail__draft-ports dd {
-  margin: 0;
-}
-
 .workbench-field-remap-flow__canvas {
   height: min(40rem, 70vh);
   min-height: 26rem;
@@ -772,6 +800,11 @@
   font: inherit;
 }
 
+.workbench-field-remap-flow__binding-select.is-selected {
+  color: var(--vscode-textLink-foreground, var(--color-accent, #3794ff));
+  font-weight: 600;
+}
+
 .workbench-field-remap-detail,
 .workbench-field-remap-convert-note {
   display: flex;
@@ -797,6 +830,15 @@
   overflow: auto;
 }
 
+.workbench-field-remap-detail-modal .workbench-field-remap-detail,
+.workbench-field-remap-detail-modal .workbench-field-remap-convert-note {
+  min-height: 0;
+  max-height: none;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
 .workbench-field-remap-preview {
   display: flex;
   flex-direction: column;
@@ -850,39 +892,6 @@
   background: var(--vscode-editor-background, var(--color-bg));
 }
 
-.workbench-field-remap-convert-note__header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 0.5rem;
-}
-
-.workbench-field-remap-convert-note__eyebrow {
-  margin: 0 0 0.2rem;
-  font-size: 0.7rem;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--vscode-focusBorder, var(--color-accent, #3794ff));
-}
-
-.workbench-field-remap-convert-note__header h4,
-.workbench-field-remap-convert-note__section h5 {
-  margin: 0 0 0.35rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  color: var(--vscode-descriptionForeground, var(--color-text-muted));
-}
-
-.workbench-field-remap-convert-note__header h4 {
-  font-size: 1rem;
-  text-transform: none;
-  letter-spacing: normal;
-  color: var(--vscode-foreground, var(--color-text));
-}
-
 .workbench-field-remap-convert-note__binding,
 .workbench-field-remap-convert-note__muted {
   display: block;
@@ -898,68 +907,15 @@
   gap: 0.35rem;
 }
 
-.workbench-field-remap-convert-note__section,
-.workbench-field-remap-convert-note__field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.workbench-field-remap-convert-note__field {
-  gap: 0.2rem;
-}
-
-.workbench-field-remap-convert-note select {
-  box-sizing: border-box;
-  width: 100%;
-  margin-top: 0.2rem;
-  padding: 0.3rem 0.4rem;
-  border: 1px solid var(--vscode-panel-border, var(--color-border));
-  border-radius: 0.25rem;
-  background: var(--vscode-input-background, var(--color-bg));
-  color: var(--vscode-input-foreground, var(--color-text));
-  font: inherit;
-}
-
-.workbench-field-remap-convert-note__footer {
-  margin-top: auto;
-  padding-top: 0.5rem;
-  border-top: 1px solid var(--vscode-panel-border, var(--color-border));
-}
-
 .workbench-field-remap-detail--empty {
   color: var(--vscode-descriptionForeground, var(--color-text-muted));
 }
 
-.workbench-field-remap-detail__header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 0.5rem;
-}
-
-.workbench-field-remap-detail__header h4,
-.workbench-field-remap-detail__section h5 {
-  margin: 0 0 0.35rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  color: var(--vscode-descriptionForeground, var(--color-text-muted));
-}
-
-.workbench-field-remap-detail__header code,
 .workbench-field-remap-detail__steps code {
   font-size: 0.75rem;
   word-break: break-all;
 }
 
-.workbench-field-remap-detail__section {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
 .workbench-field-remap-detail__muted {
   margin: 0;
   color: var(--vscode-descriptionForeground, var(--color-text-muted));
@@ -1006,31 +962,12 @@
   color: var(--vscode-descriptionForeground, var(--color-text-muted));
 }
 
-.workbench-field-remap-detail__palette,
-.workbench-field-remap-detail__item-pickers,
-.workbench-field-remap-detail__field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-}
-
 .workbench-field-remap-detail__palette {
-  flex-direction: row;
   flex-wrap: wrap;
-  align-items: flex-end;
-}
-
-.workbench-field-remap-detail__palette label,
-.workbench-field-remap-detail__item-pickers label,
-.workbench-field-remap-detail__field {
-  flex: 1 1 10rem;
-  min-width: 0;
 }
 
-.workbench-field-remap-detail select,
-.workbench-field-remap-options input[type='text'],
-.workbench-field-remap-options input[type='number'],
-.workbench-field-remap-options textarea {
+.workbench-field-remap-options__string-map input[type='text'],
+.workbench-field-remap-options__json textarea {
   box-sizing: border-box;
   width: 100%;
   margin-top: 0.2rem;
@@ -1042,13 +979,6 @@
   font: inherit;
 }
 
-.workbench-field-remap-detail__list-context-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-}
-
 .workbench-field-remap-detail__item-edges {
   list-style: none;
   margin: 0;
@@ -1065,23 +995,6 @@
   gap: 0.35rem;
 }
 
-.workbench-field-remap-options {
-  display: flex;
-  flex-direction: column;
-  gap: 0.55rem;
-}
-
-.workbench-field-remap-options__field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.2rem;
-}
-
-.workbench-field-remap-options__label {
-  font-size: 0.75rem;
-  color: var(--vscode-descriptionForeground, var(--color-text-muted));
-}
-
 .workbench-field-remap-options__empty,
 .workbench-field-remap-options__error {
   margin: 0;
@@ -1418,18 +1331,15 @@
 }
 
 .workbench-field-remap-io-browse {
+  --ui-sidebar-inline-padding: var(--shell-spacing-side-bar-inline);
+  --ui-sidebar-row-block-padding: var(--shell-spacing-side-bar-block);
+  --ui-sidebar-tree-indent-step: 10px;
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
+  gap: var(--shell-spacing-block);
   width: 100%;
 }
 
-@media (max-width: 800px) {
-  .workbench-field-remap-io-browse {
-    grid-template-columns: 1fr;
-  }
-}
-
 .workbench-field-remap-io-browse__toggle {
   display: inline-flex;
   align-items: center;
@@ -1442,31 +1352,36 @@
 .workbench-field-remap-io-browse__section {
   display: flex;
   flex-direction: column;
-  gap: 0.65rem;
+  gap: var(--shell-spacing-block);
   min-width: 0;
 }
 
 .workbench-field-remap-io-browse__section-title {
   margin: 0;
-  font-size: 0.85rem;
+  padding: 0 var(--ui-sidebar-inline-padding);
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
   font-weight: 600;
 }
 
+.workbench-field-remap-io-browse__ports,
+.workbench-field-remap-io-browse__fields {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
 .workbench-field-remap-io-browse__port {
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-  padding: 0.5rem 0.65rem;
-  border: 1px solid var(--vscode-widget-border, var(--color-border, #3c3c3c));
-  border-radius: 4px;
+  border-block-start: 1px solid var(--color-border);
 }
 
 .workbench-field-remap-io-browse__port-title {
-  display: flex;
   flex-wrap: wrap;
-  gap: 0.35rem 0.75rem;
-  margin: 0;
-  align-items: baseline;
+  min-height: 26px;
+  gap: 5px;
+  padding: var(--ui-sidebar-row-block-padding) var(--ui-sidebar-inline-padding);
+  color: var(--color-text);
+  font-size: var(--font-size-sm);
 }
 
 .workbench-field-remap-io-browse__port-id {
@@ -1474,49 +1389,52 @@
 }
 
 .workbench-field-remap-io-browse__port-meta {
-  font-size: 0.75rem;
-  opacity: 0.75;
-}
-
-.workbench-field-remap-io-browse__fields {
-  margin: 0;
-  padding-left: 1rem;
-  list-style: disc;
+  margin-inline-start: auto;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-xs);
 }
 
 .workbench-field-remap-io-browse__fields .workbench-field-remap-io-browse__fields {
-  margin-top: 0.25rem;
+  padding-inline-start: var(--ui-sidebar-tree-indent-step);
 }
 
 .workbench-field-remap-io-browse__row {
-  display: flex;
   flex-wrap: wrap;
-  gap: 0.35rem 0.75rem;
-  align-items: baseline;
+  min-height: 26px;
+  gap: 5px;
+  padding: var(--ui-sidebar-row-block-padding) var(--ui-sidebar-inline-padding);
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+}
+
+.workbench-field-remap-io-browse__port-title:hover,
+.workbench-field-remap-io-browse__row:hover {
+  background: transparent;
 }
 
 .workbench-field-remap-io-browse__path {
-  font-size: 0.8rem;
+  color: var(--color-text);
+  font-size: inherit;
   word-break: break-all;
 }
 
 .workbench-field-remap-io-browse__meta {
   display: inline-flex;
   flex-wrap: wrap;
-  gap: 0.35rem;
-  font-size: 0.75rem;
-  opacity: 0.8;
+  align-items: center;
+  gap: 5px;
+  margin-inline-start: auto;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-xs);
 }
 
 .workbench-field-remap-io-browse__badge {
-  padding: 0.05rem 0.35rem;
-  border-radius: 3px;
-  background: var(--vscode-badge-background, rgba(127, 127, 127, 0.25));
-  color: var(--vscode-badge-foreground, inherit);
+  flex: none;
 }
 
 .workbench-field-remap-io-browse__empty {
   margin: 0;
-  font-size: 0.8rem;
-  opacity: 0.7;
+  padding: var(--ui-sidebar-row-block-padding) var(--ui-sidebar-inline-padding);
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
 }

package/src/index.ts

@@ -114,6 +114,8 @@ export {
 } from './field-remap/panel.js';
 export {
   FieldRemapFlowMapper,
+  type FieldRemapConnectionFeedback,
+  type FieldRemapConnectionFeedbackReason,
   type FieldRemapFlowActions,
   type FieldRemapFlowMapperProps,
 } from './field-remap/flow.js';
@@ -230,6 +232,11 @@ export {
   resolveShellCommandActivities,
 } from './workbench/command-palette.js';
 export { WorkbenchCommandHost, type WorkbenchCommandHostProps } from './workbench/command-host.js';
+export {
+  WorkbenchCommandHostController,
+  type WorkbenchCommandHostControllerProps,
+  type WorkbenchCommandHostExecutor,
+} from './workbench/command-host-controller.js';
 export { WorkbenchStartupGate, type WorkbenchStartupGateProps } from './workbench/startup-gate.js';
 export {
   normalizeKeybindingKeyFromEvent,

package/src/keybinding-management-settings.ts

@@ -0,0 +1,4 @@
+export {
+  WorkbenchKeybindingManagementSettingsView,
+  type WorkbenchKeybindingManagementSettingsViewProps,
+} from './management/keybinding-settings-view.js';

package/src/management/keybinding-overrides-storage.ts

@@ -1,22 +1,21 @@
-import {
-  parseWorkbenchKeybindingsConfig,
-  type WorkbenchKeybindingDefinition,
-} from '@workbench-kit/workbench-config';
+import { type WorkbenchKeybindingDefinition } from '@workbench-kit/workbench-config';
 import {
   type WorkbenchPersistenceDiagnosticOptions,
-  type WorkbenchPersistenceReadResult,
   type WorkbenchPersistenceWriteResult,
   type WorkbenchStorageReader,
   type WorkbenchStorageWriter,
 } from '@workbench-kit/workbench-core';
-
 import {
-  readLocalJsonStorage,
-  readLocalJsonStorageResult,
-  resolveLocalWorkbenchStorage,
-  writeLocalJsonStorage,
-  writeLocalJsonStorageResult,
-} from '../storage/local-json-storage.js';
+  readWorkbenchKeybindingOverridesStorageResult,
+  writeWorkbenchKeybindingOverridesStorageResult,
+  type WorkbenchKeybindingOverridesStorageReadResult,
+} from '@workbench-kit/workbench-core/keybinding-overrides-storage';
+import {
+  resolveWorkbenchShortcutPlatform,
+  type WorkbenchShortcutPlatform,
+} from '@workbench-kit/platform';
+
+import { resolveLocalWorkbenchStorage } from '../storage/local-json-storage.js';
 
 export const DEFAULT_WORKBENCH_KEYBINDING_STORAGE_KEY = 'workbench-kit/.workbench/keybindings';
 
@@ -27,22 +26,35 @@ export function isWorkbenchKeybindingPersistenceAvailable(): boolean {
 export function readPersistedKeybindingOverrides(
   storageKey = DEFAULT_WORKBENCH_KEYBINDING_STORAGE_KEY,
   storage?: WorkbenchStorageReader,
+  options: ReadPersistedKeybindingOverridesOptions = {},
 ): readonly WorkbenchKeybindingDefinition[] {
-  return readLocalJsonStorage(storageKey, parseWorkbenchKeybindingsConfig, () => [], storage);
+  return readPersistedKeybindingOverridesResult(storageKey, storage, options).value;
+}
+
+export interface ReadPersistedKeybindingOverridesOptions extends WorkbenchPersistenceDiagnosticOptions {
+  readonly platform?: WorkbenchShortcutPlatform | undefined;
+}
+
+export interface PersistedKeybindingOverridesReadResult extends WorkbenchKeybindingOverridesStorageReadResult {
+  readonly value: readonly WorkbenchKeybindingDefinition[];
 }
 
 export function readPersistedKeybindingOverridesResult(
   storageKey = DEFAULT_WORKBENCH_KEYBINDING_STORAGE_KEY,
   storage?: WorkbenchStorageReader,
-  options: WorkbenchPersistenceDiagnosticOptions = {},
-): WorkbenchPersistenceReadResult<readonly WorkbenchKeybindingDefinition[]> {
-  return readLocalJsonStorageResult(
-    storageKey,
-    parseWorkbenchKeybindingsConfig,
-    () => [],
-    storage,
+  options: ReadPersistedKeybindingOverridesOptions = {},
+): PersistedKeybindingOverridesReadResult {
+  const result = readWorkbenchKeybindingOverridesStorageResult({
     options,
-  );
+    platform: options.platform ?? resolveWorkbenchShortcutPlatform(),
+    storage: resolveLocalWorkbenchStorage(storage),
+    storageKey,
+  });
+
+  return {
+    ...result,
+    value: result.entries,
+  };
 }
 
 export function writePersistedKeybindingOverrides(
@@ -50,7 +62,15 @@ export function writePersistedKeybindingOverrides(
   storageKey = DEFAULT_WORKBENCH_KEYBINDING_STORAGE_KEY,
   storage?: WorkbenchStorageWriter,
 ): void {
-  writeLocalJsonStorage(storageKey, overrides, storage, { errorMode: 'throw' });
+  const resolvedStorage = resolveLocalWorkbenchStorage(storage);
+  if (!resolvedStorage) {
+    return;
+  }
+
+  const result = writePersistedKeybindingOverridesResult(overrides, storageKey, resolvedStorage);
+  if (!result.committed) {
+    throw new Error(result.diagnostic.message);
+  }
 }
 
 export function writePersistedKeybindingOverridesResult(
@@ -59,5 +79,10 @@ export function writePersistedKeybindingOverridesResult(
   storage?: WorkbenchStorageWriter,
   options: WorkbenchPersistenceDiagnosticOptions = {},
 ): WorkbenchPersistenceWriteResult {
-  return writeLocalJsonStorageResult(storageKey, overrides, storage, options);
+  return writeWorkbenchKeybindingOverridesStorageResult({
+    entries: overrides,
+    options,
+    storage: resolveLocalWorkbenchStorage(storage),
+    storageKey,
+  });
 }

package/src/management/keybinding-settings-view.tsx

@@ -0,0 +1,31 @@
+import type { KeybindingManagementEntry, WorkbenchShortcutPlatform } from '@workbench-kit/platform';
+import { KeybindingManagementPanel } from '@workbench-kit/react/workbench/management';
+
+export interface WorkbenchKeybindingManagementSettingsViewProps {
+  readonly editingDisabledReason?: string | undefined;
+  readonly entries: readonly KeybindingManagementEntry[];
+  readonly overrideCount: number;
+  readonly platform: WorkbenchShortcutPlatform;
+  readonly resetKeybinding: (commandId: string) => void;
+  readonly setKeybinding: (commandId: string, key: string | undefined) => void;
+}
+
+export function WorkbenchKeybindingManagementSettingsView({
+  editingDisabledReason,
+  entries,
+  overrideCount,
+  platform,
+  resetKeybinding,
+  setKeybinding,
+}: WorkbenchKeybindingManagementSettingsViewProps) {
+  return (
+    <KeybindingManagementPanel
+      editingDisabledReason={editingDisabledReason}
+      entries={entries}
+      platform={platform}
+      summaryLabel={`${entries.length} command${entries.length === 1 ? '' : 's'} · ${overrideCount} user override${overrideCount === 1 ? '' : 's'}`}
+      onResetKeybinding={resetKeybinding}
+      onSetKeybinding={setKeybinding}
+    />
+  );
+}

package/src/management/keybinding-settings.tsx

@@ -1,16 +1,8 @@
-import { KeybindingManagementPanel } from '@workbench-kit/react/workbench/management';
-
-import { useKeybindingManagementModel } from './use-keybinding-management.js';
+import { useWorkbenchKeybindingManagementBinding } from '../shell/provider.js';
+import { WorkbenchKeybindingManagementSettingsView } from './keybinding-settings-view.js';
 
 export function WorkbenchKeybindingManagementSettings() {
-  const { entries, overrideCount, resetKeybinding, setKeybinding } = useKeybindingManagementModel();
+  const binding = useWorkbenchKeybindingManagementBinding();
 
-  return (
-    <KeybindingManagementPanel
-      entries={entries}
-      summaryLabel={`${entries.length} command${entries.length === 1 ? '' : 's'} · ${overrideCount} user override${overrideCount === 1 ? '' : 's'}`}
-      onResetKeybinding={resetKeybinding}
-      onSetKeybinding={setKeybinding}
-    />
-  );
+  return <WorkbenchKeybindingManagementSettingsView {...binding} />;
 }