@workbench-kit/shell-react 0.0.2-prototype.0.2.6

package/src/editor-view-providers.tsx

@@ -0,0 +1,552 @@
+import type { CSSProperties, ReactNode } from 'react';
+import {
+  JDW_SCHEMA_DOCUMENT_MIME,
+  JDW_WIDGET_DOCUMENT_MIME,
+  isJdwDocumentPath,
+  isJdwSchemaDocument,
+} from '@workbench-kit/react/jdw/document';
+import { parseJsonWidgetData } from '@workbench-kit/react/jdw/parse';
+import { ScrollArea, Select, TextInput } from '@workbench-kit/react/primitives';
+import { WorkbenchMarkdownPreview } from '@workbench-kit/react/workbench/markdown-preview';
+import {
+  createEditorDocumentViewProviderRegistry as createCoreEditorDocumentViewProviderRegistry,
+  EditorDocumentViewProviderRegistry,
+  type CreateEditorDocumentViewProviderRegistryOptions as CoreCreateEditorDocumentViewProviderRegistryOptions,
+} from '@workbench-kit/workbench-core';
+import type {
+  EditorDocumentContext,
+  EditorDocumentViewKind,
+  EditorDocumentViewProvider,
+  EditorDocumentViewRenderContext,
+} from '@workbench-kit/workbench-core';
+
+import { JdwWidgetFormView } from './jdw-widget-form-view.js';
+import { JdwWidgetPreviewView } from './jdw-widget-preview-view.js';
+import { replaceJsonValueAtPath, type JsonFormPath } from './json-form-source-patch.js';
+
+type JsonPath = JsonFormPath;
+
+export type {
+  EditorDocumentContext,
+  EditorDocumentViewKind,
+  EditorDocumentViewProvider,
+  EditorDocumentViewRenderContext,
+};
+export { EditorDocumentViewProviderRegistry };
+
+export interface ResolvedEditorDocumentViews {
+  readonly formProvider: EditorDocumentViewProvider | undefined;
+  readonly previewProvider: EditorDocumentViewProvider | undefined;
+}
+
+export const JSON_FORM_PROVIDER_ID = 'workbench-kit.editor.form.json' as const;
+export const JDW_WIDGET_FORM_PROVIDER_ID = 'workbench-kit.editor.form.jdw-widget' as const;
+export const JDW_PREVIEW_PROVIDER_ID = 'workbench-kit.editor.preview.jdw' as const;
+export const MARKDOWN_PREVIEW_PROVIDER_ID = 'workbench-kit.editor.preview.markdown' as const;
+
+/**
+ * Opt-in shallow top-level JSON object form.
+ * Not included in {@link DEFAULT_EDITOR_DOCUMENT_VIEW_PROVIDERS} — plain JSON is
+ * Code-only unless a host registers a dedicated form provider (or this one).
+ */
+export const JSON_FORM_PROVIDER: EditorDocumentViewProvider = {
+  id: JSON_FORM_PROVIDER_ID,
+  kind: 'form',
+  label: 'Form',
+  priority: 0,
+  matches: (document) =>
+    !isJdwSchemaDocument(document) &&
+    !isJdwDocument(document) &&
+    !isJdwWidgetJson(document.content) &&
+    (isJsonLikeDocument(document) || parseJsonObject(document.content) !== null),
+  render: ({ document, onContentChange }) => (
+    <JsonObjectFormView content={document.content} onContentChange={onContentChange} />
+  ),
+};
+
+const JDW_WIDGET_FORM_PROVIDER: EditorDocumentViewProvider = {
+  id: JDW_WIDGET_FORM_PROVIDER_ID,
+  kind: 'form',
+  label: 'Form',
+  priority: 20,
+  matches: (document) =>
+    !isJdwSchemaDocument(document) &&
+    (isJdwDocument(document) || isJdwWidgetJson(document.content)),
+  render: ({ document, onContentChange }) => (
+    <JdwWidgetFormView
+      content={document.content}
+      path={document.path}
+      onContentChange={onContentChange}
+    />
+  ),
+};
+
+const JDW_PREVIEW_PROVIDER: EditorDocumentViewProvider = {
+  id: JDW_PREVIEW_PROVIDER_ID,
+  kind: 'preview',
+  label: 'Preview',
+  priority: 10,
+  matches: (document) =>
+    !isJdwSchemaDocument(document) &&
+    (isJdwDocument(document) || isJdwWidgetJson(document.content)),
+  render: ({ document }) => (
+    <JdwWidgetPreviewView
+      className="workbench-editor-area__jdw-preview-viewport"
+      content={document.content}
+      path={document.path}
+    />
+  ),
+};
+
+const MARKDOWN_PREVIEW_PROVIDER: EditorDocumentViewProvider = {
+  id: MARKDOWN_PREVIEW_PROVIDER_ID,
+  kind: 'preview',
+  label: 'Preview',
+  priority: 5,
+  matches: isMarkdownDocument,
+  render: ({ document }) => <WorkbenchMarkdownPreview source={document.content} />,
+};
+
+export const DEFAULT_EDITOR_DOCUMENT_VIEW_PROVIDERS: readonly EditorDocumentViewProvider[] = [
+  JDW_WIDGET_FORM_PROVIDER,
+  JDW_PREVIEW_PROVIDER,
+  MARKDOWN_PREVIEW_PROVIDER,
+];
+
+export interface CreateEditorDocumentViewProviderRegistryOptions extends CoreCreateEditorDocumentViewProviderRegistryOptions {
+  readonly includeDefaultProviders?: boolean | undefined;
+}
+
+export function createEditorDocumentViewProviderRegistry(
+  options: CreateEditorDocumentViewProviderRegistryOptions = {},
+): EditorDocumentViewProviderRegistry {
+  const providers = [
+    ...(options.includeDefaultProviders === false ? [] : DEFAULT_EDITOR_DOCUMENT_VIEW_PROVIDERS),
+    ...(options.providers ?? []),
+  ];
+  return createCoreEditorDocumentViewProviderRegistry({ providers });
+}
+
+export function resolveEditorDocumentViews(
+  document: EditorDocumentContext,
+  providers: readonly EditorDocumentViewProvider[] = DEFAULT_EDITOR_DOCUMENT_VIEW_PROVIDERS,
+): ResolvedEditorDocumentViews {
+  return {
+    formProvider: resolveEditorDocumentViewProvider(document, 'form', providers),
+    previewProvider: resolveEditorDocumentViewProvider(document, 'preview', providers),
+  };
+}
+
+export function resolveEditorDocumentViewProvider(
+  document: EditorDocumentContext,
+  kind: EditorDocumentViewKind,
+  providers: readonly EditorDocumentViewProvider[] = DEFAULT_EDITOR_DOCUMENT_VIEW_PROVIDERS,
+): EditorDocumentViewProvider | undefined {
+  return providers
+    .filter(
+      (provider) => provider.kind === kind && matchesEditorDocumentViewProvider(provider, document),
+    )
+    .sort((left, right) => (right.priority ?? 0) - (left.priority ?? 0))[0];
+}
+
+export function matchesEditorDocumentViewProvider(
+  provider: EditorDocumentViewProvider,
+  document: EditorDocumentContext,
+): boolean {
+  if (provider.matches) {
+    return provider.matches(document);
+  }
+
+  const mimeType = document.mimeType?.toLowerCase();
+  const path = normalizePath(document.path);
+  const hasMimeTypes = Boolean(provider.mimeTypes?.length);
+  const hasFilenamePatterns = Boolean(provider.filenamePatterns?.length);
+
+  if (!hasMimeTypes && !hasFilenamePatterns) {
+    return false;
+  }
+
+  const mimeMatches =
+    !hasMimeTypes ||
+    Boolean(provider.mimeTypes?.some((candidate) => candidate.toLowerCase() === mimeType));
+  const pathMatches =
+    !hasFilenamePatterns ||
+    Boolean(provider.filenamePatterns?.some((pattern) => matchesFilenamePattern(pattern, path)));
+
+  return mimeMatches && pathMatches;
+}
+
+function matchesFilenamePattern(pattern: string, path: string): boolean {
+  const normalizedPattern = normalizePath(pattern);
+  const segments = path.split('/');
+  const target = normalizedPattern.includes('/') ? path : (segments[segments.length - 1] ?? path);
+  const regex = new RegExp(`^${globToRegExpSource(normalizedPattern)}$`, 'i');
+  return regex.test(target);
+}
+
+function globToRegExpSource(pattern: string): string {
+  let source = '';
+
+  for (let index = 0; index < pattern.length; index += 1) {
+    const char = pattern[index];
+    const nextChar = pattern[index + 1];
+
+    if (char === '*' && nextChar === '*') {
+      source += '.*';
+      index += 1;
+      continue;
+    }
+
+    if (char === '*') {
+      source += '[^/]*';
+      continue;
+    }
+
+    if (char === '?') {
+      source += '[^/]';
+      continue;
+    }
+
+    source += escapeRegExp(char ?? '');
+  }
+
+  return source;
+}
+
+function normalizePath(path: string): string {
+  return path.split('\\').join('/');
+}
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function JsonObjectFormView({
+  content,
+  onContentChange,
+}: {
+  content: string;
+  onContentChange: (content: string) => void;
+}) {
+  const parsed = parseJsonObject(content);
+
+  const handleFieldChange = (path: JsonPath, nextValue: string) => {
+    if (!parsed) {
+      return;
+    }
+
+    const previousValue = getJsonPathValue(parsed, path);
+    const coerced = coerceFormFieldValue(previousValue, nextValue);
+    onContentChange(replaceJsonValueAtPath(content, path, coerced));
+  };
+
+  if (!parsed) {
+    return (
+      <ScrollArea className="workbench-editor-area__form-placeholder" orientation="vertical">
+        <p>Form view is unavailable while the document is not valid JSON.</p>
+        <p>Switch to Source to fix parse errors.</p>
+      </ScrollArea>
+    );
+  }
+
+  const entries = Object.entries(parsed);
+
+  if (entries.length === 0) {
+    return (
+      <ScrollArea className="workbench-editor-area__form-placeholder" orientation="vertical">
+        <p>Form view</p>
+        <p>This JSON object has no top-level fields yet.</p>
+      </ScrollArea>
+    );
+  }
+
+  return (
+    <ScrollArea
+      as="form"
+      className="workbench-editor-area__form"
+      orientation="vertical"
+      onSubmit={(event) => {
+        event.preventDefault();
+      }}
+    >
+      <div className="workbench-editor-area__form-grid">
+        {entries.map(([key, value]) => (
+          <JsonValueFormField
+            key={key}
+            depth={0}
+            label={key}
+            path={[key]}
+            value={value}
+            onFieldChange={handleFieldChange}
+          />
+        ))}
+      </div>
+    </ScrollArea>
+  );
+}
+
+function JsonValueFormField({
+  depth = 0,
+  label,
+  path,
+  value,
+  onFieldChange,
+}: {
+  depth?: number;
+  label: string;
+  path: JsonPath;
+  value: unknown;
+  onFieldChange: (path: JsonPath, value: string) => void;
+}) {
+  if (Array.isArray(value)) {
+    return (
+      <JsonFormGroup depth={depth} label={label} meta={`array (${value.length})`} path={path}>
+        {value.length === 0 ? (
+          <div className="workbench-editor-area__form-empty" style={formDepthStyle(depth + 1)}>
+            Empty array
+          </div>
+        ) : (
+          value.map((item, index) => (
+            <JsonValueFormField
+              key={index}
+              depth={depth + 1}
+              label={`[${index}]`}
+              path={[...path, index]}
+              value={item}
+              onFieldChange={onFieldChange}
+            />
+          ))
+        )}
+      </JsonFormGroup>
+    );
+  }
+
+  if (isJsonRecord(value)) {
+    const entries = Object.entries(value);
+
+    return (
+      <JsonFormGroup depth={depth} label={label} meta={`object (${entries.length})`} path={path}>
+        {entries.length === 0 ? (
+          <div className="workbench-editor-area__form-empty" style={formDepthStyle(depth + 1)}>
+            Empty object
+          </div>
+        ) : (
+          entries.map(([key, childValue]) => (
+            <JsonValueFormField
+              key={key}
+              depth={depth + 1}
+              label={key}
+              path={[...path, key]}
+              value={childValue}
+              onFieldChange={onFieldChange}
+            />
+          ))
+        )}
+      </JsonFormGroup>
+    );
+  }
+
+  const fieldLabel = getJsonPathLabel(path);
+  const labelStyle = formDepthStyle(depth);
+
+  if (typeof value === 'boolean') {
+    return (
+      <label className="workbench-editor-area__form-field">
+        <span className="workbench-editor-area__form-label" style={labelStyle}>
+          {label}
+        </span>
+        <Select
+          aria-label={fieldLabel}
+          className="workbench-editor-area__form-control"
+          controlWidth="full"
+          value={String(value)}
+          onValueChange={(nextValue) => {
+            onFieldChange(path, nextValue);
+          }}
+        >
+          <option value="true">true</option>
+          <option value="false">false</option>
+        </Select>
+      </label>
+    );
+  }
+
+  if (typeof value === 'string' || typeof value === 'number') {
+    return (
+      <label className="workbench-editor-area__form-field">
+        <span className="workbench-editor-area__form-label" style={labelStyle}>
+          {label}
+        </span>
+        <TextInput
+          aria-label={fieldLabel}
+          className="workbench-editor-area__form-control"
+          controlWidth="full"
+          onValueChange={(nextValue) => {
+            onFieldChange(path, nextValue);
+          }}
+          step={typeof value === 'number' ? 'any' : undefined}
+          type={typeof value === 'number' ? 'number' : 'text'}
+          value={formatFormFieldValue(value)}
+        />
+      </label>
+    );
+  }
+
+  return (
+    <div className="workbench-editor-area__form-field">
+      <span className="workbench-editor-area__form-label" style={labelStyle}>
+        {label}
+      </span>
+      <output aria-label={fieldLabel} className="workbench-editor-area__form-readonly">
+        {formatFormFieldValue(value)}
+      </output>
+    </div>
+  );
+}
+
+function JsonFormGroup({
+  children,
+  depth,
+  label,
+  meta,
+  path,
+}: {
+  children: ReactNode;
+  depth: number;
+  label: string;
+  meta: string;
+  path: JsonPath;
+}) {
+  return (
+    <>
+      <div
+        aria-label={getJsonPathLabel(path)}
+        className="workbench-editor-area__form-group-header"
+        role="group"
+        style={formDepthStyle(depth)}
+      >
+        <span className="workbench-editor-area__form-label">{label}</span>
+        <span className="workbench-editor-area__form-badge">{meta}</span>
+      </div>
+      {children}
+    </>
+  );
+}
+
+function formDepthStyle(depth: number): CSSProperties {
+  return {
+    '--workbench-editor-form-depth': String(depth),
+  } as CSSProperties;
+}
+
+function isJsonLikeDocument(document: EditorDocumentContext): boolean {
+  const mimeType = document.mimeType?.toLowerCase();
+  const path = document.path.toLowerCase();
+
+  return (
+    path.endsWith('.json') ||
+    mimeType === 'application/json' ||
+    mimeType === 'application/schema+json' ||
+    mimeType === JDW_SCHEMA_DOCUMENT_MIME ||
+    Boolean(mimeType?.endsWith('+json'))
+  );
+}
+
+function isJdwDocument(document: EditorDocumentContext): boolean {
+  return document.mimeType === JDW_WIDGET_DOCUMENT_MIME || isJdwDocumentPath(document.path);
+}
+
+function isMarkdownDocument(document: EditorDocumentContext): boolean {
+  const mimeType = document.mimeType?.toLowerCase();
+  const path = document.path.toLowerCase();
+
+  return path.endsWith('.md') || path.endsWith('.mdx') || mimeType === 'text/markdown';
+}
+
+function parseJsonObject(content: string): Record<string, unknown> | null {
+  const trimmed = content.trim();
+  if (!trimmed) {
+    return {};
+  }
+
+  try {
+    const parsed: unknown = JSON.parse(trimmed);
+    if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
+      return null;
+    }
+
+    return parsed as Record<string, unknown>;
+  } catch {
+    return null;
+  }
+}
+
+function isJsonRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function isJdwWidgetJson(content: string): boolean {
+  const parsed = parseJsonWidgetData(content);
+  return parsed.value !== null;
+}
+
+function formatFormFieldValue(value: unknown): string {
+  if (typeof value === 'string') {
+    return value;
+  }
+
+  if (typeof value === 'number' || typeof value === 'boolean') {
+    return String(value);
+  }
+
+  return JSON.stringify(value) ?? String(value);
+}
+
+function coerceFormFieldValue(previousValue: unknown, nextValue: string): unknown {
+  if (typeof previousValue === 'number') {
+    const parsedNumber = Number(nextValue);
+    return Number.isNaN(parsedNumber) ? previousValue : parsedNumber;
+  }
+
+  if (typeof previousValue === 'boolean') {
+    if (nextValue === 'true') {
+      return true;
+    }
+
+    if (nextValue === 'false') {
+      return false;
+    }
+  }
+
+  return nextValue;
+}
+
+function getJsonPathValue(value: unknown, path: JsonPath): unknown {
+  let cursor = value;
+
+  for (const segment of path) {
+    if (Array.isArray(cursor) && typeof segment === 'number') {
+      cursor = cursor[segment];
+      continue;
+    }
+
+    if (isJsonRecord(cursor) && typeof segment === 'string') {
+      cursor = cursor[segment];
+      continue;
+    }
+
+    return undefined;
+  }
+
+  return cursor;
+}
+
+function getJsonPathLabel(path: JsonPath): string {
+  return path.reduce<string>((label, segment) => {
+    if (typeof segment === 'number') {
+      return `${label}[${segment}]`;
+    }
+
+    return label ? `${label}.${segment}` : segment;
+  }, '');
+}

package/src/editor-workspace-file-availability.ts

@@ -0,0 +1,15 @@
+import { parseWorkspaceResourceUri } from '@workbench-kit/workspace';
+
+/** Pure helper — kept out of React component modules for Fast Refresh. */
+export function createWorkspaceFileAvailabilityChecker(
+  filePaths: ReadonlySet<string>,
+): (resourceUri: string) => boolean {
+  return (resourceUri) => {
+    const parsed = parseWorkspaceResourceUri(resourceUri);
+    if (!parsed || parsed.kind !== 'file') {
+      return true;
+    }
+
+    return filePaths.has(parsed.path);
+  };
+}

package/src/editor-workspace-reconcile.tsx

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+
+import { createWorkspaceFileAvailabilityChecker } from './editor-workspace-file-availability.js';
+import { useEditorService } from './use-editor.js';
+import { useWorkbench } from './provider.js';
+import { isWorkspaceResourceService, useWorkspaceResourceState } from './workspace-view-state.js';
+
+/** Component-only module so Vite Fast Refresh can accept this boundary. */
+export function EditorWorkspaceReconciler(): null {
+  const { workspaceHostPort } = useWorkbench();
+  const editorService = useEditorService();
+  const workspaceService = isWorkspaceResourceService(workspaceHostPort?.service)
+    ? workspaceHostPort.service
+    : undefined;
+  const workspaceState = useWorkspaceResourceState(workspaceService);
+
+  useEffect(() => {
+    if (!workspaceService) {
+      return;
+    }
+
+    const files = workspaceState?.files ?? workspaceService.getState().files;
+    const filePaths = new Set(files.map((file) => file.path));
+    editorService.reconcileWorkspaceFileTabs(createWorkspaceFileAvailabilityChecker(filePaths));
+  }, [editorService, workspaceService, workspaceState]);
+
+  return null;
+}

package/src/explorer-context-menu.ts

@@ -0,0 +1,114 @@
+import type { ContextMenuItem } from '@workbench-kit/react/overlay';
+import {
+  WORKBENCH_COMMAND_SURFACE_WORKSPACE,
+  commandMenuItemsToContextMenuItems,
+  createWorkbenchWorkspaceCommands,
+  createWorkbenchWorkspaceFolderMenuEntries,
+  createWorkbenchWorkspaceTargetMenuEntries,
+  type WorkbenchWorkspaceCommandContext,
+} from '@workbench-kit/react/workbench/commands';
+import {
+  createCommandRegistry,
+  executeCommand as executeRegisteredCommand,
+  resolveCommandMenuItems,
+} from '@workbench-kit/platform';
+import { parentPathOf, type WorkspaceTreeNode } from '@workbench-kit/workspace';
+import type { ExtensionRegistry } from '@workbench-kit/workbench-core';
+import {
+  appendExtensionContextMenuItems,
+  createExtensionContextMenuItems,
+} from './extension-context-menu.js';
+
+const workspaceCommandRegistry = createCommandRegistry(createWorkbenchWorkspaceCommands());
+const workspaceFolderMenuEntries =
+  createWorkbenchWorkspaceFolderMenuEntries<WorkbenchWorkspaceCommandContext>();
+const workspaceTargetMenuEntries =
+  createWorkbenchWorkspaceTargetMenuEntries<WorkbenchWorkspaceCommandContext>();
+const EXPLORER_CONTEXT_MENU = 'explorer/context';
+const EXPLORER_EXTENSION_MENU_SEPARATOR_ID = 'explorer-extension-separator';
+
+export function createExplorerItemContextMenuItems({
+  actionPaths,
+  copyPaths,
+  createFile,
+  createFolder,
+  deleteTargets,
+  executeExtensionCommand,
+  extensionRegistry,
+  files,
+  node,
+  openFiles,
+  revealFolder,
+  renameTarget,
+}: {
+  actionPaths: readonly string[];
+  copyPaths: (paths: string[]) => void;
+  createFile: (parentPath: string) => void;
+  createFolder: (parentPath: string) => void;
+  deleteTargets: (paths: string[]) => void;
+  executeExtensionCommand?: ((commandId: string) => unknown) | undefined;
+  extensionRegistry?: ExtensionRegistry | undefined;
+  files: readonly { path: string }[];
+  node: WorkspaceTreeNode;
+  openFiles: (paths: string[]) => void;
+  revealFolder: (path: string) => void;
+  renameTarget: () => void;
+}): ContextMenuItem[] {
+  const fileActionPaths =
+    node.type === 'file'
+      ? actionPaths.length > 0
+        ? [...actionPaths]
+        : [node.path]
+      : actionPaths.filter((path) => files.some((file) => file.path === path));
+  const multiFileAction = fileActionPaths.length > 1;
+  const targetPaths = node.type === 'folder' ? [node.path] : [...fileActionPaths];
+  const contextKeys = {
+    'workspace.hasSelection': targetPaths.length > 0,
+    'workspace.multiSelection': node.type === 'file' && multiFileAction,
+  };
+
+  const context: WorkbenchWorkspaceCommandContext = {
+    copyWorkspaceTarget: () => copyPaths([...targetPaths]),
+    createWorkspaceFile: () =>
+      createFile(node.type === 'folder' ? node.path : parentPathOf(node.path)),
+    createWorkspaceFolder: () =>
+      createFolder(node.type === 'folder' ? node.path : parentPathOf(node.path)),
+    deleteWorkspaceTarget: () => deleteTargets([...targetPaths]),
+    fileActionPaths,
+    multiFileAction,
+    openWorkspaceTarget: () => {
+      if (node.type === 'folder') {
+        revealFolder(node.path);
+        return;
+      }
+
+      openFiles(fileActionPaths);
+    },
+    renameWorkspaceTarget: renameTarget,
+    targetPaths,
+    workspaceTargetKind: node.type,
+  };
+
+  const baseItems = commandMenuItemsToContextMenuItems(
+    resolveCommandMenuItems({
+      context,
+      contextKeys,
+      entries: node.type === 'folder' ? workspaceFolderMenuEntries : workspaceTargetMenuEntries,
+      registry: workspaceCommandRegistry,
+      surface: WORKBENCH_COMMAND_SURFACE_WORKSPACE,
+    }),
+    (commandId) =>
+      executeRegisteredCommand(workspaceCommandRegistry, commandId, context, contextKeys),
+  );
+
+  return appendExtensionContextMenuItems(
+    baseItems,
+    createExtensionContextMenuItems({
+      contextKeys,
+      executeCommand: executeExtensionCommand,
+      extensionRegistry,
+      menu: EXPLORER_CONTEXT_MENU,
+    }),
+    EXPLORER_EXTENSION_MENU_SEPARATOR_ID,
+  );
+}