@workbench-kit/react 0.0.2-prototype.0.1.2 → 0.0.2-prototype.0.2.10

package/src/workbench/shell/sidebarViewPlacementDnd.ts

@@ -0,0 +1,61 @@
+/** Shared drag payload for moving a view container between sidebar slots (activity bar or action bar). */
+export const WORKBENCH_SIDEBAR_VIEW_PLACEMENT_DRAG_DATA_TYPE =
+  'application/x-workbench-activity-bar-item';
+
+const WORKBENCH_SIDEBAR_VIEW_PLACEMENT_TEXT_PREFIX = 'workbench-sidebar-view:';
+
+let activeSidebarViewPlacementDragViewId: string | null = null;
+
+const dragSessionEndListeners = new Set<() => void>();
+
+function notifyWorkbenchSidebarViewPlacementDragSessionEnd(): void {
+  for (const listener of dragSessionEndListeners) {
+    listener();
+  }
+}
+
+export function subscribeWorkbenchSidebarViewPlacementDragSessionEnd(
+  listener: () => void,
+): () => void {
+  dragSessionEndListeners.add(listener);
+  return () => {
+    dragSessionEndListeners.delete(listener);
+  };
+}
+
+export function resetWorkbenchSidebarViewPlacementDragSession(): void {
+  activeSidebarViewPlacementDragViewId = null;
+  notifyWorkbenchSidebarViewPlacementDragSessionEnd();
+}
+
+export function hasWorkbenchSidebarViewPlacementDrag(dataTransfer: DataTransfer): boolean {
+  if (activeSidebarViewPlacementDragViewId !== null) {
+    return true;
+  }
+
+  return [...dataTransfer.types].includes(WORKBENCH_SIDEBAR_VIEW_PLACEMENT_DRAG_DATA_TYPE);
+}
+
+export function writeWorkbenchSidebarViewPlacementDrag(
+  dataTransfer: DataTransfer,
+  viewId: string,
+): void {
+  activeSidebarViewPlacementDragViewId = viewId;
+  dataTransfer.effectAllowed = 'move';
+  dataTransfer.setData(WORKBENCH_SIDEBAR_VIEW_PLACEMENT_DRAG_DATA_TYPE, viewId);
+  dataTransfer.setData('text/plain', `${WORKBENCH_SIDEBAR_VIEW_PLACEMENT_TEXT_PREFIX}${viewId}`);
+}
+
+export function readWorkbenchSidebarViewPlacementDrag(dataTransfer: DataTransfer): string {
+  const payload = dataTransfer.getData(WORKBENCH_SIDEBAR_VIEW_PLACEMENT_DRAG_DATA_TYPE);
+  if (payload.length > 0) {
+    return payload;
+  }
+
+  const plainTextPayload = dataTransfer.getData('text/plain');
+  if (plainTextPayload.startsWith(WORKBENCH_SIDEBAR_VIEW_PLACEMENT_TEXT_PREFIX)) {
+    return plainTextPayload.slice(WORKBENCH_SIDEBAR_VIEW_PLACEMENT_TEXT_PREFIX.length);
+  }
+
+  return activeSidebarViewPlacementDragViewId ?? '';
+}

package/src/workbench/shell/split-view.css

@@ -0,0 +1,188 @@
+.ui-workbench-split-view {
+  display: grid;
+  grid-template-columns: var(--ui-workbench-split-primary-size, 40%) 1px minmax(0, 1fr);
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* Secondary track is fixed in px; primary absorbs the remainder from first paint. */
+.ui-workbench-split-view[data-layout-mode='secondary-fixed'] {
+  grid-template-columns:
+    minmax(var(--ui-workbench-split-min-primary-size, 200px), 1fr)
+    1px
+    var(--ui-workbench-split-secondary-size, 260px);
+}
+
+.ui-workbench-split-view[data-layout-mode='secondary-fixed'][data-orientation='vertical'] {
+  grid-template-columns: none;
+  grid-template-rows:
+    minmax(var(--ui-workbench-split-min-primary-size, 200px), 1fr)
+    1px
+    var(--ui-workbench-split-secondary-size, 260px);
+}
+
+.ui-workbench-split-view--primary-collapsed {
+  grid-template-columns: minmax(0, 1fr) !important;
+}
+
+.ui-workbench-split-view--primary-collapsed > .ui-workbench-split-view__primary {
+  display: none;
+  pointer-events: none;
+}
+
+.ui-workbench-split-view--primary-collapsed > .ui-workbench-split-view__separator {
+  display: none;
+  pointer-events: none;
+}
+
+.ui-workbench-split-view--primary-collapsed > .ui-workbench-split-view__secondary {
+  grid-column: 1;
+  grid-row: 1;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.ui-workbench-split-view--primary-collapsed[data-orientation='vertical'] {
+  grid-template-columns: none !important;
+  grid-template-rows: minmax(0, 1fr) !important;
+}
+
+.ui-workbench-split-view--secondary-collapsed {
+  grid-template-columns: minmax(0, 1fr) !important;
+}
+
+.ui-workbench-split-view--secondary-collapsed > .ui-workbench-split-view__secondary {
+  display: none;
+  pointer-events: none;
+}
+
+.ui-workbench-split-view--secondary-collapsed > .ui-workbench-split-view__separator {
+  display: none;
+  pointer-events: none;
+}
+
+.ui-workbench-split-view--secondary-collapsed > .ui-workbench-split-view__primary {
+  grid-column: 1;
+  grid-row: 1;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.ui-workbench-split-view--secondary-collapsed[data-orientation='vertical'] {
+  grid-template-columns: none !important;
+  grid-template-rows: minmax(0, 1fr) !important;
+}
+
+.ui-workbench-split-view--secondary-collapsed[data-orientation='vertical']
+  > .ui-workbench-split-view__primary {
+  min-height: 0;
+  height: 100%;
+}
+
+.ui-workbench-split-view[data-orientation='vertical'] {
+  grid-template-columns: none;
+  grid-template-rows: var(--ui-workbench-split-primary-size, 40%) 1px 1fr;
+}
+
+.ui-workbench-split-view__primary,
+.ui-workbench-split-view__secondary {
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.ui-workbench-split-view__primary > *:last-child,
+.ui-workbench-split-view__secondary > *:last-child {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+.ui-workbench-split-view.is-dragging .ui-workbench-split-view__primary,
+.ui-workbench-split-view.is-dragging .ui-workbench-split-view__secondary {
+  pointer-events: none;
+  user-select: none;
+}
+
+html.ui-workbench-split-view-resizing,
+html.ui-workbench-split-view-resizing * {
+  cursor: col-resize !important;
+  user-select: none !important;
+}
+
+/* Preview canvases ease transform for zoom; freeze that while a split is dragged
+ * so fitScale updates do not read as a brief close-up flash. */
+html.ui-workbench-split-view-resizing .ui-workbench-preview-canvas__stage,
+html.ui-workbench-split-view-resizing--vertical .ui-workbench-preview-canvas__stage {
+  transition: none !important;
+}
+
+html.ui-workbench-split-view-resizing--vertical,
+html.ui-workbench-split-view-resizing--vertical * {
+  cursor: row-resize !important;
+}
+
+.ui-workbench-split-view__separator {
+  cursor: col-resize;
+  background: var(--color-border);
+  position: relative;
+  transition: background 0.15s;
+  touch-action: none;
+  user-select: none;
+}
+
+.ui-workbench-split-view[data-orientation='vertical'] .ui-workbench-split-view__separator {
+  cursor: row-resize;
+}
+
+.ui-workbench-split-view__separator::after {
+  content: '';
+  position: absolute;
+  inset: 0 -8px;
+}
+
+.ui-workbench-split-view[data-orientation='vertical'] .ui-workbench-split-view__separator::after {
+  inset: -8px 0;
+}
+
+.ui-workbench-split-view__separator:hover,
+.ui-workbench-split-view__separator.is-dragging {
+  background: var(--color-text-subtle);
+}
+
+.ui-workbench-split-view__separator:focus-visible {
+  outline: 1px solid var(--color-accent);
+  outline-offset: -1px;
+}
+
+.ui-workbench-split-view__handle {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 3px;
+  height: 24px;
+  border-radius: 2px;
+  background: var(--color-text-muted);
+  opacity: 0;
+  transition: opacity 0.15s;
+  pointer-events: none;
+}
+
+.ui-workbench-split-view[data-orientation='vertical'] .ui-workbench-split-view__handle {
+  width: 24px;
+  height: 3px;
+}
+
+.ui-workbench-split-view__separator:hover .ui-workbench-split-view__handle,
+.ui-workbench-split-view__separator.is-dragging .ui-workbench-split-view__handle {
+  opacity: 1;
+}

package/src/workbench/{standalone.ts → shell/standalone.ts}

@@ -6,8 +6,8 @@ import type {
 } from '@workbench-kit/contracts';
 import type { ReactNode } from 'react';
 import type { StatusBarSectionModel } from './StatusBar';
-import type { WorkbenchShellCommandContext } from './commands';
-import type { WorkspaceFile } from './workspace';
+import type { WorkbenchShellCommandContext } from '../commands/commands';
+import type { WorkspaceFile } from '../workspace';
 
 export type WorkbenchTheme = 'light' | 'dark' | (string & {});
 
@@ -72,9 +72,9 @@ export interface WorkbenchShellContract<TActivityId extends string = string> {
 export interface WorkbenchStandaloneEntryState<TActivityId extends string = string> {
   activeActivityId: TActivityId;
   isPrimarySidebarVisible: boolean;
-  primarySidebarSizePercent: number;
-  primarySidebarMinPercent?: number;
-  primarySidebarMaxPercent?: number;
+  primarySidebarSizePx: number;
+  primarySidebarMinPx?: number;
+  primarySidebarMaxPx?: number;
   theme: WorkbenchTheme;
   isSettingsOpen?: boolean;
   settingsCategoryId?: string;
@@ -86,12 +86,12 @@ export interface WorkbenchStandaloneEntryState<TActivityId extends string = stri
 
 export interface WorkbenchStandaloneBootstrap<TActivityId extends string = string> {
   contract: WorkbenchShellContract<TActivityId>;
-  initialFiles: readonly WorkspaceFile[];
-  workspace: WorkbenchWorkspaceController;
-  chat: WorkbenchChatController;
-  patch: WorkbenchPatchController;
-  save: WorkbenchSaveController;
-  status: WorkbenchStatusController;
+  initialFiles?: readonly WorkspaceFile[];
+  workspace?: WorkbenchWorkspaceController;
+  chat?: WorkbenchChatController;
+  patch?: WorkbenchPatchController;
+  save?: WorkbenchSaveController;
+  status?: WorkbenchStatusController;
   initialState?: Partial<WorkbenchStandaloneEntryState<TActivityId>>;
 }
 

package/src/workbench/shell/status-bar.css

@@ -0,0 +1,141 @@
+.ui-workbench-status-bar {
+  flex-shrink: 0;
+  min-height: var(--workbench-statusbar-height);
+  display: flex;
+  align-items: stretch;
+  gap: 8px;
+  padding: 0 8px;
+  color: var(--color-statusbar-text, var(--color-text));
+  background: var(--color-statusbar-bg, var(--color-surface));
+  border-top: 1px solid var(--color-statusbar-border, var(--color-border));
+  font-size: 12px;
+  user-select: none;
+}
+
+.ui-workbench-status-bar--compact {
+  min-height: var(--workbench-statusbar-height-compact, var(--workbench-statusbar-height));
+}
+
+.ui-workbench-status-bar__section {
+  min-width: 0;
+  display: inline-flex;
+  align-items: stretch;
+}
+
+.ui-workbench-status-bar__section--end {
+  margin-left: auto;
+}
+
+.ui-workbench-status-bar__item {
+  --ui-button-min-width: 0;
+  --ui-button-min-height: inherit;
+  --ui-button-height: auto;
+  --ui-button-display: inline-flex;
+  --ui-button-align-items: center;
+  --ui-button-gap: 5px;
+  --ui-button-padding: 0 8px;
+  --ui-button-border: 0;
+  --ui-button-border-radius: 0;
+  --ui-button-color: var(--color-text-muted);
+  --ui-button-background: transparent;
+  --ui-button-font-family: inherit;
+  --ui-button-font-size: inherit;
+  --ui-button-font-weight: 400;
+  --ui-button-hover-color: var(--color-text);
+  --ui-button-hover-background: var(--color-surface-hover);
+  --ui-button-disabled-color: var(--color-text-subtle);
+  --ui-button-disabled-background: transparent;
+  min-width: 0;
+  min-height: inherit;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 0;
+  color: var(--color-text-muted);
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  cursor: pointer;
+}
+
+.ui-workbench-status-bar__item:hover,
+.ui-workbench-status-bar__item:focus-visible,
+.ui-workbench-status-bar__item--active {
+  --ui-button-color: var(--color-text);
+  --ui-button-background: var(--color-surface-hover);
+  color: var(--color-text);
+  background: var(--color-surface-hover);
+}
+
+.ui-workbench-status-bar__item:focus-visible {
+  outline: 1px solid var(--color-accent);
+  outline-offset: -1px;
+}
+
+.ui-workbench-status-bar__item:disabled {
+  color: var(--color-text-subtle);
+  background: transparent;
+  cursor: default;
+}
+
+.ui-workbench-status-bar__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ui-workbench-status-bar__icon .codicon {
+  font-size: 13px;
+}
+
+.ui-workbench-status-bar__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-workbench-status-bar__status {
+  width: 12px;
+  min-width: 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ui-workbench-status-bar__status-dot {
+  width: 6px;
+  height: 6px;
+  display: inline-block;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--color-text-subtle) 45%, transparent);
+}
+
+.ui-workbench-status-bar__item[data-status='running'] .ui-workbench-status-bar__status-dot {
+  background: var(--color-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
+}
+
+.ui-workbench-status-bar__item[data-status='completed'] .ui-workbench-status-bar__status-dot {
+  background: #5fbf72;
+}
+
+.ui-workbench-status-bar__item[data-status='failed'] .ui-workbench-status-bar__status-dot {
+  background: var(--color-danger);
+}
+
+.ui-workbench-status-bar__item[data-status='warning'] .ui-workbench-status-bar__status-dot {
+  background: var(--color-warning);
+}
+
+.ui-workbench-status-bar__item[data-status='waiting'] .ui-workbench-status-bar__status-dot {
+  background: #d6aa37;
+}
+
+.ui-workbench-status-bar__item[data-status='cancelled'] .ui-workbench-status-bar__status-dot,
+.ui-workbench-status-bar__item[data-status='disabled'] .ui-workbench-status-bar__status-dot,
+.ui-workbench-status-bar__item[data-status='unavailable'] .ui-workbench-status-bar__status-dot {
+  background: color-mix(in srgb, var(--color-text-subtle) 36%, transparent);
+}

package/src/workbench/{status.ts → shell/status.ts}

@@ -3,18 +3,14 @@ export type WorkbenchStatus =
   | 'running'
   | 'completed'
   | 'failed'
+  | 'warning'
   | 'waiting'
   | 'cancelled'
   | 'disabled'
   | 'unavailable';
 
 export type WorkbenchStatusVariant =
-  | 'accent'
-  | 'danger'
-  | 'muted'
-  | 'neutral'
-  | 'success'
-  | 'warning';
+  'accent' | 'danger' | 'muted' | 'neutral' | 'success' | 'warning';
 
 export interface WorkbenchStatusDescriptor {
   busy: boolean;
@@ -58,6 +54,14 @@ const workbenchStatusDescriptors: Record<WorkbenchStatus, WorkbenchStatusDescrip
     unavailable: false,
     variant: 'danger',
   },
+  warning: {
+    busy: false,
+    disabled: false,
+    label: 'Warning',
+    status: 'warning',
+    unavailable: false,
+    variant: 'warning',
+  },
   idle: {
     busy: false,
     disabled: false,

package/src/workbench/shell/useDeferredWorkbenchMount.ts

@@ -0,0 +1,71 @@
+import { startTransition, useEffect, useRef, useState } from 'react';
+
+export interface UseDeferredWorkbenchMountOptions {
+  readonly delayMs?: number;
+  readonly disabled?: boolean;
+  readonly initialReady?: boolean;
+}
+
+export function useDeferredWorkbenchMount({
+  delayMs = 50,
+  disabled = false,
+  initialReady = false,
+}: UseDeferredWorkbenchMountOptions = {}): boolean {
+  const [isReady, setIsReady] = useState(() => disabled || initialReady);
+  const loadGenerationRef = useRef(0);
+
+  useEffect(() => {
+    if (disabled) {
+      loadGenerationRef.current += 1;
+      setIsReady(true);
+      return undefined;
+    }
+
+    if (isReady) {
+      return undefined;
+    }
+
+    const loadGeneration = ++loadGenerationRef.current;
+    let cancelFrame: (() => void) | undefined;
+    let timeoutHandle: ReturnType<typeof setTimeout> | undefined;
+
+    const deferReady = () => {
+      if (loadGenerationRef.current !== loadGeneration) {
+        return;
+      }
+
+      timeoutHandle = setTimeout(
+        () => {
+          if (loadGenerationRef.current !== loadGeneration) {
+            return;
+          }
+
+          startTransition(() => {
+            if (loadGenerationRef.current === loadGeneration) {
+              setIsReady(true);
+            }
+          });
+        },
+        Math.max(0, delayMs),
+      );
+    };
+
+    if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
+      const animationFrame = window.requestAnimationFrame(deferReady);
+      cancelFrame = () => window.cancelAnimationFrame(animationFrame);
+    } else {
+      const frameTimer = setTimeout(deferReady, 0);
+      cancelFrame = () => clearTimeout(frameTimer);
+    }
+
+    return () => {
+      loadGenerationRef.current += 1;
+      cancelFrame?.();
+      if (timeoutHandle !== undefined) {
+        clearTimeout(timeoutHandle);
+      }
+    };
+  }, [delayMs, disabled, isReady]);
+
+  return isReady;
+}

package/src/workbench/shell/useWorkbenchAppearanceDocumentSync.tsx

@@ -0,0 +1,17 @@
+import { useLayoutEffect } from 'react';
+
+import { applyWorkbenchAppearance, type WorkbenchAppearanceSettings } from '../theme/themePresets';
+
+/**
+ * Keeps `document.documentElement` theme attributes aligned with appearance settings.
+ * Use with host-owned settings state (e.g. settings store) for runtime theme changes.
+ */
+export function useWorkbenchAppearanceDocumentSync(settings: WorkbenchAppearanceSettings): void {
+  useLayoutEffect(() => {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    applyWorkbenchAppearance(document.documentElement, settings);
+  }, [settings.darkPreset, settings.lightPreset, settings.shellPreset, settings.themePreference]);
+}