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

package/src/jdw/JdwPreviewViewport.tsx

@@ -0,0 +1,190 @@
+import { useLayoutEffect, useMemo, useState, type ReactNode } from 'react';
+import type { WidgetRegistryContract } from '@workbench-kit/contracts';
+import {
+  DEFAULT_LAYOUT_CONSTRAINTS,
+  createWidgetDocument,
+  layoutWidget,
+  type LayoutConstraints,
+} from '@workbench-kit/jdw';
+
+import { WorkbenchPreviewCanvas } from '../layout/WorkbenchCanvas.js';
+import { usePreviewViewport } from '../layout/usePreviewViewport.js';
+import { cx } from '../utils/cx.js';
+import { JdwPreview, type JdwPreviewProps } from './JdwPreview.js';
+
+import './jdw-preview-viewport.css';
+
+const FALLBACK_FRAME_SIZE = { height: 320, width: 400 } as const;
+
+export type JdwPreviewViewportFit = 'container' | 'content';
+
+export interface JdwPreviewViewportProps extends JdwPreviewProps {
+  /**
+   * `container` (default): outside-in — host size drives layout constraints.
+   * `content`: inside-out — document/layoutConstraints size the frame, then scale-to-fit.
+   */
+  readonly fit?: JdwPreviewViewportFit | undefined;
+  readonly help?: ReactNode | undefined;
+  readonly showReset?: boolean | undefined;
+  readonly showViewportGrid?: boolean | undefined;
+  /**
+   * When false, only middle-mouse pans (safer when preview nodes are selectable).
+   * Default true for read-only preview surfaces.
+   */
+  readonly enablePrimaryPointerPan?: boolean | undefined;
+}
+
+export function resolveJdwPreviewFrameSize(
+  json: string,
+  layoutConstraints: LayoutConstraints = DEFAULT_LAYOUT_CONSTRAINTS,
+  registry?: WidgetRegistryContract<unknown> | undefined,
+): { readonly height: number; readonly width: number } {
+  const document = createWidgetDocument(json);
+  if (document.root === null) {
+    return FALLBACK_FRAME_SIZE;
+  }
+
+  try {
+    const layout = layoutWidget(document.root, layoutConstraints, { x: 0, y: 0 }, { registry });
+    return {
+      height: Math.max(1, Math.round(layout.rect.height)),
+      width: Math.max(1, Math.round(layout.rect.width)),
+    };
+  } catch {
+    return FALLBACK_FRAME_SIZE;
+  }
+}
+
+export function resolveContainerLayoutConstraints(
+  hostWidth: number,
+  hostHeight: number,
+  inset = 0,
+): LayoutConstraints {
+  return {
+    minWidth: 0,
+    maxWidth: Math.max(1, Math.floor(hostWidth) - inset),
+    minHeight: 0,
+    maxHeight: Math.max(1, Math.floor(hostHeight) - inset),
+  };
+}
+
+export function JdwPreviewViewport({
+  className,
+  enablePrimaryPointerPan = true,
+  fit = 'container',
+  help = 'Ctrl + Scroll to zoom | Drag or scroll to pan',
+  json,
+  layoutConstraints = DEFAULT_LAYOUT_CONSTRAINTS,
+  registry,
+  showReset = true,
+  showViewportGrid = true,
+  ...previewProps
+}: JdwPreviewViewportProps) {
+  const [hostElement, setHostElement] = useState<HTMLDivElement | null>(null);
+  const [hostSize, setHostSize] = useState<{ height: number; width: number } | null>(null);
+
+  useLayoutEffect(() => {
+    if (!hostElement) {
+      return undefined;
+    }
+
+    const updateSize = () => {
+      const rect = hostElement.getBoundingClientRect();
+      const width = Math.max(0, Math.floor(rect.width));
+      const height = Math.max(0, Math.floor(rect.height));
+      setHostSize((current) =>
+        current && current.width === width && current.height === height
+          ? current
+          : { width, height },
+      );
+    };
+
+    updateSize();
+    if (typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+
+    const observer = new ResizeObserver(updateSize);
+    observer.observe(hostElement);
+    return () => observer.disconnect();
+  }, [hostElement]);
+
+  const effectiveConstraints = useMemo(() => {
+    if (fit === 'container' && hostSize && hostSize.width > 0 && hostSize.height > 0) {
+      return resolveContainerLayoutConstraints(hostSize.width, hostSize.height);
+    }
+    return layoutConstraints;
+  }, [fit, hostSize, layoutConstraints]);
+
+  const frame = useMemo(() => {
+    if (fit === 'container' && hostSize && hostSize.width > 0 && hostSize.height > 0) {
+      // Outside-in: host size is the frame. Layout still uses the same constraints.
+      return {
+        width: Math.max(1, Math.floor(hostSize.width)),
+        height: Math.max(1, Math.floor(hostSize.height)),
+      };
+    }
+    return resolveJdwPreviewFrameSize(json, effectiveConstraints, registry);
+  }, [effectiveConstraints, fit, hostSize, json, registry]);
+  const viewport = usePreviewViewport({
+    contentHeight: frame.height,
+    contentWidth: frame.width,
+    enablePrimaryPointerPan,
+    ignoreInteractiveTargets: true,
+    viewportPadding: fit === 'container' ? 0 : 24,
+  });
+
+  const document = useMemo(() => createWidgetDocument(json), [json]);
+  const canRenderViewport = document.root !== null && document.parseError === null;
+
+  return (
+    <div
+      ref={setHostElement}
+      className={cx('ui-jdw-preview-viewport-host', className)}
+      data-fit={fit}
+      data-testid="jdw-preview-viewport-host"
+    >
+      {!canRenderViewport ? (
+        <JdwPreview
+          {...previewProps}
+          json={json}
+          layoutConstraints={effectiveConstraints}
+          registry={registry}
+        />
+      ) : hostSize === null ? null : (
+        <WorkbenchPreviewCanvas
+          className="ui-jdw-preview-viewport"
+          data-testid="jdw-preview-viewport"
+          frameHeight={frame.height}
+          frameTitle="JDW Preview"
+          frameWidth={frame.width}
+          help={help}
+          isPanning={viewport.isPanning}
+          onResetView={showReset ? viewport.resetView : undefined}
+          resetLabel={`Reset (${Math.round(viewport.effectiveZoom * 100)}%)`}
+          resetTitle="Reset zoom and pan"
+          showViewportGrid={showViewportGrid}
+          showWindowFrame={false}
+          stageStyle={viewport.stageStyle}
+          viewportGridSize={8}
+          viewportProps={{
+            ref: viewport.setViewportElement,
+          }}
+        >
+          <div
+            className="ui-jdw-preview-viewport__stage"
+            style={{ width: frame.width, height: frame.height }}
+          >
+            <JdwPreview
+              {...previewProps}
+              className="ui-jdw-preview-viewport__render"
+              json={json}
+              layoutConstraints={effectiveConstraints}
+              registry={registry}
+            />
+          </div>
+        </WorkbenchPreviewCanvas>
+      )}
+    </div>
+  );
+}

package/src/jdw/JsonCodeEditorPane.tsx

@@ -1,10 +1,9 @@
 import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import type { WidgetJsonSchema } from '@workbench-kit/contracts';
-import type { OnMount } from '@monaco-editor/react';
-import type * as Monaco from 'monaco-editor';
+import type { IDisposable, OnMount, WorkbenchMonaco, editor } from '@workbench-kit/monaco';
 
-import { IconButton } from '../primitives/IconButton';
-import { ListEmptyState } from '../primitives/List';
+import { IconButton } from '../primitives/icon-button';
+import { ListEmptyState } from '../primitives/list';
 import {
   WorkbenchEditorBody,
   WorkbenchEditorBottomPanel,
@@ -25,7 +24,7 @@ import {
 import { WorkspaceEditor, type WorkspaceEditorTheme } from '../workbench/workspace/WorkspaceEditor';
 import type { WorkspaceFile } from '../workbench/workspace/types';
 
-interface JsonEditorProblem {
+export interface JsonEditorProblem {
   endColumn: number;
   endLineNumber: number;
   message: string;
@@ -40,12 +39,69 @@ function toWorkbenchProblemSeverity(severity: number): WorkbenchProblemSeverity
   return 'info';
 }
 
+function pluralizeProblemLabel(count: number, label: string): string {
+  return `${count} ${label}${count === 1 ? '' : 's'}`;
+}
+
+export function summarizeJsonEditorProblems(problems: readonly JsonEditorProblem[]): {
+  readonly icon: string;
+  readonly label: string;
+  readonly status: 'completed' | 'failed' | 'warning';
+} {
+  const errorCount = problems.filter(
+    (problem) => toWorkbenchProblemSeverity(problem.severity) === 'error',
+  ).length;
+  const warningCount = problems.filter(
+    (problem) => toWorkbenchProblemSeverity(problem.severity) === 'warning',
+  ).length;
+
+  if (errorCount > 0) {
+    return {
+      icon: 'error',
+      label:
+        warningCount > 0
+          ? `${pluralizeProblemLabel(errorCount, 'Error')}, ${pluralizeProblemLabel(
+              warningCount,
+              'Warning',
+            )}`
+          : pluralizeProblemLabel(errorCount, 'Error'),
+      status: 'failed',
+    };
+  }
+
+  if (warningCount > 0) {
+    return {
+      icon: 'warning',
+      label: pluralizeProblemLabel(warningCount, 'Warning'),
+      status: 'warning',
+    };
+  }
+
+  if (problems.length > 0) {
+    return {
+      icon: 'info',
+      label: pluralizeProblemLabel(problems.length, 'Info'),
+      status: 'completed',
+    };
+  }
+
+  return {
+    icon: 'check',
+    label: 'No Problems',
+    status: 'completed',
+  };
+}
+
 export interface JsonCodeEditorPaneProps {
+  activeSourceRange?: JsonEditorRange | null | undefined;
   documentParseError?: string | null | undefined;
   file: WorkspaceFile;
   jsonSchema?: WidgetJsonSchema | null | undefined;
+  revealPosition?: JsonEditorPosition | null | undefined;
+  onCursorPositionChange?: ((position: JsonEditorPosition) => void) | undefined;
   onChange: (value: string) => void;
   onEditorMount?: OnMount | undefined;
+  problems?: readonly JsonEditorProblem[] | undefined;
   onSave?: (() => void) | undefined;
   readOnly?: boolean | undefined;
   showProblemsPanel?: boolean | undefined;
@@ -53,25 +109,66 @@ export interface JsonCodeEditorPaneProps {
   value: string;
 }
 
+export interface JsonEditorPosition {
+  readonly column: number;
+  readonly lineNumber: number;
+}
+
+export interface JsonEditorRange {
+  readonly startLineNumber: number;
+  readonly startColumn: number;
+  readonly endLineNumber: number;
+  readonly endColumn: number;
+}
+
+const MONACO_DECORATION_STICKINESS_NEVER_GROWS = 1;
+
+export function createJsonEditorActiveSourceRangeDecorations(
+  activeSourceRange: JsonEditorRange | null | undefined,
+): editor.IModelDeltaDecoration[] {
+  if (!activeSourceRange) return [];
+
+  return [
+    {
+      range: activeSourceRange,
+      options: {
+        className: 'ui-json-code-editor-pane__active-source-range',
+        stickiness: MONACO_DECORATION_STICKINESS_NEVER_GROWS,
+      },
+    },
+  ];
+}
+
 export function JsonCodeEditorPane({
+  activeSourceRange = null,
   documentParseError = null,
   file,
   jsonSchema = null,
+  revealPosition = null,
+  onCursorPositionChange,
   onChange,
   onEditorMount,
+  problems: externalProblems = [],
   onSave,
   readOnly = false,
   showProblemsPanel = true,
   theme = 'dark',
   value,
 }: JsonCodeEditorPaneProps) {
-  const editorRef = useRef<Monaco.editor.IStandaloneCodeEditor | null>(null);
-  const markerListenerRef = useRef<Monaco.IDisposable | null>(null);
+  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+  const activeSourceRangeDecorationsRef = useRef<editor.IEditorDecorationsCollection | null>(null);
+  const markerListenerRef = useRef<IDisposable | null>(null);
+  const cursorListenerRef = useRef<IDisposable | null>(null);
+  const cursorChangeRef = useRef<typeof onCursorPositionChange>(onCursorPositionChange);
   const [monacoProblems, setMonacoProblems] = useState<JsonEditorProblem[]>([]);
   const [showProblems, setShowProblems] = useState(false);
 
+  useEffect(() => {
+    cursorChangeRef.current = onCursorPositionChange;
+  }, [onCursorPositionChange]);
+
   const problems = useMemo(() => {
-    if (!documentParseError) return monacoProblems;
+    if (!documentParseError) return [...externalProblems, ...monacoProblems];
     return [
       {
         endColumn: 1,
@@ -81,9 +178,11 @@ export function JsonCodeEditorPane({
         startColumn: 1,
         startLineNumber: 1,
       },
+      ...externalProblems,
       ...monacoProblems,
     ];
-  }, [documentParseError, monacoProblems]);
+  }, [documentParseError, externalProblems, monacoProblems]);
+  const problemSummary = useMemo(() => summarizeJsonEditorProblems(problems), [problems]);
 
   const previousProblemCountRef = useRef(0);
   useEffect(() => {
@@ -97,11 +196,53 @@ export function JsonCodeEditorPane({
     () => () => {
       markerListenerRef.current?.dispose();
       markerListenerRef.current = null;
+      cursorListenerRef.current?.dispose();
+      cursorListenerRef.current = null;
+      activeSourceRangeDecorationsRef.current?.clear();
+      activeSourceRangeDecorationsRef.current = null;
     },
     [],
   );
 
-  const configureJsonSchema = (monaco: typeof Monaco, path: string) => {
+  useEffect(() => {
+    if (!revealPosition) return;
+
+    const editor = editorRef.current;
+    if (!editor) return;
+
+    editor.setPosition(revealPosition);
+    editor.revealPositionInCenter(revealPosition);
+  }, [revealPosition?.column, revealPosition?.lineNumber]);
+
+  const syncActiveSourceRangeDecorations = (monacoEditor: editor.IStandaloneCodeEditor) => {
+    const decorations = createJsonEditorActiveSourceRangeDecorations(activeSourceRange);
+    if (decorations.length === 0) {
+      activeSourceRangeDecorationsRef.current?.clear();
+      return;
+    }
+
+    if (!activeSourceRangeDecorationsRef.current) {
+      activeSourceRangeDecorationsRef.current =
+        monacoEditor.createDecorationsCollection(decorations);
+      return;
+    }
+
+    activeSourceRangeDecorationsRef.current.set(decorations);
+  };
+
+  useEffect(() => {
+    const monacoEditor = editorRef.current;
+    if (!monacoEditor) return;
+
+    syncActiveSourceRangeDecorations(monacoEditor);
+  }, [
+    activeSourceRange?.endColumn,
+    activeSourceRange?.endLineNumber,
+    activeSourceRange?.startColumn,
+    activeSourceRange?.startLineNumber,
+  ]);
+
+  const configureJsonSchema = (monaco: WorkbenchMonaco, path: string) => {
     if (!jsonSchema) return;
 
     const jsonDefaults = (
@@ -116,7 +257,7 @@ export function JsonCodeEditorPane({
       enableSchemaRequest: false,
       schemas: [
         {
-          uri: 'https://workbench-kit.dev/schemas/widget-document.schema.json',
+          uri: 'https://workbench-kit.dev/schemas/widget-document.v1.jdw.schema.json',
           fileMatch: [path],
           schema: jsonSchema,
         },
@@ -126,9 +267,18 @@ export function JsonCodeEditorPane({
 
   const handleMount: OnMount = (editor, monaco) => {
     editorRef.current = editor;
+    syncActiveSourceRangeDecorations(editor);
     configureJsonSchema(monaco, file.path);
     onEditorMount?.(editor, monaco);
 
+    cursorListenerRef.current?.dispose();
+    cursorListenerRef.current = editor.onDidChangeCursorPosition((event) => {
+      cursorChangeRef.current?.({
+        column: event.position.column,
+        lineNumber: event.position.lineNumber,
+      });
+    });
+
     if (onSave) {
       editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
         onSave();
@@ -146,7 +296,7 @@ export function JsonCodeEditorPane({
     const updateProblems = () => {
       const markers = monaco.editor.getModelMarkers({ resource: model.uri });
       setMonacoProblems(
-        markers.map((marker: Monaco.editor.IMarker) => ({
+        markers.map((marker: editor.IMarker) => ({
           message: marker.message,
           severity: marker.severity,
           startLineNumber: marker.startLineNumber,
@@ -225,12 +375,12 @@ export function JsonCodeEditorPane({
           <WorkbenchStatusBarSection>
             <WorkbenchStatusBarItem
               active={showProblems}
-              icon={problems.length > 0 ? 'error' : 'check'}
-              status={problems.length > 0 ? 'failed' : 'completed'}
+              icon={problemSummary.icon}
+              status={problemSummary.status}
               title="Toggle problems"
               onClick={() => setShowProblems((current) => !current)}
             >
-              {problems.length > 0 ? `${problems.length} Problems` : 'No Problems'}
+              {problemSummary.label}
             </WorkbenchStatusBarItem>
           </WorkbenchStatusBarSection>
         </WorkbenchStatusBar>

package/src/jdw/builtins/renderBuiltinWidgetLeaf.tsx

@@ -5,6 +5,10 @@ function readNumber(value: unknown): number | undefined {
   return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
 }
 
+function readString(value: unknown): string | undefined {
+  return typeof value === 'string' && value.trim().length > 0 ? value.trim() : undefined;
+}
+
 function textStyle(widget: GenericWidget): CSSProperties {
   return {
     color: typeof widget.color === 'string' ? widget.color : undefined,
@@ -13,6 +17,59 @@ function textStyle(widget: GenericWidget): CSSProperties {
   };
 }
 
+function sizeStyle(widget: GenericWidget): CSSProperties {
+  return {
+    width: readNumber(widget.width),
+    height: readNumber(widget.height),
+  };
+}
+
+function isAllowedStaticImageSource(value: string): boolean {
+  if (value.startsWith('//')) return false;
+
+  const schemeMatch = /^[A-Za-z][A-Za-z0-9+.-]*:/.exec(value);
+  if (!schemeMatch) return true;
+
+  const scheme = schemeMatch[0].slice(0, -1).toLowerCase();
+  return scheme === 'http' || scheme === 'https' || scheme === 'workspace' || scheme === 'asset';
+}
+
+function imageStyle(widget: GenericWidget): CSSProperties {
+  return {
+    ...sizeStyle(widget),
+    objectFit: readString(widget.fit) as CSSProperties['objectFit'],
+    display: 'block',
+    maxWidth: '100%',
+    maxHeight: '100%',
+  };
+}
+
+function iconName(widget: GenericWidget): string {
+  const name = readString(widget.name);
+  return name && /^[a-z0-9-]+$/i.test(name) ? name : 'symbol-misc';
+}
+
+function iconStyle(widget: GenericWidget): CSSProperties {
+  return {
+    color: readString(widget.color),
+    fontSize: readNumber(widget.size),
+    lineHeight: 1,
+  };
+}
+
+function buttonStyle(widget: GenericWidget): CSSProperties {
+  const variant = readString(widget.variant);
+  return {
+    color: readString(widget.color),
+    background:
+      readString(widget.background) ?? (variant === 'secondary' ? 'transparent' : undefined),
+    border: variant === 'secondary' ? '1px solid currentColor' : undefined,
+    borderRadius: 4,
+    padding: '4px 10px',
+    font: 'inherit',
+  };
+}
+
 export function renderBuiltinWidgetLeaf(widget: GenericWidget): ReactNode {
   if (widget.type === 'text') {
     return createElement(
@@ -25,5 +82,49 @@ export function renderBuiltinWidgetLeaf(widget: GenericWidget): ReactNode {
     );
   }
 
+  if (widget.type === 'image') {
+    const src = readString(widget.src);
+    if (!src || !isAllowedStaticImageSource(src)) {
+      return createElement(
+        'span',
+        {
+          'data-image-state': 'blocked',
+          'data-widget-type': 'image',
+          style: sizeStyle(widget),
+        },
+        readString(widget.alt) ?? 'Image',
+      );
+    }
+
+    return createElement('img', {
+      'data-widget-type': 'image',
+      alt: readString(widget.alt) ?? '',
+      src,
+      style: imageStyle(widget),
+    });
+  }
+
+  if (widget.type === 'icon') {
+    return createElement('i', {
+      'aria-hidden': true,
+      'data-widget-type': 'icon',
+      className: `codicon codicon-${iconName(widget)}`,
+      style: iconStyle(widget),
+    });
+  }
+
+  if (widget.type === 'button') {
+    return createElement(
+      'button',
+      {
+        'data-widget-type': 'button',
+        disabled: widget.disabled === true,
+        style: buttonStyle(widget),
+        type: 'button',
+      },
+      readString(widget.label) ?? 'Button',
+    );
+  }
+
   return null;
 }