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

package/src/test-utils/workbenchMonacoMock.tsx

@@ -0,0 +1,37 @@
+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 function createWorkbenchMonacoMockModule(
+  renderEditor?: (props: MockWorkbenchMonacoEditorProps) => ReactNode,
+) {
+  const defaultRender = ({ value }: MockWorkbenchMonacoEditorProps) =>
+    createElement('div', { 'data-testid': 'monaco-editor' }, value ?? 'Mocked Monaco Editor');
+
+  return {
+    WorkbenchMonacoEditor: renderEditor ?? defaultRender,
+    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: () => [],
+      },
+    },
+  };
+}

package/src/utils/dragMime.ts

@@ -0,0 +1,89 @@
+export interface TypedDragMimeOptions<T> {
+  readonly mimeType: string;
+  readonly serialize: (value: T) => string;
+  readonly deserialize: (raw: string) => T | null;
+  /** When true, also write/read `text/plain`. Default: false. */
+  readonly textPlainFallback?: boolean;
+  /** Default: `'copyMove'`. */
+  readonly effectAllowed?: DataTransfer['effectAllowed'];
+}
+
+export interface TypedDragMime<T> {
+  write(dataTransfer: DataTransfer, value: T): void;
+  read(dataTransfer: DataTransfer | null): T | null;
+  has(dataTransfer: DataTransfer | null): boolean;
+}
+
+/**
+ * Host-supplied MIME + codecs for `DataTransfer` write/read/has.
+ *
+ * Prefer the custom MIME for privileged drop decisions; treat `text/plain`
+ * fallback as interoperability only (some environments strip custom types).
+ * Plaintext alone never satisfies `has()`.
+ */
+export function createTypedDragMime<T>(options: TypedDragMimeOptions<T>): TypedDragMime<T> {
+  const {
+    mimeType,
+    serialize,
+    deserialize,
+    textPlainFallback = false,
+    effectAllowed = 'copyMove',
+  } = options;
+
+  return {
+    write(dataTransfer, value) {
+      const payload = serialize(value);
+      dataTransfer.setData(mimeType, payload);
+      if (textPlainFallback) {
+        dataTransfer.setData('text/plain', payload);
+      }
+      dataTransfer.effectAllowed = effectAllowed;
+    },
+    read(dataTransfer) {
+      if (dataTransfer == null) {
+        return null;
+      }
+
+      const custom = dataTransfer.getData(mimeType).trim();
+      if (custom.length > 0) {
+        return deserialize(custom);
+      }
+
+      if (textPlainFallback) {
+        const plain = dataTransfer.getData('text/plain').trim();
+        if (plain.length > 0) {
+          return deserialize(plain);
+        }
+      }
+
+      return null;
+    },
+    has(dataTransfer) {
+      if (dataTransfer == null) {
+        return false;
+      }
+
+      return Array.from(dataTransfer.types).includes(mimeType);
+    },
+  };
+}
+
+/** Convenience factory for string id / label payloads. */
+export function createStringDragMime(options: {
+  mimeType: string;
+  textPlainFallback?: boolean;
+  effectAllowed?: DataTransfer['effectAllowed'];
+}): TypedDragMime<string> {
+  return createTypedDragMime({
+    mimeType: options.mimeType,
+    // Pass concrete defaults so linked consumers with
+    // `exactOptionalPropertyTypes` can typecheck the source file.
+    textPlainFallback: options.textPlainFallback ?? false,
+    effectAllowed: options.effectAllowed ?? 'copyMove',
+    serialize: (value) => value,
+    deserialize: (raw) => {
+      const trimmed = raw.trim();
+      return trimmed.length === 0 ? null : trimmed;
+    },
+  });
+}

package/src/utils/useWorkbenchMediaImage.ts

@@ -0,0 +1,37 @@
+import { useCallback, useEffect, useState } from 'react';
+
+export function hasWorkbenchMediaImageSource(
+  imageUrl: string | null | undefined,
+): imageUrl is string {
+  return imageUrl !== null && imageUrl !== undefined && imageUrl.trim() !== '';
+}
+
+export interface UseWorkbenchMediaImageResult {
+  readonly hasSource: boolean;
+  readonly imageSrc: string | undefined;
+  readonly onImageError: () => void;
+  readonly shouldShowImage: boolean;
+}
+
+export function useWorkbenchMediaImage(
+  imageUrl: string | null | undefined,
+): UseWorkbenchMediaImageResult {
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => {
+    setFailed(false);
+  }, [imageUrl]);
+
+  const onImageError = useCallback(() => {
+    setFailed(true);
+  }, []);
+
+  const hasSource = hasWorkbenchMediaImageSource(imageUrl);
+
+  return {
+    hasSource,
+    imageSrc: hasSource ? imageUrl : undefined,
+    onImageError,
+    shouldShowImage: hasSource && !failed,
+  };
+}

package/src/widget-asset/WidgetAssetEditor.tsx

@@ -11,7 +11,8 @@ import {
   type WorkspaceAssetFileRef,
 } from '@workbench-kit/jdw';
 
-import { JdwPreview } from '../jdw/JdwPreview.js';
+import { JdwPreviewViewport } from '../jdw/JdwPreviewViewport.js';
+import { WorkbenchLabeledPane } from '../layout/panel';
 import { WidgetAssetSourceEditor } from './WidgetAssetSourceEditor.js';
 import type { WorkspaceEditorTheme } from '../workbench/workspace/WorkspaceEditor.js';
 import { WorkbenchPropertyHint, WorkbenchPropertyPanel } from '../layout/WorkbenchPropertyPanel';
@@ -128,12 +129,13 @@ export function WidgetAssetEditor({
             />
           </section>
         ) : null}
-        <section aria-label="Asset preview" className="widget-asset-editor__preview">
-          <header className="widget-asset-editor__preview-header">Placement preview</header>
-          <div className="widget-asset-editor__preview-body">
-            <JdwPreview json={previewJson} registry={registry} />
-          </div>
-        </section>
+        <WorkbenchLabeledPane
+          aria-label="Asset preview"
+          className="widget-asset-editor__preview"
+          title="Placement preview"
+        >
+          <JdwPreviewViewport json={previewJson} registry={registry} />
+        </WorkbenchLabeledPane>
       </div>
     </div>
   );

package/src/widget-asset/WidgetAssetModeControls.tsx

@@ -1,4 +1,4 @@
-import { IconButton } from '../primitives/IconButton';
+import { IconButton } from '../primitives/icon-button';
 import { cx } from '../utils/cx';
 import type { WidgetAssetViewMode } from './widget-asset-mode.js';
 

package/src/widget-asset/WidgetAssetWorkbench.tsx

@@ -1,11 +1,12 @@
 import { useState, type ReactNode } from 'react';
 import type { WidgetRegistryContract } from '@workbench-kit/contracts';
 
-import { Panel, PanelBody, PanelHeader } from '../layout/Panel';
-import { Button } from '../primitives/Button';
-import { Toolbar } from '../primitives/Toolbar';
+import { Panel, PanelBody, PanelHeader } from '../layout/panel';
+import { Button } from '../primitives/button';
+import { Toolbar } from '../primitives/toolbar';
 import type { WorkspaceEditorTheme } from '../workbench/workspace/WorkspaceEditor.js';
 import { fileNameOfPath } from '../workbench/workspace/path';
+import { WorkspacePathLabel } from '../workbench/workspace/WorkspacePathLabel';
 import type { WorkspaceFile } from '../workbench/workspace/types.js';
 import { WidgetAssetEditor } from './WidgetAssetEditor.js';
 import { WidgetAssetModeControls } from './WidgetAssetModeControls.js';
@@ -83,9 +84,7 @@ export function WidgetAssetWorkbench({
         <span className="widget-asset-workbench__title">
           {resolvedTitle}
           {path ? (
-            <span className="widget-asset-workbench__path" title={path}>
-              {path}
-            </span>
+            <WorkspacePathLabel className="widget-asset-workbench__path" path={path} />
           ) : null}
           {dirty ? (
             <span className="widget-asset-workbench__dirty-indicator" title="Unsaved changes">

package/src/widget-studio/create-widget-studio-workspace-editor.tsx

@@ -16,8 +16,7 @@ export interface WidgetStudioRenderContext extends WorkspaceEditorPanelRenderEdi
 export interface CreateWidgetStudioWorkspaceEditorOptions {
   readonly registry?: WidgetRegistryContract<unknown> | undefined;
   readonly resolveAssetCatalog?:
-    | ((files: readonly WorkspaceFile[]) => WidgetAssetCatalogContract)
-    | undefined;
+    ((files: readonly WorkspaceFile[]) => WidgetAssetCatalogContract) | undefined;
 }
 
 export function createWidgetStudioWorkspaceEditorRenderer(

package/src/widget-studio/index.ts

@@ -4,4 +4,7 @@ export type {
   WidgetStudioRenderContext,
 } from './create-widget-studio-workspace-editor.js';
 export { createBuiltinWidgetAssetCatalog } from './builtin-widget-asset-catalog.js';
-export { resolveWidgetStudioAssetCatalog } from './resolve-widget-studio-asset-catalog.js';
+export {
+  resolveWidgetStudioAssetCatalog,
+  type ResolveWidgetStudioAssetCatalogOptions,
+} from './resolve-widget-studio-asset-catalog.js';

package/src/widget-studio/resolve-widget-studio-asset-catalog.ts

@@ -1,5 +1,6 @@
 import type { WidgetAssetCatalogContract } from '@workbench-kit/contracts';
 import {
+  createWidgetAssetCatalogFromJdwDocuments,
   createWidgetAssetCatalogFromWorkspaceFiles,
   mergeWidgetAssetCatalogs,
 } from '@workbench-kit/jdw';
@@ -7,20 +8,36 @@ import {
 import type { WorkspaceFile } from '../workbench/workspace/types.js';
 import { createBuiltinWidgetAssetCatalog } from './builtin-widget-asset-catalog.js';
 
+export interface ResolveWidgetStudioAssetCatalogOptions {
+  /** Paths to omit from the JDW-document catalog (usually the active editor file). */
+  readonly excludeDocumentPaths?: readonly string[] | undefined;
+}
+
 /**
- * Resolves the widget studio palette from built-in assets plus workspace asset packages
- * (`<slug>/manifest.json` + `content.json`). Workspace assets override built-ins when they
- * share the same `name`.
+ * Resolves the widget studio / Form palette from:
+ * 1. built-in assets
+ * 2. workspace asset packages (`manifest.json` + `content.json`)
+ * 3. workspace `*.jdw.json` documents (for example `jdw/parts/*`)
+ *
+ * Later catalogs override earlier entries when they share the same `id`.
  */
 export function resolveWidgetStudioAssetCatalog(
   files: readonly WorkspaceFile[],
+  options: ResolveWidgetStudioAssetCatalogOptions = {},
 ): WidgetAssetCatalogContract {
-  const workspaceCatalog = createWidgetAssetCatalogFromWorkspaceFiles(
-    files.map((file) => ({
-      path: file.path,
-      content: file.content,
-    })),
-  );
+  const workspaceFiles = files.map((file) => ({
+    path: file.path,
+    content: file.content,
+  }));
 
-  return mergeWidgetAssetCatalogs(createBuiltinWidgetAssetCatalog(), workspaceCatalog);
+  const packageCatalog = createWidgetAssetCatalogFromWorkspaceFiles(workspaceFiles);
+  const documentCatalog = createWidgetAssetCatalogFromJdwDocuments(workspaceFiles, {
+    excludePaths: options.excludeDocumentPaths,
+  });
+
+  return mergeWidgetAssetCatalogs(
+    createBuiltinWidgetAssetCatalog(),
+    packageCatalog,
+    documentCatalog,
+  );
 }

package/src/widget-tree/WidgetAssetPalette.tsx

@@ -1,15 +1,20 @@
+import type { DragEvent } from 'react';
 import type { WidgetPlacementAsset } from '@workbench-kit/contracts';
 import type { GenericWidget } from '@workbench-kit/jdw';
 
 import { WorkbenchPropertyHint } from '../layout/WorkbenchPropertyPanel';
 import { cxCodicon } from '../utils/codicon';
 import { cx } from '../utils/cx';
+import { writeWidgetPlacementAssetDragData } from './widget-placement-asset-dnd.js';
 import { canAddChildren } from './widget-tree-layout.js';
 
 const CATEGORY_LABELS: Record<string, string> = {
   content: 'Content',
   layout: 'Layout',
   template: 'Templates',
+  parts: 'Parts',
+  composed: 'Composed',
+  documents: 'Documents',
 };
 
 export interface WidgetAssetPaletteProps {
@@ -25,18 +30,36 @@ export function WidgetAssetPalette({
   readOnly = false,
   selectedContainer,
 }: WidgetAssetPaletteProps) {
-  const canPlace = canAddChildren(selectedContainer) && !readOnly;
+  const canClickPlace = canAddChildren(selectedContainer) && !readOnly;
+  const canDrag = !readOnly;
   const categories = Object.keys(assetsByCategory);
 
+  const handleAssetClick = (asset: WidgetPlacementAsset): void => {
+    if (!canClickPlace) return;
+    onPlaceAsset(asset);
+  };
+
+  const handleAssetDragStart = (
+    event: DragEvent<HTMLButtonElement>,
+    asset: WidgetPlacementAsset,
+  ): void => {
+    if (!canDrag) return;
+    writeWidgetPlacementAssetDragData(event.dataTransfer, asset);
+  };
+
   return (
     <div className="widget-tree-asset-palette" data-testid="widget-tree-asset-palette">
-      {!canPlace ? (
+      {readOnly ? (
+        <WorkbenchPropertyHint>Widget assets are read-only in this editor.</WorkbenchPropertyHint>
+      ) : !canClickPlace ? (
         <WorkbenchPropertyHint>
-          Select a container node in Outline to place an asset.
+          Select a container node in Outline to click-add, or drag an asset onto the outline or
+          preview.
         </WorkbenchPropertyHint>
       ) : (
         <WorkbenchPropertyHint>
-          Click an asset to add it to <strong>{selectedContainer?.type ?? 'container'}</strong>.
+          Click an asset to add it to <strong>{selectedContainer?.type ?? 'container'}</strong>, or
+          drag it onto the outline or preview.
         </WorkbenchPropertyHint>
       )}
 
@@ -49,15 +72,20 @@ export function WidgetAssetPalette({
             {assetsByCategory[category]?.map((asset) => (
               <button
                 key={asset.id}
+                aria-disabled={!canClickPlace}
                 className={cx(
                   'widget-tree-asset-palette__card',
-                  !canPlace && 'widget-tree-asset-palette__card--disabled',
+                  canDrag && 'widget-tree-asset-palette__card--draggable',
+                  !canClickPlace && !readOnly && 'widget-tree-asset-palette__card--drop-only',
+                  readOnly && 'widget-tree-asset-palette__card--disabled',
                 )}
                 data-testid={`widget-asset-${asset.id}`}
-                disabled={!canPlace}
+                disabled={readOnly}
+                draggable={canDrag}
                 title={asset.description ?? asset.label}
                 type="button"
-                onClick={() => onPlaceAsset(asset)}
+                onClick={() => handleAssetClick(asset)}
+                onDragStart={(event) => handleAssetDragStart(event, asset)}
               >
                 {asset.icon ? (
                   <i aria-hidden className={cxCodicon(asset.icon)} />

package/src/widget-tree/WidgetInspectorPanel.tsx

@@ -1,3 +1,4 @@
+import type { Ref } from 'react';
 import type {
   WidgetInspectorField,
   WidgetInspectorSection,
@@ -5,8 +6,8 @@ import type {
 } from '@workbench-kit/contracts';
 import type { GenericWidget, WidgetPath } from '@workbench-kit/jdw';
 
-import { Badge } from '../primitives/Badge';
-import { Button } from '../primitives/Button';
+import { Badge } from '../primitives/badge';
+import { Button } from '../primitives/button';
 import {
   WorkbenchPropertyCheckboxRow,
   WorkbenchPropertyColorRow,
@@ -24,6 +25,7 @@ export interface WidgetInspectorPanelProps {
   readonly path: WidgetPath | null;
   readonly parentWidget?: GenericWidget | null | undefined;
   readonly widgetRegistry?: WidgetRegistryContract<unknown> | undefined;
+  readonly panelRef?: Ref<HTMLDivElement> | undefined;
   readonly readOnly?: boolean | undefined;
   readonly onPatch?: ((next: GenericWidget) => void) | undefined;
   readonly onRemove?: (() => void) | undefined;
@@ -33,6 +35,7 @@ export function WidgetInspectorPanel({
   widget,
   path,
   parentWidget = null,
+  panelRef,
   widgetRegistry,
   readOnly = false,
   onPatch,
@@ -43,7 +46,10 @@ export function WidgetInspectorPanel({
   const showPlacement =
     widget &&
     parentType &&
-    (parentType === 'grid' || parentType === 'row' || parentType === 'column');
+    (parentType === 'grid' ||
+      parentType === 'row' ||
+      parentType === 'column' ||
+      parentType === 'stack');
 
   const updateProp = (prop: string, value: unknown) => {
     if (!widget || !path || !onPatch || readOnly) return;
@@ -54,6 +60,8 @@ export function WidgetInspectorPanel({
     <WorkbenchPropertyPanel
       className="widget-tree-inspector"
       data-testid="widget-tree-inspector-panel"
+      ref={panelRef}
+      tabIndex={-1}
     >
       {!widget ? (
         <WorkbenchPropertyHint>Select a node in the outline.</WorkbenchPropertyHint>
@@ -150,6 +158,37 @@ function PlacementSection({
     );
   }
 
+  if (parentType === 'stack') {
+    return (
+      <WorkbenchPropertySection title="Stack placement">
+        <WorkbenchPropertyNumberRow
+          label="Left"
+          disabled={readOnly}
+          value={typeof values.left === 'number' ? values.left : undefined}
+          onValueChange={(next) => onValueChange('left', next)}
+        />
+        <WorkbenchPropertyNumberRow
+          label="Top"
+          disabled={readOnly}
+          value={typeof values.top === 'number' ? values.top : undefined}
+          onValueChange={(next) => onValueChange('top', next)}
+        />
+        <WorkbenchPropertyNumberRow
+          label="Right"
+          disabled={readOnly}
+          value={typeof values.right === 'number' ? values.right : undefined}
+          onValueChange={(next) => onValueChange('right', next)}
+        />
+        <WorkbenchPropertyNumberRow
+          label="Bottom"
+          disabled={readOnly}
+          value={typeof values.bottom === 'number' ? values.bottom : undefined}
+          onValueChange={(next) => onValueChange('bottom', next)}
+        />
+      </WorkbenchPropertySection>
+    );
+  }
+
   return (
     <WorkbenchPropertySection title="Flex placement">
       <WorkbenchPropertyNumberRow
@@ -160,6 +199,17 @@ function PlacementSection({
         value={typeof values.flex === 'number' ? values.flex : undefined}
         onValueChange={(next) => onValueChange('flex', next)}
       />
+      <WorkbenchPropertySelectRow
+        label="Fit"
+        disabled={readOnly}
+        options={[
+          { label: 'Auto', value: '' },
+          { label: 'Tight', value: 'tight' },
+          { label: 'Loose', value: 'loose' },
+        ]}
+        value={typeof values.flexFit === 'string' ? values.flexFit : ''}
+        onValueChange={(next) => onValueChange('flexFit', next.length > 0 ? next : undefined)}
+      />
       <WorkbenchPropertySelectRow
         label="Align"
         disabled={readOnly}

package/src/widget-tree/WidgetSourceEditor.tsx

@@ -1,10 +1,22 @@
 import { useMemo } from 'react';
 import type { WidgetJsonSchema } from '@workbench-kit/contracts';
+import {
+  findPathForLineAndColumn,
+  findSourceRangeForPath,
+  getWidgetAtPath,
+  type GenericWidget,
+  type WidgetPath,
+} from '@workbench-kit/jdw';
 
-import { JsonCodeEditorPane } from '../jdw/JsonCodeEditorPane.js';
+import {
+  JsonCodeEditorPane,
+  type JsonEditorRange,
+  type JsonEditorPosition,
+  type JsonEditorProblem,
+} from '../jdw/JsonCodeEditorPane.js';
+import { JDW_WIDGET_DOCUMENT_MIME } from '../jdw/document.js';
 import type { WorkspaceEditorTheme } from '../workbench/workspace/WorkspaceEditor.js';
 import type { WorkspaceFile } from '../workbench/workspace/types.js';
-import { WIDGET_TREE_DOCUMENT_MIME } from './widget-tree-document.js';
 
 export interface WidgetSourceEditorProps {
   readonly path?: string | undefined;
@@ -12,10 +24,49 @@ export interface WidgetSourceEditorProps {
   readonly onChange: (value: string) => void;
   readonly onSave?: (() => void) | undefined;
   readonly parseError?: string | null | undefined;
+  readonly problems?: readonly JsonEditorProblem[] | undefined;
   readonly jsonSchema?: WidgetJsonSchema | null | undefined;
   readonly readOnly?: boolean | undefined;
+  readonly root?: GenericWidget | null | undefined;
+  readonly selectedPath?: WidgetPath | null | undefined;
   readonly showProblemsPanel?: boolean | undefined;
   readonly theme?: WorkspaceEditorTheme | undefined;
+  readonly onSelectPath?: ((path: WidgetPath) => void) | undefined;
+}
+
+export function resolveWidgetSourceRevealPosition(
+  source: string,
+  path: WidgetPath | null | undefined,
+): JsonEditorPosition | null {
+  const position = resolveWidgetSourceActiveRange(source, path);
+  if (!position) return null;
+
+  return {
+    column: position.startColumn,
+    lineNumber: position.startLineNumber,
+  };
+}
+
+export function resolveWidgetSourceActiveRange(
+  source: string,
+  path: WidgetPath | null | undefined,
+): JsonEditorRange | null {
+  if (!path) return null;
+  return findSourceRangeForPath(source, path);
+}
+
+export function resolveWidgetPathForEditorPosition(
+  source: string,
+  root: GenericWidget | null | undefined,
+  lineNumber: number,
+  column: number,
+): WidgetPath | null {
+  if (!root) return null;
+
+  const pathAtCursor = findPathForLineAndColumn(source, lineNumber, column);
+  if (!pathAtCursor || !getWidgetAtPath(root, pathAtCursor)) return null;
+
+  return pathAtCursor;
 }
 
 export function WidgetSourceEditor({
@@ -24,31 +75,67 @@ export function WidgetSourceEditor({
   onChange,
   onSave,
   parseError = null,
+  problems = [],
   jsonSchema = null,
   readOnly = false,
+  selectedPath = null,
   showProblemsPanel = false,
   theme = 'dark',
+  root = null,
+  onSelectPath,
 }: WidgetSourceEditorProps) {
   const file = useMemo<WorkspaceFile>(
     () => ({
       content: value,
-      mimeType: WIDGET_TREE_DOCUMENT_MIME,
+      mimeType: JDW_WIDGET_DOCUMENT_MIME,
       path,
     }),
     [path, value],
   );
+  const activeSourceRange = useMemo(
+    () => resolveWidgetSourceActiveRange(value, selectedPath),
+    [selectedPath, value],
+  );
+  const revealPosition = useMemo(
+    () =>
+      activeSourceRange
+        ? {
+            column: activeSourceRange.startColumn,
+            lineNumber: activeSourceRange.startLineNumber,
+          }
+        : null,
+    [activeSourceRange?.startColumn, activeSourceRange?.startLineNumber],
+  );
+
+  const handleCursorPositionChange = ({
+    lineNumber,
+    column,
+  }: {
+    lineNumber: number;
+    column: number;
+  }) => {
+    if (!onSelectPath) return;
+
+    const pathAtCursor = resolveWidgetPathForEditorPosition(value, root, lineNumber, column);
+    if (!pathAtCursor) return;
+    onSelectPath(pathAtCursor);
+  };
 
   return (
     <div className="widget-tree-source" data-testid="widget-tree-source">
       <JsonCodeEditorPane
+        activeSourceRange={activeSourceRange}
         documentParseError={parseError}
         file={file}
         jsonSchema={jsonSchema}
+        problems={problems}
         readOnly={readOnly}
+        revealPosition={revealPosition}
         showProblemsPanel={showProblemsPanel}
         theme={theme}
         value={value}
         onChange={onChange}
+        onCursorPositionChange={handleCursorPositionChange}
         onSave={onSave}
       />
     </div>