@workbench-kit/react 0.0.2-prototype.0.2.30 → 0.0.2-prototype.0.2.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workbench-kit/react",
-  "version": "0.0.2-prototype.0.2.30",
+  "version": "0.0.2-prototype.0.2.31",
   "private": false,
   "sideEffects": [
     "**/*.css"
@@ -73,15 +73,15 @@
     "@vscode/codicons": "^0.0.45",
     "remark-gfm": "^4.0.1",
     "rehype-sanitize": "^6.0.0",
-    "@workbench-kit/monaco": "0.0.2-prototype.0.2.30",
-    "@workbench-kit/jdw": "0.0.2-prototype.0.2.30",
-    "@workbench-kit/platform": "0.0.2-prototype.0.2.30",
-    "@workbench-kit/contracts": "0.0.2-prototype.0.2.30",
-    "@workbench-kit/services": "0.0.2-prototype.0.2.30",
-    "@workbench-kit/runtime": "0.0.2-prototype.0.2.30",
-    "@workbench-kit/tokens": "0.0.2-prototype.0.2.30",
-    "@workbench-kit/workspace": "0.0.2-prototype.0.2.30",
-    "@workbench-kit/adapters": "0.0.2-prototype.0.2.30"
+    "@workbench-kit/adapters": "0.0.2-prototype.0.2.31",
+    "@workbench-kit/contracts": "0.0.2-prototype.0.2.31",
+    "@workbench-kit/jdw": "0.0.2-prototype.0.2.31",
+    "@workbench-kit/monaco": "0.0.2-prototype.0.2.31",
+    "@workbench-kit/platform": "0.0.2-prototype.0.2.31",
+    "@workbench-kit/runtime": "0.0.2-prototype.0.2.31",
+    "@workbench-kit/services": "0.0.2-prototype.0.2.31",
+    "@workbench-kit/tokens": "0.0.2-prototype.0.2.31",
+    "@workbench-kit/workspace": "0.0.2-prototype.0.2.31"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/workbench/management/CommandManagementSidebar.tsx

@@ -138,6 +138,20 @@ export function CommandManagementSidebar({
     focusCommandEntry(getNextEntryId(currentEntryId ?? activeEntryId, event.key));
   };
 
+  const renderCommandEntry = (entry: CommandManagementEntry) => (
+    <CommandSidebarListItem
+      key={entry.id}
+      active={entry.id === activeEntryId}
+      disabled={entry.status !== 'available' || !onRunCommand || lastRun?.status === 'running'}
+      entry={entry}
+      onActivate={() => setActiveEntryId(entry.id)}
+      onInspect={onInspectCommand}
+      onRun={() => {
+        void onRunCommand?.(entry.id);
+      }}
+    />
+  );
+
   return (
     <SideBarViewFrame
       actions={
@@ -199,21 +213,7 @@ export function CommandManagementSidebar({
           className={commandManagementListClassName}
           onKeyDown={handleListKeyDown}
         >
-          {filteredGroups[0]?.entries.map((entry) => (
-            <CommandSidebarListItem
-              key={entry.id}
-              active={entry.id === activeEntryId}
-              disabled={
-                entry.status !== 'available' || !onRunCommand || lastRun?.status === 'running'
-              }
-              entry={entry}
-              onActivate={() => setActiveEntryId(entry.id)}
-              onInspect={onInspectCommand}
-              onRun={() => {
-                void onRunCommand?.(entry.id);
-              }}
-            />
-          ))}
+          {filteredGroups[0]?.entries.map(renderCommandEntry)}
         </SideBarList>
       ) : (
         <WorkbenchSidebarSectionStack
@@ -224,21 +224,7 @@ export function CommandManagementSidebar({
                 className={commandManagementListClassName}
                 onKeyDown={handleListKeyDown}
               >
-                {group.entries.map((entry) => (
-                  <CommandSidebarListItem
-                    key={entry.id}
-                    active={entry.id === activeEntryId}
-                    disabled={
-                      entry.status !== 'available' || !onRunCommand || lastRun?.status === 'running'
-                    }
-                    entry={entry}
-                    onActivate={() => setActiveEntryId(entry.id)}
-                    onInspect={onInspectCommand}
-                    onRun={() => {
-                      void onRunCommand?.(entry.id);
-                    }}
-                  />
-                ))}
+                {group.entries.map(renderCommandEntry)}
               </SideBarList>
             ),
             id: `command-group-${group.id}`,

package/src/workbench/schema/workbenchDocumentRenderer.tsx

@@ -219,56 +219,16 @@ function renderResizeHandle(
   );
 }
 
-const nodeRendererRegistry: Record<string, (params: NodeRendererProps) => ReactNode> = {
-  frame: ({
-    node,
-    style,
-    children,
-    onClick,
-    onPointerDown,
-    onResizeHandlePointerDown,
-    resizeHandleLabel,
-  }) => (
-    <div
-      key={node.id}
-      data-node-id={node.id}
-      style={style}
-      onClick={onClick}
-      onPointerDown={onPointerDown}
-    >
-      <div style={{ position: 'relative', width: '100%', height: '100%' }}>{children}</div>
-      {renderResizeHandle(resizeHandleLabel, onResizeHandlePointerDown)}
-    </div>
-  ),
-  group: ({
-    node,
-    style,
-    children,
-    onClick,
-    onPointerDown,
-    onResizeHandlePointerDown,
-    resizeHandleLabel,
-  }) => (
-    <div
-      key={node.id}
-      data-node-id={node.id}
-      style={style}
-      onClick={onClick}
-      onPointerDown={onPointerDown}
-    >
-      <div style={{ position: 'relative', width: '100%', height: '100%' }}>{children}</div>
-      {renderResizeHandle(resizeHandleLabel, onResizeHandlePointerDown)}
-    </div>
-  ),
-  component: ({
-    node,
-    style,
-    children,
-    onClick,
-    onPointerDown,
-    onResizeHandlePointerDown,
-    resizeHandleLabel,
-  }) => (
+function renderContainerNode({
+  node,
+  style,
+  children,
+  onClick,
+  onPointerDown,
+  onResizeHandlePointerDown,
+  resizeHandleLabel,
+}: NodeRendererProps) {
+  return (
     <div
       key={node.id}
       data-node-id={node.id}
@@ -279,35 +239,39 @@ const nodeRendererRegistry: Record<string, (params: NodeRendererProps) => ReactN
       <div style={{ position: 'relative', width: '100%', height: '100%' }}>{children}</div>
       {renderResizeHandle(resizeHandleLabel, onResizeHandlePointerDown)}
     </div>
-  ),
-  instance: ({
-    node,
-    style,
-    children,
-    onClick,
-    onPointerDown,
-    onResizeHandlePointerDown,
-    resizeHandleLabel,
-  }) => (
+  );
+}
+
+function renderEmptyNode({
+  node,
+  style,
+  onClick,
+  onPointerDown,
+  onResizeHandlePointerDown,
+  resizeHandleLabel,
+}: NodeRendererProps) {
+  return (
     <div
       key={node.id}
       data-node-id={node.id}
       style={style}
-      onClick={onClick}
+      onClick={wrapNodeClick(onClick)}
       onPointerDown={onPointerDown}
     >
-      <div style={{ position: 'relative', width: '100%', height: '100%' }}>{children}</div>
       {renderResizeHandle(resizeHandleLabel, onResizeHandlePointerDown)}
     </div>
-  ),
-  rectangle: ({
-    node,
-    style,
-    onClick,
-    onPointerDown,
-    onResizeHandlePointerDown,
-    resizeHandleLabel,
-  }) => (
+  );
+}
+
+function renderContentNode({
+  node,
+  style,
+  onClick,
+  onPointerDown,
+  onResizeHandlePointerDown,
+  resizeHandleLabel,
+}: NodeRendererProps) {
+  return (
     <div
       key={node.id}
       data-node-id={node.id}
@@ -315,9 +279,18 @@ const nodeRendererRegistry: Record<string, (params: NodeRendererProps) => ReactN
       onClick={wrapNodeClick(onClick)}
       onPointerDown={onPointerDown}
     >
+      {(node as { content?: string }).content ?? ''}
       {renderResizeHandle(resizeHandleLabel, onResizeHandlePointerDown)}
     </div>
-  ),
+  );
+}
+
+const nodeRendererRegistry: Record<string, (params: NodeRendererProps) => ReactNode> = {
+  frame: renderContainerNode,
+  group: renderContainerNode,
+  component: renderContainerNode,
+  instance: renderContainerNode,
+  rectangle: renderEmptyNode,
   circle: ({
     node,
     style,
@@ -336,18 +309,7 @@ const nodeRendererRegistry: Record<string, (params: NodeRendererProps) => ReactN
       {renderResizeHandle(resizeHandleLabel, onResizeHandlePointerDown)}
     </div>
   ),
-  text: ({ node, style, onClick, onPointerDown, onResizeHandlePointerDown, resizeHandleLabel }) => (
-    <div
-      key={node.id}
-      data-node-id={node.id}
-      style={style}
-      onClick={wrapNodeClick(onClick)}
-      onPointerDown={onPointerDown}
-    >
-      {(node as { content?: string }).content ?? ''}
-      {renderResizeHandle(resizeHandleLabel, onResizeHandlePointerDown)}
-    </div>
-  ),
+  text: renderContentNode,
   image: ({
     node,
     style,
@@ -394,43 +356,8 @@ const nodeRendererRegistry: Record<string, (params: NodeRendererProps) => ReactN
       </div>
     );
   },
-  vector: ({
-    node,
-    style,
-    onClick,
-    onPointerDown,
-    onResizeHandlePointerDown,
-    resizeHandleLabel,
-  }) => (
-    <div
-      key={node.id}
-      data-node-id={node.id}
-      style={style}
-      onClick={wrapNodeClick(onClick)}
-      onPointerDown={onPointerDown}
-    >
-      {(node as { content?: string }).content ?? ''}
-      {renderResizeHandle(resizeHandleLabel, onResizeHandlePointerDown)}
-    </div>
-  ),
-  unknown: ({
-    node,
-    style,
-    onClick,
-    onPointerDown,
-    onResizeHandlePointerDown,
-    resizeHandleLabel,
-  }) => (
-    <div
-      key={node.id}
-      data-node-id={node.id}
-      style={style}
-      onClick={wrapNodeClick(onClick)}
-      onPointerDown={onPointerDown}
-    >
-      {renderResizeHandle(resizeHandleLabel, onResizeHandlePointerDown)}
-    </div>
-  ),
+  vector: renderContentNode,
+  unknown: renderEmptyNode,
 };
 
 function renderNode(

package/src/workbench/shell/WorkbenchStandaloneShell.tsx

@@ -391,6 +391,15 @@ export function WorkbenchStandaloneShell<
       }),
     );
   };
+  const togglePrimarySidebar = () => {
+    const nextSidebarVisible = !isPrimarySidebarVisible;
+    setPrimarySidebarLifecycle(
+      activeActivityId,
+      nextSidebarVisible,
+      nextSidebarVisible ? 'sidebar-show' : 'sidebar-hide',
+    );
+    shell.togglePrimarySidebar();
+  };
   const createContext = ({
     activityId,
     shell,
@@ -403,15 +412,7 @@ export function WorkbenchStandaloneShell<
       isPrimarySidebarVisible,
       openSettings: shell.openSettings,
       showActivity,
-      togglePrimarySidebar: () => {
-        const nextSidebarVisible = !isPrimarySidebarVisible;
-        setPrimarySidebarLifecycle(
-          activeActivityId,
-          nextSidebarVisible,
-          nextSidebarVisible ? 'sidebar-show' : 'sidebar-hide',
-        );
-        shell.togglePrimarySidebar();
-      },
+      togglePrimarySidebar,
     },
     isPrimarySidebarVisible,
     isSettingsOpen,
@@ -430,15 +431,7 @@ export function WorkbenchStandaloneShell<
       );
       shell.setPrimarySidebarVisible(isVisible);
     },
-    togglePrimarySidebar: () => {
-      const nextSidebarVisible = !isPrimarySidebarVisible;
-      setPrimarySidebarLifecycle(
-        activeActivityId,
-        nextSidebarVisible,
-        nextSidebarVisible ? 'sidebar-show' : 'sidebar-hide',
-      );
-      shell.togglePrimarySidebar();
-    },
+    togglePrimarySidebar,
     openSettings: shell.openSettings,
     closeSettings: shell.closeSettings,
     setSettingsCategoryId: shell.setSettingsCategoryId,

package/src/test-utils/workbenchMonacoMock.tsx

@@ -1,57 +0,0 @@
-import type { ReactNode } from 'react';
-import { createElement } from 'react';
-
-export interface MockWorkbenchMonacoEditorProps {
-  language?: string;
-  onChange?: (value?: string) => void;
-  path?: string;
-  theme?: string;
-  value?: string;
-}
-
-export interface MockWorkbenchMonacoDiffEditorProps {
-  language?: string;
-  modified?: string;
-  onModifiedChange?: (value: string) => void;
-  original?: string;
-  readOnly?: boolean;
-  theme?: string;
-}
-
-export function createWorkbenchMonacoMockModule(
-  renderEditor?: (props: MockWorkbenchMonacoEditorProps) => ReactNode,
-) {
-  const defaultRender = ({ value }: MockWorkbenchMonacoEditorProps) =>
-    createElement('div', { 'data-testid': 'monaco-editor' }, value ?? 'Mocked Monaco Editor');
-
-  const defaultDiffRender = ({ modified, original }: MockWorkbenchMonacoDiffEditorProps) =>
-    createElement(
-      'div',
-      { 'data-testid': 'monaco-diff-editor' },
-      original ?? '',
-      '\n---\n',
-      modified ?? '',
-    );
-
-  return {
-    WorkbenchMonacoEditor: renderEditor ?? defaultRender,
-    WorkbenchMonacoDiffEditor: defaultDiffRender,
-    DiffEditor: defaultDiffRender,
-    useMonacoWorkbenchThemeSync: () => undefined,
-    prepareMonacoWorkbenchEditor: () => undefined,
-    monacoThemeForWorkspaceTheme: (theme: string) =>
-      theme === 'light' ? 'workbench-kit-light' : 'workbench-kit-dark',
-    MONACO_DARK_THEME_ID: 'workbench-kit-dark',
-    MONACO_LIGHT_THEME_ID: 'workbench-kit-light',
-    monaco: {
-      KeyMod: { CtrlCmd: 1 },
-      KeyCode: { KeyS: 1 },
-      editor: {
-        defineTheme: () => undefined,
-        setTheme: () => undefined,
-        onDidChangeMarkers: () => ({ dispose: () => undefined }),
-        getModelMarkers: () => [],
-      },
-    },
-  };
-}