@workbench-kit/react 0.0.2-prototype.0.2.11 → 0.0.2-prototype.0.2.14

package/src/workbench/management/KeybindingCaptureField.tsx

@@ -2,6 +2,7 @@ import { useEffect, useId, useRef, useState, type KeyboardEvent } from 'react';
 import { formatKeybindingLabel } from '@workbench-kit/platform';
 import { Button } from '../../primitives/button';
 import { cx } from '../../utils/cx';
+import { normalizeKeyToken } from '../../utils/normalizeKeyToken';
 
 export interface KeybindingCaptureFieldProps {
   ariaLabel?: string | undefined;
@@ -131,12 +132,3 @@ function normalizeKeybindingKeyFromEvent(
   parts.push(normalizeKeyToken(event.key));
   return parts.join('+');
 }
-
-function normalizeKeyToken(token: string): string {
-  const key = token.trim().toLowerCase();
-  if (key === 'del') return 'delete';
-  if (key === 'esc') return 'escape';
-  if (key === 'return') return 'enter';
-  if (key === 'spacebar' || key === 'space') return 'space';
-  return key.length === 1 ? key : key;
-}

package/src/workbench/management/WorkbenchNotice.tsx

@@ -9,6 +9,7 @@ import {
   type ReactNode,
 } from 'react';
 import { IconButton, WorkbenchBanner, WorkbenchBannerMessage } from '../../primitives/index';
+import { cx } from '../../utils/cx';
 
 export type WorkbenchNoticeTone = 'error' | 'info' | 'success' | 'warning';
 export type WorkbenchNoticePosition = 'bottom-center' | 'bottom-right';
@@ -187,7 +188,7 @@ export function useWorkbenchNotice(): WorkbenchNoticeController {
 }
 
 function resolveNoticeViewportClassName(position: WorkbenchNoticePosition): string {
-  return joinClasses(
+  return cx(
     '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',
   );
@@ -205,7 +206,3 @@ function resolveNoticeBannerStyle(tone: WorkbenchNoticeTone): CSSProperties {
     minWidth: 'min(420px, calc(100vw - 32px))',
   };
 }
-
-function joinClasses(...classes: Array<string | undefined>): string {
-  return classes.filter(Boolean).join(' ');
-}

package/src/workbench/management/extension-management-filters.ts

@@ -0,0 +1,38 @@
+import type { ExtensionCatalogBrowseEntry, ExtensionManagementEntry } from './types.js';
+
+export function filterInstalledEntries(
+  entries: readonly ExtensionManagementEntry[],
+  query: string,
+): readonly ExtensionManagementEntry[] {
+  const normalized = query.trim().toLowerCase();
+  if (!normalized) {
+    return entries;
+  }
+
+  return entries.filter((entry) =>
+    [entry.displayName, entry.id, entry.category, entry.description ?? '']
+      .join(' ')
+      .toLowerCase()
+      .includes(normalized),
+  );
+}
+
+export function filterBrowseEntries(
+  entries: readonly ExtensionCatalogBrowseEntry[],
+  query: string,
+  category?: string,
+): readonly ExtensionCatalogBrowseEntry[] {
+  const normalized = query.trim().toLowerCase();
+  return entries.filter((entry) => {
+    if (category && entry.category !== category) {
+      return false;
+    }
+    if (!normalized) {
+      return true;
+    }
+    return [entry.displayName, entry.id, entry.category, entry.description]
+      .join(' ')
+      .toLowerCase()
+      .includes(normalized);
+  });
+}

package/src/workbench/settings/StructuredDataForm.tsx

@@ -37,6 +37,7 @@ import {
   type WorkbenchStructuredDataSchemaFieldInputProps,
   type WorkbenchStructuredDataTextArrayInputProps,
 } from './structuredDataSchema';
+import { isRenderableWorkbenchStructuredDataFormError } from './structuredDataFormModel';
 
 export function WorkbenchStructuredDataForm({
   ariaLabel,
@@ -156,10 +157,6 @@ export function WorkbenchStructuredDataForm({
   );
 }
 
-function isRenderableWorkbenchStructuredDataFormError(error: ReactNode) {
-  return error !== undefined && error !== null && error !== false && error !== '';
-}
-
 function StructuredDataSection({
   data,
   disabled,

package/src/workbench/settings/structuredDataFormModel.ts

@@ -135,6 +135,7 @@ function isWorkbenchStructuredDataFormEmptyValue(value: WorkbenchStructuredDataF
   return value === '' || value === false;
 }
 
-function isRenderableWorkbenchStructuredDataFormError(error: ReactNode) {
+/** True when a form field error should render (non-empty ReactNode). */
+export function isRenderableWorkbenchStructuredDataFormError(error: ReactNode) {
   return error !== undefined && error !== null && error !== false && error !== '';
 }

package/src/workbench/shell/WorkbenchShell.tsx

@@ -8,6 +8,16 @@ import { DEFAULT_PRIMARY_SIDEBAR_SIZE_PX } from './shellState';
 import { suppressNativeBrowserContextMenu } from '../commands/workbenchContextMenu';
 import { WorkbenchOverlaysProvider } from '../chrome/workbenchOverlaysContext';
 
+const DEFAULT_BOTTOM_PANEL_SIZE_PERCENT = 30;
+
+function clampBottomPanelSizePercent(value: number): number {
+  return Math.min(70, Math.max(10, value));
+}
+
+function clampBottomPanelPrimarySizePercent(value: number): number {
+  return Math.min(90, Math.max(30, value));
+}
+
 export type WorkbenchShellActivityBarPosition = 'left' | 'top';
 
 export interface WorkbenchShellProps {
@@ -25,10 +35,18 @@ export interface WorkbenchShellProps {
   bottomPanel?: {
     isVisible: boolean;
     node: ReactNode;
+    /**
+     * Panel track size as a percent of the vertical editor+panel split.
+     * When set with `onSizePercentChange`, the split is controlled.
+     */
+    sizePercent?: number;
+    onSizePercentChange?: (sizePercent: number) => void;
     className?: string;
     style?: CSSProperties;
   };
   compactStatus?: boolean;
+  /** Accessible name for the status bar region (default “Status bar”). */
+  statusBarAriaLabel?: string;
   onStatusItemActivate?: (item: StatusBarItemModel) => void;
   primarySidebar?: {
     isVisible: boolean;
@@ -58,6 +76,7 @@ export function WorkbenchShell({
   auxiliarySidebar,
   bottomPanel,
   compactStatus = true,
+  statusBarAriaLabel,
   onStatusItemActivate,
   overlays,
   primarySidebar,
@@ -85,17 +104,36 @@ export function WorkbenchShell({
   const isBottomPanelCollapsed = bottomPanel !== undefined && !bottomPanel.isVisible;
   const isAuxiliarySidebarCollapsed = auxiliarySidebar !== undefined && !auxiliarySidebar.isVisible;
 
+  const bottomPanelSizePercent =
+    bottomPanel?.onSizePercentChange !== undefined
+      ? (bottomPanel.sizePercent ?? DEFAULT_BOTTOM_PANEL_SIZE_PERCENT)
+      : undefined;
+  const bottomPanelPrimarySizePercent =
+    bottomPanelSizePercent !== undefined
+      ? clampBottomPanelPrimarySizePercent(100 - bottomPanelSizePercent)
+      : undefined;
+
   const editorArea = bottomPanel ? (
     <SplitView
       className={cx(
         bottomPanel.className,
         isBottomPanelCollapsed && 'ui-workbench-split-view--secondary-collapsed',
       )}
-      defaultPrimarySizePercent={70}
+      defaultPrimarySizePercent={100 - DEFAULT_BOTTOM_PANEL_SIZE_PERCENT}
       maxPrimarySizePercent={90}
       minPrimarySizePercent={30}
+      onPrimarySizePercentChange={
+        bottomPanel.onSizePercentChange
+          ? (primarySizePercent) => {
+              bottomPanel.onSizePercentChange?.(
+                clampBottomPanelSizePercent(100 - primarySizePercent),
+              );
+            }
+          : undefined
+      }
       orientation="vertical"
       primary={secondaryArea}
+      primarySizePercent={bottomPanelPrimarySizePercent}
       secondary={bottomPanel.node}
     />
   ) : (
@@ -178,6 +216,7 @@ export function WorkbenchShell({
             {body}
           </div>
           <StatusBar
+            aria-label={statusBarAriaLabel}
             compact={compactStatus}
             sections={statusSections}
             onItemActivate={onStatusItemActivate}

package/src/workbench/shell/WorkbenchShellTitleBarLayoutControls.tsx

@@ -2,6 +2,7 @@ import '../chrome/workbench-shell-titlebar.css';
 import type { JSX } from 'react';
 
 import { IconButton } from '../../primitives/icon-button';
+import { cx } from '../../utils/cx';
 
 export interface WorkbenchShellTitleBarLayoutControlsProps {
   readonly isAuxiliarySidebarVisible?: boolean;
@@ -18,10 +19,6 @@ export interface WorkbenchShellTitleBarLayoutControlsProps {
   readonly secondarySidebarShowLabel?: string;
 }
 
-function joinClasses(...classNames: Array<string | false | null | undefined>): string {
-  return classNames.filter(Boolean).join(' ');
-}
-
 export function WorkbenchShellTitleBarLayoutControls({
   isAuxiliarySidebarVisible = false,
   isPanelVisible = false,
@@ -40,7 +37,7 @@ export function WorkbenchShellTitleBarLayoutControls({
     <div className="workbench-shell-titlebar__layout-controls">
       <IconButton
         aria-pressed={isPrimarySidebarVisible}
-        className={joinClasses(
+        className={cx(
           'workbench-shell-titlebar__layout-control',
           isPrimarySidebarVisible && 'workbench-shell-titlebar__layout-control--active',
         )}
@@ -52,7 +49,7 @@ export function WorkbenchShellTitleBarLayoutControls({
       {onTogglePanel ? (
         <IconButton
           aria-pressed={isPanelVisible}
-          className={joinClasses(
+          className={cx(
             'workbench-shell-titlebar__layout-control',
             isPanelVisible && 'workbench-shell-titlebar__layout-control--active',
           )}
@@ -65,7 +62,7 @@ export function WorkbenchShellTitleBarLayoutControls({
       {onToggleAuxiliarySidebar ? (
         <IconButton
           aria-pressed={isAuxiliarySidebarVisible}
-          className={joinClasses(
+          className={cx(
             'workbench-shell-titlebar__layout-control',
             isAuxiliarySidebarVisible && 'workbench-shell-titlebar__layout-control--active',
           )}

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

@@ -32,6 +32,53 @@
   border-top: 1px solid var(--vscode-panel-border, var(--color-border));
 }
 
+.workbench-bottom-panel__header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: stretch;
+  gap: 0;
+  min-height: 28px;
+  border-bottom: 1px solid var(--vscode-panel-border, var(--color-border));
+  background: var(--vscode-panel-background, var(--color-surface));
+}
+
+.workbench-bottom-panel__tab {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: var(--color-text-muted);
+  font: inherit;
+  font-size: 12px;
+  padding: 4px 12px;
+  cursor: pointer;
+}
+
+.workbench-bottom-panel__tab:hover {
+  color: var(--color-text);
+}
+
+.workbench-bottom-panel__tab--active {
+  color: var(--color-text);
+  box-shadow: inset 0 -2px 0 var(--color-accent, var(--color-primary));
+}
+
+.workbench-bottom-panel__body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 8px 12px;
+}
+
+.workbench-bottom-panel__view {
+  min-height: 0;
+}
+
+.workbench-bottom-panel__empty {
+  color: var(--color-text-muted);
+  font-size: 12px;
+  padding: 8px 12px;
+}
+
 .ui-workbench-activity-bar__item {
   --ui-button-width: var(--workbench-activity-bar-item-size);
   --ui-button-min-width: 0;