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

package/src/workbench/workspace/workspace-editor.css

@@ -0,0 +1,235 @@
+.workspace-panel__body {
+  overflow: hidden;
+  scrollbar-gutter: auto;
+}
+
+.workspace-editor {
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.workspace-editor > .widget-tree-workbench {
+  flex: 1;
+  min-height: 0;
+}
+
+.workspace-editor__tabbar {
+  height: var(--workbench-header-height);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.workspace-editor__tabs {
+  height: 100%;
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.workspace-editor__tab {
+  position: relative;
+  width: 180px;
+  min-width: 120px;
+  max-width: 240px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  color: var(--vscode-tab-inactiveForeground, var(--color-text-muted));
+  background: var(--vscode-tab-inactiveBackground, var(--color-surface));
+  border-right: 1px solid
+    color-mix(in srgb, var(--vscode-tab-border, var(--color-border)) 88%, transparent);
+  font-size: var(--font-size-sm);
+  transition:
+    background 120ms ease,
+    color 120ms ease;
+}
+
+.workspace-editor__tab::before {
+  position: absolute;
+  inset: 0 0 auto;
+  height: 2px;
+  content: '';
+  background: transparent;
+  transition: background 120ms ease;
+}
+
+.workspace-editor__tab:hover {
+  color: var(--vscode-tab-hoverForeground, var(--vscode-tab-activeForeground, var(--color-text)));
+  background: var(--vscode-tab-hoverBackground, var(--color-surface-hover));
+}
+
+.workspace-editor__tab--active,
+.workspace-editor__tab--active:hover {
+  color: var(--vscode-tab-activeForeground, var(--color-text));
+  background: var(--vscode-tab-activeBackground, var(--panel-bg, var(--color-bg)));
+  margin-bottom: -1px;
+  border-bottom: 1px solid var(--vscode-editor-background, var(--panel-bg, var(--color-bg)));
+  font-weight: 500;
+  z-index: 1;
+}
+
+.workspace-editor__tab--active::before {
+  background: var(
+    --vscode-tab-activeBorderTop,
+    var(--vscode-focusBorder, var(--color-focus-border, var(--color-accent)))
+  );
+  box-shadow: 0 0 10px
+    color-mix(in srgb, var(--vscode-tab-activeBorderTop, var(--color-accent)) 28%, transparent);
+}
+
+.workspace-editor__tab-button {
+  --ui-button-height: 100%;
+  --ui-button-min-height: 0;
+  --ui-button-min-width: 0;
+  --ui-button-flex: 1;
+  --ui-button-display: flex;
+  --ui-button-align-items: center;
+  --ui-button-justify-content: flex-start;
+  --ui-button-gap: 8px;
+  --ui-button-padding: 0 6px 0 12px;
+  --ui-button-border: 0;
+  --ui-button-border-radius: 0;
+  --ui-button-color: inherit;
+  --ui-button-background: transparent;
+  --ui-button-font-family: inherit;
+  --ui-button-font-size: inherit;
+  --ui-button-font-weight: 400;
+  --ui-button-text-align: left;
+  --ui-button-hover-color: inherit;
+  --ui-button-hover-background: transparent;
+  height: 100%;
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 6px 0 12px;
+  border: 0;
+  color: inherit;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.workspace-editor__tab-close.ui-icon-button {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  margin-right: 4px;
+  opacity: 0;
+}
+
+.workspace-editor__tab:hover .workspace-editor__tab-close,
+.workspace-editor__tab:focus-within .workspace-editor__tab-close,
+.workspace-editor__tab--active .workspace-editor__tab-close {
+  opacity: 1;
+}
+
+.workspace-editor__tab-close.ui-icon-button .codicon {
+  font-size: 14px;
+}
+
+.workspace-editor__path {
+  min-width: 0;
+  overflow: hidden;
+  color: inherit;
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.workspace-editor__dirty {
+  width: 7px;
+  height: 7px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  background: var(--color-text-muted);
+}
+
+.workspace-editor__tab-actions {
+  margin-left: auto;
+  padding: 0 8px;
+}
+
+.workspace-editor__tab-actions:empty {
+  display: none;
+}
+
+.workspace-editor__file-bar {
+  min-height: 28px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 0 12px;
+  color: var(--color-text-muted);
+  background: var(--panel-bg, var(--color-bg));
+  font-size: 12px;
+}
+
+.workspace-editor__file-path {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.workspace-path-label {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--color-text-subtle);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.workspace-path-label__segment {
+  display: inline;
+}
+
+.workspace-path-label__separator {
+  margin: 0 5px;
+  color: var(--color-text-subtle);
+  opacity: 0.45;
+}
+
+.workspace-path-label__crumb {
+  color: var(--color-text-subtle);
+}
+
+.workspace-path-label__leaf {
+  color: var(--color-text-muted);
+}
+
+.workspace-editor__file-meta {
+  flex-shrink: 0;
+  margin-left: auto;
+  color: var(--color-text-subtle);
+}
+
+.ui-panel-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 100%;
+  padding: 24px var(--ui-sidebar-inline-padding, 8px);
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  text-align: center;
+}
+
+.ui-panel-loading .codicon {
+  color: var(--color-accent);
+  font-size: 16px;
+}

package/src/workbench/workspace/workspace-explorer-panel.css

@@ -0,0 +1,33 @@
+.workbench-primary-sidebar .ui-workspace-explorer-panel {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.workbench-primary-sidebar .ui-workspace-explorer-panel .ui-workbench-sidebar-section__header {
+  flex-shrink: 0;
+}
+
+.workbench-primary-sidebar .ui-workspace-explorer-panel .ui-sidebar-list-item {
+  min-height: 22px;
+  gap: 4px;
+  font-size: 13px;
+  line-height: 22px;
+}
+
+.ui-workspace-explorer-item-actions {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 2px;
+  margin-inline-end: var(--ui-sidebar-inline-padding, 8px);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.ui-sidebar-list-entry:hover .ui-workspace-explorer-item-actions,
+.ui-sidebar-list-entry:focus-within .ui-workspace-explorer-item-actions {
+  opacity: 1;
+  pointer-events: auto;
+}

package/src/workbench/workspace/workspace.css

@@ -0,0 +1,5 @@
+/* workbench/workspace feature styles — co-located import hub */
+@import './json-config-workbench.css';
+@import './monaco-panel.css';
+@import './workspace-editor.css';
+@import './workspace-explorer-panel.css';

package/src/workbench/workspace/workspaceExplorerController.ts

@@ -0,0 +1,193 @@
+import {
+  fileNameOfPath,
+  getAvailableWorkspaceEntryName,
+  isSimpleWorkspaceName,
+  isWorkspaceEntryPathAvailable,
+  joinWorkspacePath,
+  parentPathOf,
+  type WorkspaceFile,
+  type WorkspaceSelectionState,
+} from '@workbench-kit/workspace';
+
+import type {
+  WorkspaceExplorerInlineEditKind,
+  WorkspaceExplorerInlineEditState,
+} from './WorkspaceExplorer';
+
+export interface WorkspaceExplorerWorkspaceSnapshot {
+  readonly files: readonly WorkspaceFile[];
+  readonly folders: readonly string[];
+}
+
+export interface WorkspaceExplorerMutationResult {
+  readonly path?: string | undefined;
+  readonly paths?: readonly string[] | undefined;
+}
+
+export type WorkspaceExplorerMutationAction = 'create' | 'rename' | 'delete' | 'move';
+
+export interface WorkspaceExplorerControllerPort {
+  readonly snapshot: WorkspaceExplorerWorkspaceSnapshot;
+  /**
+   * Optional host guard before create/rename/delete/move. Return `false` or a
+   * reason string to deny the mutation; `true` allows it.
+   */
+  canMutatePath?(path: string, action: WorkspaceExplorerMutationAction): boolean | string;
+  createFile(input: {
+    name: string;
+    parentPath: string;
+  }): WorkspaceExplorerMutationResult | void | Promise<WorkspaceExplorerMutationResult | void>;
+  createFolder(input: {
+    name: string;
+    parentPath: string;
+  }): WorkspaceExplorerMutationResult | void | Promise<WorkspaceExplorerMutationResult | void>;
+  deleteEntries(input: { kind: 'file' | 'folder'; paths: readonly string[] }): void | Promise<void>;
+  moveEntries?(input: {
+    sourcePaths: readonly string[];
+    targetFolderPath: string;
+  }): WorkspaceExplorerMutationResult | void | Promise<WorkspaceExplorerMutationResult | void>;
+  openFile(path: string): void | Promise<void>;
+  renameEntry(input: {
+    kind: 'file' | 'folder';
+    name: string;
+    path: string;
+  }): WorkspaceExplorerMutationResult | void | Promise<WorkspaceExplorerMutationResult | void>;
+  reportError?(message: string): void;
+}
+
+export const DEFAULT_WORKSPACE_EXPLORER_MUTATION_DENIED_MESSAGE = 'This action is not allowed.';
+
+/**
+ * Normalize `canMutatePath` results. Returns an error message when denied, else
+ * `undefined` when allowed (including when the guard is omitted).
+ */
+export function resolveWorkspaceExplorerMutationDeniedMessage(
+  result: boolean | string | undefined,
+): string | undefined {
+  if (result === undefined || result === true) {
+    return undefined;
+  }
+
+  if (typeof result === 'string') {
+    return result;
+  }
+
+  return DEFAULT_WORKSPACE_EXPLORER_MUTATION_DENIED_MESSAGE;
+}
+
+export function workspaceExplorerParentPaths(path: string): string[] {
+  const segments = path.split('/').filter(Boolean);
+  return segments.slice(0, -1).map((_, index) => segments.slice(0, index + 1).join('/'));
+}
+
+export function applyWorkspaceExplorerMutationResult(
+  result: WorkspaceExplorerMutationResult | void | undefined,
+  setSelection: (selection: WorkspaceSelectionState) => void,
+): void {
+  const paths = result?.paths ?? (result?.path ? [result.path] : []);
+  if (paths.length === 0) {
+    return;
+  }
+
+  const focusedPath = paths[paths.length - 1];
+  setSelection({
+    anchorPath: focusedPath,
+    focusedPath,
+    paths: [...paths],
+  });
+}
+
+/**
+ * Folder clicks keep `paths` empty (file multi-select list). After renaming a
+ * folder without a host `mapRenameSelection`, focus the folder the same way.
+ */
+export function applyWorkspaceExplorerFolderFocus(
+  folderPath: string,
+  setSelection: (selection: WorkspaceSelectionState) => void,
+): void {
+  if (!folderPath) {
+    return;
+  }
+
+  setSelection({
+    anchorPath: undefined,
+    focusedPath: folderPath,
+    paths: [],
+  });
+}
+
+export function validateWorkspaceExplorerInlineEditName(
+  name: string,
+  invalidNameMessage = 'Use a simple file or folder name.',
+): string | undefined {
+  if (!isSimpleWorkspaceName(name)) {
+    return invalidNameMessage;
+  }
+
+  return undefined;
+}
+
+export function isWorkspaceExplorerCreatePathAvailable(
+  snapshot: WorkspaceExplorerWorkspaceSnapshot,
+  parentPath: string,
+  name: string,
+): boolean {
+  const path = joinWorkspacePath(parentPath, name);
+  return isWorkspaceEntryPathAvailable({
+    files: [...snapshot.files],
+    folders: [...snapshot.folders],
+    path,
+  });
+}
+
+export function isWorkspaceExplorerRenamePathAvailable(
+  snapshot: WorkspaceExplorerWorkspaceSnapshot,
+  sourcePath: string,
+  name: string,
+): boolean {
+  const destinationPath = joinWorkspacePath(parentPathOf(sourcePath), name);
+  if (!sourcePath || !destinationPath || sourcePath === destinationPath) {
+    return sourcePath === destinationPath;
+  }
+
+  return isWorkspaceEntryPathAvailable({
+    excludedPaths: [sourcePath],
+    files: [...snapshot.files],
+    folders: [...snapshot.folders],
+    path: destinationPath,
+  });
+}
+
+export function createWorkspaceExplorerInlineEditDraft(
+  snapshot: WorkspaceExplorerWorkspaceSnapshot,
+  kind: Extract<WorkspaceExplorerInlineEditKind, 'create-file' | 'create-folder'>,
+  parentPath = '',
+): WorkspaceExplorerInlineEditState {
+  const value = getAvailableWorkspaceEntryName({
+    files: [...snapshot.files],
+    folders: [...snapshot.folders],
+    parentPath,
+    preferredName: kind === 'create-file' ? 'untitled.md' : 'new-folder',
+  });
+
+  return {
+    id: `${kind}:${parentPath}:${value}`,
+    kind,
+    parentPath,
+    value,
+  };
+}
+
+export function createWorkspaceExplorerRenameDraft(
+  node: { path: string; type: 'file' | 'folder' },
+  actionPaths: readonly string[] = [node.path],
+): WorkspaceExplorerInlineEditState {
+  const targetPath = actionPaths[0] ?? node.path;
+
+  return {
+    id: `rename:${targetPath}`,
+    kind: node.type === 'folder' ? 'rename-folder' : 'rename-file',
+    path: targetPath,
+    value: fileNameOfPath(targetPath),
+  };
+}

package/src/workbench/workspace/workspaceJsonDiagnostics.ts

@@ -1,4 +1,4 @@
-import type * as Monaco from 'monaco-editor';
+import type { WorkbenchMonaco } from '@workbench-kit/monaco';
 import jdwNodeSchemaJson from '@workbench-kit/jdw/schemas/jdw-node.jdw.schema.json';
 import widgetDocumentSchemaJson from '@workbench-kit/jdw/schemas/widget-document.v1.jdw.schema.json';
 import { formatWorkspaceResourceUri, type WorkspaceFile } from '@workbench-kit/workspace';
@@ -62,7 +62,7 @@ export function getWorkspaceEditorJsonDiagnosticsSchemas(
 }
 
 export function configureWorkspaceEditorJsonDiagnostics(
-  monacoInstance: typeof Monaco,
+  monacoInstance: WorkbenchMonaco,
   file: WorkspaceFile,
 ): void {
   const schemas = getWorkspaceEditorJsonDiagnosticsSchemas(file);

package/src/workbench-menu-surfaces.css

@@ -0,0 +1,57 @@
+/* Optional compact menu density for context menus and command lists. */
+
+.ui-context-menu__item,
+.ui-context-menu__item.ui-button {
+  --ui-button-min-height: 28px;
+  --ui-button-height: auto;
+  --ui-button-padding: 4px 10px;
+  --ui-button-border-radius: 0;
+  border-radius: 0;
+  min-height: 28px;
+  height: auto;
+  padding: 4px 10px;
+}
+
+.ui-context-menu__separator {
+  margin: 0;
+}
+
+.ui-context-menu__shortcut {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-subtle);
+}
+
+.ui-workbench-command-list {
+  padding: 0;
+}
+
+.ui-workbench-command-item,
+.ui-workbench-command-item.ui-button {
+  --ui-button-height: auto;
+  --ui-button-padding: 7px 10px;
+  --ui-button-border-radius: 0;
+  border-radius: 0;
+  height: auto;
+  padding: 7px 10px;
+}
+
+.ui-workbench-command-group-shell__nav {
+  padding: 0;
+}
+
+.ui-workbench-command-group-shell__nav-link {
+  border-radius: 0;
+}
+
+.ui-workbench-command-group-shell__content {
+  padding: 0;
+}
+
+.ui-workbench-command-group-shell__section {
+  padding: 0;
+}
+
+.ui-workbench-command-group-shell__section-header {
+  min-height: 28px;
+  padding: 4px 10px;
+}

package/src/jdw/builtins/renderBuiltinWidgetNode.tsx

@@ -1,126 +0,0 @@
-import { createElement, type CSSProperties, type ReactNode } from 'react';
-import { getWidgetChildren, type GenericWidget } from '@workbench-kit/jdw';
-
-import { renderBuiltinWidgetLeaf } from './renderBuiltinWidgetLeaf.js';
-
-const LAYOUT_TYPES = new Set(['row', 'column', 'grid']);
-
-function readNumber(value: unknown): number | undefined {
-  return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
-}
-
-function layoutContainerStyle(widget: GenericWidget): CSSProperties {
-  const gap = readNumber(widget.gap) ?? 8;
-  const padding = readNumber(widget.padding) ?? 0;
-  const background =
-    typeof widget.background === 'string' && widget.background.trim().length > 0
-      ? widget.background
-      : undefined;
-
-  if (widget.type === 'row') {
-    return {
-      display: 'flex',
-      flexDirection: 'row',
-      gap,
-      padding,
-      background,
-      alignItems: 'stretch',
-      minHeight: 24,
-    };
-  }
-
-  if (widget.type === 'column') {
-    return {
-      display: 'flex',
-      flexDirection: 'column',
-      gap,
-      padding,
-      background,
-      alignItems: 'stretch',
-      minHeight: 24,
-    };
-  }
-
-  if (widget.type === 'grid') {
-    const columns = readNumber(widget.columns) ?? 2;
-    return {
-      display: 'grid',
-      gridTemplateColumns: `repeat(${Math.max(1, columns)}, minmax(0, 1fr))`,
-      gap,
-      padding,
-      background,
-      minHeight: 24,
-    };
-  }
-
-  return {};
-}
-
-function childPlacementStyle(child: GenericWidget, parentType: string): CSSProperties {
-  if (parentType === 'grid') {
-    const col = readNumber(child.col);
-    const row = readNumber(child.row);
-    const colSpan = readNumber(child.colSpan);
-    const rowSpan = readNumber(child.rowSpan);
-
-    return {
-      gridColumn:
-        col !== undefined
-          ? colSpan !== undefined
-            ? `${col + 1} / span ${colSpan}`
-            : `${col + 1}`
-          : undefined,
-      gridRow:
-        row !== undefined
-          ? rowSpan !== undefined
-            ? `${row + 1} / span ${rowSpan}`
-            : `${row + 1}`
-          : undefined,
-      minWidth: 0,
-    };
-  }
-
-  if (parentType === 'row' || parentType === 'column') {
-    const flex = readNumber(child.flex);
-    const align = typeof child.align === 'string' ? child.align : undefined;
-
-    return {
-      flex: flex !== undefined ? flex : undefined,
-      alignSelf: align,
-      minWidth: 0,
-    };
-  }
-
-  return {};
-}
-
-export function renderBuiltinWidgetNode(widget: GenericWidget): ReactNode {
-  const leaf = renderBuiltinWidgetLeaf(widget);
-  if (leaf !== null) {
-    return leaf;
-  }
-
-  if (LAYOUT_TYPES.has(widget.type)) {
-    const children = getWidgetChildren(widget);
-    return createElement(
-      'div',
-      {
-        'data-widget-type': widget.type,
-        style: layoutContainerStyle(widget),
-      },
-      children.map((child, index) =>
-        createElement(
-          'div',
-          {
-            key: index,
-            'data-widget-child': true,
-            style: childPlacementStyle(child, widget.type),
-          },
-          renderBuiltinWidgetNode(child),
-        ),
-      ),
-    );
-  }
-
-  return null;
-}