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

package/src/workbench/management/WorkbenchDialogFrame.tsx

@@ -0,0 +1,148 @@
+import type { FormEventHandler, ReactNode } from 'react';
+import { Modal, type ModalBodyLayout, type ModalBodyPadding } from '../../modal/Modal';
+import type { WorkbenchWindowChromeMode } from '../workbenchPlatformChrome';
+import { WorkbenchModalPortal } from '../WorkbenchModalPortal';
+
+export type WorkbenchDialogBodyLayout = 'column-fill' | 'default' | 'padded-fill';
+export type WorkbenchDialogFrameSize =
+  'asset-library' | 'auto' | 'metadata-editor' | 'source-manager' | 'wide';
+
+export interface WorkbenchDialogFrameProps {
+  ariaLabel: string;
+  bodyLayout?: WorkbenchDialogBodyLayout;
+  chrome?: WorkbenchWindowChromeMode;
+  children: ReactNode;
+  closeLabel: string;
+  dataAttributes?: Record<string, string>;
+  defaultMaximized?: boolean;
+  frameSize?: WorkbenchDialogFrameSize;
+  maximizeLabel?: string;
+  onClose: () => void;
+  onSubmit?: FormEventHandler<HTMLFormElement>;
+  restoreLabel?: string;
+  surfaceDataAttributes?: Record<string, string>;
+  title: ReactNode;
+}
+
+export function WorkbenchDialogFrame({
+  ariaLabel,
+  bodyLayout = 'default',
+  chrome = 'platform',
+  children,
+  closeLabel,
+  dataAttributes,
+  defaultMaximized = false,
+  frameSize = 'auto',
+  maximizeLabel,
+  onClose,
+  onSubmit,
+  restoreLabel,
+  surfaceDataAttributes,
+  title,
+}: WorkbenchDialogFrameProps) {
+  const size = resolveWorkbenchDialogSize(frameSize);
+  const layout = resolveWorkbenchDialogBodyLayout(bodyLayout);
+
+  return (
+    <WorkbenchModalPortal>
+      <div aria-label={ariaLabel} {...(dataAttributes ?? {})}>
+        <Modal
+          bodyClassName={layout.bodyClassName}
+          bodyLayout={layout.bodyLayout}
+          bodyPadding={layout.bodyPadding}
+          bodyScroll={layout.bodyScroll}
+          chrome={chrome}
+          className="workbench-dialog-frame"
+          closeLabel={closeLabel}
+          defaultHeight={size.defaultHeight}
+          defaultMaximized={defaultMaximized}
+          defaultWidth={size.defaultWidth}
+          maximizeLabel={maximizeLabel}
+          minHeight={size.minHeight}
+          minWidth={size.minWidth}
+          onClose={onClose}
+          onSubmit={onSubmit}
+          restoreLabel={restoreLabel}
+          title={title}
+        >
+          <div
+            className="flex h-full min-h-0 flex-col"
+            data-workbench-dialog-surface="true"
+            {...(surfaceDataAttributes ?? {})}
+          >
+            {children}
+          </div>
+        </Modal>
+      </div>
+    </WorkbenchModalPortal>
+  );
+}
+
+function resolveWorkbenchDialogSize(frameSize: WorkbenchDialogFrameSize): {
+  defaultHeight: number;
+  defaultWidth: number;
+  minHeight: number;
+  minWidth: number;
+} {
+  switch (frameSize) {
+    case 'asset-library':
+      return {
+        defaultHeight: 760,
+        defaultWidth: 1120,
+        minHeight: 420,
+        minWidth: 720,
+      };
+    case 'source-manager':
+    case 'wide':
+      return {
+        defaultHeight: 760,
+        defaultWidth: 1080,
+        minHeight: 420,
+        minWidth: 720,
+      };
+    case 'metadata-editor':
+      return {
+        defaultHeight: 760,
+        defaultWidth: 680,
+        minHeight: 420,
+        minWidth: 480,
+      };
+    case 'auto':
+      return {
+        defaultHeight: 520,
+        defaultWidth: 720,
+        minHeight: 320,
+        minWidth: 420,
+      };
+  }
+}
+
+function resolveWorkbenchDialogBodyLayout(bodyLayout: WorkbenchDialogBodyLayout): {
+  bodyClassName?: string;
+  bodyLayout: ModalBodyLayout;
+  bodyPadding: ModalBodyPadding;
+  bodyScroll: 'auto' | 'hidden';
+} {
+  switch (bodyLayout) {
+    case 'column-fill':
+      return {
+        bodyClassName: 'min-h-0 flex-1',
+        bodyLayout: 'stack',
+        bodyPadding: 'none',
+        bodyScroll: 'hidden',
+      };
+    case 'padded-fill':
+      return {
+        bodyClassName: 'min-h-0 flex-1',
+        bodyLayout: 'stack',
+        bodyPadding: 'md',
+        bodyScroll: 'hidden',
+      };
+    case 'default':
+      return {
+        bodyLayout: 'block',
+        bodyPadding: 'none',
+        bodyScroll: 'hidden',
+      };
+  }
+}

package/src/workbench/management/WorkbenchNotice.tsx

@@ -0,0 +1,211 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+} from 'react';
+import { IconButton, WorkbenchBanner, WorkbenchBannerMessage } from '../../primitives/index';
+
+export type WorkbenchNoticeTone = 'error' | 'info' | 'success' | 'warning';
+export type WorkbenchNoticePosition = 'bottom-center' | 'bottom-right';
+
+export interface WorkbenchNoticeItem {
+  dataAttributes?: Record<string, string>;
+  id: string;
+  message: ReactNode;
+  tone: WorkbenchNoticeTone;
+}
+
+export interface ShowWorkbenchNoticeInput {
+  dataAttributes?: Record<string, string>;
+  durationMs?: number;
+  id?: string;
+  message: ReactNode;
+  tone: WorkbenchNoticeTone;
+}
+
+export interface WorkbenchNoticeController {
+  clearNotices: () => void;
+  dismissNotice: (id: string) => void;
+  notices: readonly WorkbenchNoticeItem[];
+  showNotice: (input: ShowWorkbenchNoticeInput) => string;
+}
+
+const WorkbenchNoticeContext = createContext<WorkbenchNoticeController | null>(null);
+
+export function useWorkbenchNoticeController(): WorkbenchNoticeController {
+  const [notices, setNotices] = useState<WorkbenchNoticeItem[]>([]);
+  const nextIdRef = useRef(0);
+  const timeoutHandlesRef = useRef(new Map<string, number>());
+
+  const clearNoticeTimeout = useCallback((id: string): void => {
+    const timeoutHandle = timeoutHandlesRef.current.get(id);
+    if (timeoutHandle !== undefined) {
+      window.clearTimeout(timeoutHandle);
+      timeoutHandlesRef.current.delete(id);
+    }
+  }, []);
+
+  const dismissNotice = useCallback(
+    (id: string): void => {
+      clearNoticeTimeout(id);
+      setNotices((current) => current.filter((notice) => notice.id !== id));
+    },
+    [clearNoticeTimeout],
+  );
+
+  const clearNotices = useCallback((): void => {
+    for (const timeoutHandle of timeoutHandlesRef.current.values()) {
+      window.clearTimeout(timeoutHandle);
+    }
+    timeoutHandlesRef.current.clear();
+    setNotices([]);
+  }, []);
+
+  const showNotice = useCallback(
+    ({
+      dataAttributes,
+      durationMs = 4200,
+      id,
+      message,
+      tone,
+    }: ShowWorkbenchNoticeInput): string => {
+      const noticeId = id ?? `workbench-notice-${nextIdRef.current++}`;
+
+      clearNoticeTimeout(noticeId);
+      setNotices((current) => [
+        ...current.filter((notice) => notice.id !== noticeId),
+        {
+          ...(dataAttributes === undefined ? {} : { dataAttributes }),
+          id: noticeId,
+          message,
+          tone,
+        },
+      ]);
+
+      if (durationMs > 0) {
+        const timeoutHandle = window.setTimeout(() => dismissNotice(noticeId), durationMs);
+        timeoutHandlesRef.current.set(noticeId, timeoutHandle);
+      }
+
+      return noticeId;
+    },
+    [clearNoticeTimeout, dismissNotice],
+  );
+
+  useEffect(() => clearNotices, [clearNotices]);
+
+  return {
+    clearNotices,
+    dismissNotice,
+    notices,
+    showNotice,
+  };
+}
+
+export function WorkbenchNoticeProvider({
+  children,
+  controller,
+  dataAttributes,
+  position = 'bottom-right',
+}: {
+  children: ReactNode;
+  controller?: WorkbenchNoticeController;
+  dataAttributes?: Record<string, string>;
+  position?: WorkbenchNoticePosition;
+}) {
+  const localController = useWorkbenchNoticeController();
+  const resolvedController = controller ?? localController;
+
+  return (
+    <WorkbenchNoticeContext.Provider value={resolvedController}>
+      {children}
+      <WorkbenchNoticeViewport
+        controller={resolvedController}
+        position={position}
+        {...(dataAttributes === undefined ? {} : { dataAttributes })}
+      />
+    </WorkbenchNoticeContext.Provider>
+  );
+}
+
+export function WorkbenchNoticeViewport({
+  controller,
+  dataAttributes,
+  position = 'bottom-right',
+}: {
+  controller: WorkbenchNoticeController;
+  dataAttributes?: Record<string, string>;
+  position?: WorkbenchNoticePosition;
+}) {
+  const visibleNotices = controller.notices.slice(-3);
+  if (visibleNotices.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      aria-live="polite"
+      className={resolveNoticeViewportClassName(position)}
+      data-position={position}
+      {...(dataAttributes ?? {})}
+    >
+      {visibleNotices.map((notice) => (
+        <WorkbenchBanner
+          className="pointer-events-auto"
+          data-tone={notice.tone}
+          key={notice.id}
+          style={resolveNoticeBannerStyle(notice.tone)}
+          tone={notice.tone === 'warning' ? 'warning' : 'default'}
+          {...(notice.dataAttributes ?? {})}
+        >
+          <WorkbenchBannerMessage>{notice.message}</WorkbenchBannerMessage>
+          <IconButton
+            compact
+            icon="close"
+            label="Dismiss notice"
+            onClick={() => controller.dismissNotice(notice.id)}
+            type="button"
+          />
+        </WorkbenchBanner>
+      ))}
+    </div>
+  );
+}
+
+export function useWorkbenchNotice(): WorkbenchNoticeController {
+  const controller = useContext(WorkbenchNoticeContext);
+  if (controller === null) {
+    throw new Error('useWorkbenchNotice must be used within a WorkbenchNoticeProvider.');
+  }
+
+  return controller;
+}
+
+function resolveNoticeViewportClassName(position: WorkbenchNoticePosition): string {
+  return joinClasses(
+    'pointer-events-none fixed inset-x-0 bottom-4 z-50 flex flex-col gap-2 px-4',
+    position === 'bottom-center' ? 'items-center' : 'items-end',
+  );
+}
+
+function resolveNoticeBannerStyle(tone: WorkbenchNoticeTone): CSSProperties {
+  return {
+    borderColor:
+      tone === 'error'
+        ? 'var(--ui-danger-border, currentColor)'
+        : tone === 'success'
+          ? 'var(--ui-success-border, currentColor)'
+          : undefined,
+    maxWidth: 'min(520px, calc(100vw - 32px))',
+    minWidth: 'min(420px, calc(100vw - 32px))',
+  };
+}
+
+function joinClasses(...classes: Array<string | undefined>): string {
+  return classes.filter(Boolean).join(' ');
+}

package/src/workbench/management/build-command-management-groups.ts

@@ -0,0 +1,157 @@
+import type { CommandManagementEntry, CommandManagementGroup } from './types.js';
+
+interface BuildCommandManagementGroupsInput {
+  readonly extensionCommands: readonly {
+    readonly category?: string | undefined;
+    readonly description?: string | undefined;
+    readonly extensionId: string;
+    readonly extensionLabel: string;
+    readonly handler?: unknown;
+    readonly id: string;
+    readonly label: string;
+  }[];
+  readonly keybindingsByCommandId?: Readonly<Record<string, string>> | undefined;
+  readonly menuSurfacesByCommandId?: Readonly<Record<string, readonly string[]>> | undefined;
+  readonly shellCommands?:
+    | readonly {
+        readonly category?: string | undefined;
+        readonly description?: string | undefined;
+        readonly handler?: unknown;
+        readonly id: string;
+        readonly label: string;
+      }[]
+    | undefined;
+}
+
+function toEntry(
+  command: {
+    readonly category?: string | undefined;
+    readonly description?: string | undefined;
+    readonly handler?: unknown;
+    readonly id: string;
+    readonly label: string;
+  },
+  source: string,
+  sourceLabel: string,
+  keybindingsByCommandId: Readonly<Record<string, string>> | undefined,
+  menuSurfacesByCommandId: Readonly<Record<string, readonly string[]>> | undefined,
+): CommandManagementEntry {
+  const status = command.handler ? 'available' : 'no-handler';
+
+  return {
+    category: command.category,
+    description: command.description,
+    id: command.id,
+    keybinding: keybindingsByCommandId?.[command.id],
+    label: command.label,
+    menuSurfaces: menuSurfacesByCommandId?.[command.id],
+    source,
+    sourceLabel,
+    status,
+  };
+}
+
+export function buildCommandManagementGroups({
+  extensionCommands,
+  keybindingsByCommandId,
+  menuSurfacesByCommandId,
+  shellCommands = [],
+}: BuildCommandManagementGroupsInput): CommandManagementGroup[] {
+  const groups = new Map<
+    string,
+    { entries: CommandManagementEntry[]; id: string; label: string }
+  >();
+  const ensureGroup = (id: string, label: string) => {
+    const existing = groups.get(id);
+    if (existing) {
+      return existing;
+    }
+
+    const created = { entries: [] as CommandManagementEntry[], id, label };
+    groups.set(id, created);
+    return created;
+  };
+
+  for (const command of shellCommands) {
+    const group = ensureGroup('workbench.shell', 'Workbench Shell');
+    group.entries.push(
+      toEntry(
+        command,
+        'workbench.shell',
+        'Workbench Shell',
+        keybindingsByCommandId,
+        menuSurfacesByCommandId,
+      ),
+    );
+  }
+
+  for (const command of extensionCommands) {
+    const group = ensureGroup(command.extensionId, command.extensionLabel);
+    group.entries.push(
+      toEntry(
+        command,
+        command.extensionId,
+        command.extensionLabel,
+        keybindingsByCommandId,
+        menuSurfacesByCommandId,
+      ),
+    );
+  }
+
+  return [...groups.values()]
+    .map((group) => ({
+      ...group,
+      entries: [...group.entries].sort((left, right) => left.label.localeCompare(right.label)),
+    }))
+    .sort((left, right) => left.label.localeCompare(right.label));
+}
+
+export function filterCommandManagementGroups(
+  groups: readonly CommandManagementGroup[],
+  query: string,
+): CommandManagementGroup[] {
+  const normalizedQuery = query.trim().toLowerCase();
+  if (!normalizedQuery) {
+    return [...groups];
+  }
+
+  return groups
+    .map((group) => ({
+      ...group,
+      entries: group.entries.filter((entry) => {
+        const haystack = [
+          entry.label,
+          entry.id,
+          entry.category,
+          entry.description,
+          entry.sourceLabel,
+          entry.keybinding,
+          ...(entry.menuSurfaces ?? []),
+        ]
+          .filter(Boolean)
+          .join(' ')
+          .toLowerCase();
+
+        return haystack.includes(normalizedQuery);
+      }),
+    }))
+    .filter((group) => group.entries.length > 0);
+}
+
+export function countCommandManagementEntries(groups: readonly CommandManagementGroup[]): number {
+  return groups.reduce((total, group) => total + group.entries.length, 0);
+}
+
+export function findCommandManagementEntry(
+  groups: readonly CommandManagementGroup[],
+  commandId: string,
+): CommandManagementEntry | undefined {
+  for (const group of groups) {
+    const entry = group.entries.find((candidate) => candidate.id === commandId);
+    if (entry) {
+      return entry;
+    }
+  }
+
+  return undefined;
+}

package/src/workbench/management/command-inspector-uri.ts

@@ -0,0 +1,26 @@
+const COMMAND_INSPECTOR_URI_PREFIX = 'workbench://command/inspect/' as const;
+
+export function buildCommandInspectorUri(commandId: string): string {
+  return `${COMMAND_INSPECTOR_URI_PREFIX}${encodeURIComponent(commandId)}`;
+}
+
+export function parseCommandInspectorUri(resourceUri: string): string | undefined {
+  if (!resourceUri.startsWith(COMMAND_INSPECTOR_URI_PREFIX)) {
+    return undefined;
+  }
+
+  const encodedId = resourceUri.slice(COMMAND_INSPECTOR_URI_PREFIX.length);
+  if (!encodedId) {
+    return undefined;
+  }
+
+  try {
+    return decodeURIComponent(encodedId);
+  } catch {
+    return undefined;
+  }
+}
+
+export function isCommandInspectorUri(resourceUri: string): boolean {
+  return parseCommandInspectorUri(resourceUri) !== undefined;
+}

package/src/workbench/management/extension-category-display.ts

@@ -0,0 +1,42 @@
+import type { ManagementCardIconTone } from './ManagementCard.js';
+
+export function formatExtensionCategoryLabel(category: string) {
+  switch (category) {
+    case 'feature':
+      return 'Features';
+    case 'editor':
+      return 'Editors';
+    case 'theme':
+      return 'Themes';
+    case 'language':
+      return 'Languages';
+    default:
+      return category.charAt(0).toUpperCase() + category.slice(1);
+  }
+}
+
+export function extensionCategoryIcon(category: string) {
+  switch (category) {
+    case 'theme':
+      return 'symbol-color';
+    case 'language':
+      return 'globe';
+    case 'editor':
+      return 'file-code';
+    default:
+      return 'extensions';
+  }
+}
+
+export function extensionCategoryIconTone(category: string): ManagementCardIconTone {
+  switch (category) {
+    case 'editor':
+      return 'editor';
+    case 'theme':
+      return 'theme';
+    case 'language':
+      return 'language';
+    default:
+      return 'feature';
+  }
+}

package/src/workbench/management/format-command-run-state.ts

@@ -0,0 +1,19 @@
+import type { CommandManagementRunState } from './types.js';
+
+export function formatCommandRunState(
+  lastRun: CommandManagementRunState | undefined,
+): string | undefined {
+  if (!lastRun) {
+    return undefined;
+  }
+
+  if (lastRun.status === 'running') {
+    return `Running ${lastRun.commandId}…`;
+  }
+
+  if (lastRun.status === 'error') {
+    return lastRun.message ? `Failed: ${lastRun.message}` : `Failed: ${lastRun.commandId}`;
+  }
+
+  return `Ran ${lastRun.commandId}`;
+}