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

package/src/jdw/index.ts

@@ -1,7 +1,12 @@
-export { JdwPreview, type JdwPreviewProps } from './JdwPreview.js';
+export { getJdwPreviewInvalidations, JdwPreview, type JdwPreviewProps } from './JdwPreview.js';
+export {
+  JdwPreviewViewport,
+  resolveContainerLayoutConstraints,
+  resolveJdwPreviewFrameSize,
+  type JdwPreviewViewportFit,
+  type JdwPreviewViewportProps,
+} from './JdwPreviewViewport.js';
 export {
-  JDW_DOCUMENT_FILE_EXTENSION,
-  JDW_DOCUMENT_MIME,
   JDW_SCHEMA_DOCUMENT_FILE_EXTENSION,
   JDW_SCHEMA_DOCUMENT_MIME,
   JDW_WIDGET_DOCUMENT_FILE_EXTENSION,
@@ -20,6 +25,7 @@ export {
   JsonConfigValidationBanner,
   type JsonCodeEditorPaneProps,
   type JsonConfigValidationBannerProps,
+  type JsonEditorProblem,
 } from './JsonCodeEditorPane.js';
 export { renderJdw, renderJdwNode, useRenderJdw, type RenderJdwOptions } from './renderJdw.js';
 export {
@@ -28,7 +34,6 @@ export {
   type CssRenderBackendOptions,
 } from './cssRenderBackend.js';
 export { BUILTIN_JDW_REGISTRY, createBuiltinJdwRegistry } from './createBuiltinJdwRegistry.js';
-export { renderBuiltinWidgetNode } from './builtins/renderBuiltinWidgetNode.js';
 export {
   formatJdwSampleScreenJson,
   formatJdwSampleScreenSpec,

package/src/jdw/jdw-preview-viewport.css

@@ -0,0 +1,41 @@
+.ui-jdw-preview-viewport-host {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.ui-jdw-preview-viewport {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.ui-jdw-preview-viewport-host[data-fit='container'] .ui-workbench-preview-canvas__frame {
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.ui-jdw-preview-viewport__stage {
+  position: relative;
+  overflow: hidden;
+}
+
+.ui-jdw-preview-viewport__render {
+  width: 100%;
+  height: 100%;
+}
+
+.ui-jdw-preview-viewport-host [data-widget-interactive='true'] {
+  cursor: pointer;
+}
+
+.ui-jdw-preview-viewport-host [data-widget-selected='true'] {
+  outline: 1px solid var(--color-focus-border, #007acc);
+  outline-offset: -1px;
+  box-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--color-focus-border, #007acc) 70%, transparent);
+}

package/src/jdw/renderJdw.tsx

@@ -1,16 +1,22 @@
 import { useMemo, type ReactNode } from 'react';
 import {
   parseJsonWidgetData,
-  validateJsonWidgetData,
+  resolveJsonWidgetValues,
+  validateJsonWidgetNode,
+  type JsonWidgetValueMap,
   type JsonWidgetNode,
+  type ValidationIssue,
 } from '@workbench-kit/jdw';
 
 import { renderJdwWithLayout, type CssRenderBackendOptions } from './cssRenderBackend.js';
 
-export type RenderJdwOptions = CssRenderBackendOptions;
+export interface RenderJdwOptions extends CssRenderBackendOptions {
+  readonly strictKnownTypes?: boolean | undefined;
+  readonly values?: JsonWidgetValueMap | undefined;
+}
 
 export function renderJdwNode(node: JsonWidgetNode, options: RenderJdwOptions = {}): ReactNode {
-  return renderJdwWithLayout(node, options);
+  return renderJdwWithLayout(resolveJsonWidgetValues(node, options.values), options);
 }
 
 export function renderJdw(source: string, options: RenderJdwOptions = {}): ReactNode {
@@ -19,14 +25,49 @@ export function renderJdw(source: string, options: RenderJdwOptions = {}): React
     return null;
   }
 
-  validateJsonWidgetData(source);
-  return renderJdwWithLayout(parsed.value, options);
+  const node = resolveJsonWidgetValues(parsed.value, options.values);
+  const issues: ValidationIssue[] = [];
+  validateJsonWidgetNode(node, 'root', issues, {
+    registeredTypes: options.registry?.types(),
+    strictKnownTypes: options.strictKnownTypes,
+  });
+  if (issues.length > 0) {
+    return null;
+  }
+
+  return renderJdwWithLayout(node, options);
 }
 
 export function useRenderJdw(source: string, options: RenderJdwOptions = {}): ReactNode {
-  const { registry, emptyLabel, layoutConstraints } = options;
+  const {
+    registry,
+    emptyLabel,
+    layoutConstraints,
+    selectedPath,
+    strictKnownTypes,
+    onSelectPath,
+    values,
+  } = options;
   return useMemo(
-    () => renderJdw(source, { registry, emptyLabel, layoutConstraints }),
-    [emptyLabel, layoutConstraints, registry, source],
+    () =>
+      renderJdw(source, {
+        registry,
+        emptyLabel,
+        layoutConstraints,
+        selectedPath,
+        strictKnownTypes,
+        onSelectPath,
+        values,
+      }),
+    [
+      emptyLabel,
+      layoutConstraints,
+      onSelectPath,
+      registry,
+      selectedPath,
+      source,
+      strictKnownTypes,
+      values,
+    ],
   );
 }

package/src/json-config/JsonConfigWorkbench.tsx

@@ -2,14 +2,14 @@ import { useMemo, useState, type ReactNode } from 'react';
 import type { WidgetRegistryContract } from '@workbench-kit/contracts';
 import { parseJsonWidgetData } from '@workbench-kit/jdw';
 
-import { Panel, PanelBody, PanelHeader } from '../layout/Panel';
-import { EmptyState } from '../primitives/EmptyState';
-import { Button } from '../primitives/Button';
-import { IconButton } from '../primitives/IconButton';
-import { Toolbar } from '../primitives/Toolbar';
+import { Panel, PanelBody, PanelHeader } from '../layout/panel';
+import { EmptyState } from '../primitives/empty-state';
+import { Button } from '../primitives/button';
+import { IconButton } from '../primitives/icon-button';
+import { Toolbar } from '../primitives/toolbar';
 import { JsonCodeEditorPane, JsonConfigValidationBanner } from '../jdw/JsonCodeEditorPane.js';
 import { JdwPreview } from '../jdw/JdwPreview.js';
-import { SplitView } from '../workbench/SplitView';
+import { SplitView } from '../workbench/shell/SplitView';
 import { WorkbenchStructuredDataSchemaPanel } from '../workbench/settings/StructuredDataSchemaPanel';
 import { type WorkbenchStructuredDataSchemaDocument } from '../workbench/settings/StructuredDataForm';
 import { type WorkspaceEditorTheme } from '../workbench/workspace/WorkspaceEditor';
@@ -18,15 +18,14 @@ import { createJsonConfigEditorState } from './json-config-editor-state.js';
 
 export type JsonConfigPreviewKind = 'auto' | 'none' | 'schema' | 'widget';
 export type JsonConfigWorkbenchMode = 'code' | 'form' | 'preview';
-type JsonConfigWorkbenchModeInput = JsonConfigWorkbenchMode | 'split';
 
 export interface JsonConfigWorkbenchProps {
   activePattern?: string | undefined;
   baselineValue?: string | undefined;
-  defaultMode?: JsonConfigWorkbenchModeInput | undefined;
+  defaultMode?: JsonConfigWorkbenchMode | undefined;
   emptyPreviewLabel?: ReactNode | undefined;
   headerActions?: ReactNode | undefined;
-  mode?: JsonConfigWorkbenchModeInput | undefined;
+  mode?: JsonConfigWorkbenchMode | undefined;
   onChange: (value: string) => void;
   onApply?: (() => void) | undefined;
   onDiscard?: (() => void) | undefined;
@@ -94,8 +93,7 @@ export function JsonConfigWorkbench({
   widgetRegistry,
 }: JsonConfigWorkbenchProps) {
   const formAvailable = schema !== null && schema !== undefined;
-  const [uncontrolledMode, setUncontrolledMode] =
-    useState<JsonConfigWorkbenchModeInput>(defaultMode);
+  const [uncontrolledMode, setUncontrolledMode] = useState<JsonConfigWorkbenchMode>(defaultMode);
   const resolvedMode = normalizeJsonConfigWorkbenchMode(mode ?? uncontrolledMode, formAvailable);
 
   const setMode = (nextMode: JsonConfigWorkbenchMode) => {
@@ -266,15 +264,14 @@ export function JsonConfigWorkbench({
 }
 
 function normalizeJsonConfigWorkbenchMode(
-  mode: JsonConfigWorkbenchModeInput,
+  mode: JsonConfigWorkbenchMode,
   formAvailable: boolean,
 ): JsonConfigWorkbenchMode {
-  const normalized = mode === 'split' ? 'code' : mode;
-  if (normalized === 'form' && !formAvailable) {
+  if (mode === 'form' && !formAvailable) {
     return 'code';
   }
 
-  return normalized;
+  return mode;
 }
 
 function JsonConfigModeControls({

package/src/layout/ViewEmptyState.tsx

@@ -0,0 +1,14 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { cx } from '../utils/cx';
+
+export interface ViewEmptyStateProps extends ComponentPropsWithRef<'p'> {
+  children: ReactNode;
+}
+
+export function ViewEmptyState({ children, className, ...props }: ViewEmptyStateProps) {
+  return (
+    <p className={cx('ui-view-empty-state', 'ui-panel-centered-state', className)} {...props}>
+      {children}
+    </p>
+  );
+}

package/src/layout/WorkbenchCanvas.tsx

@@ -5,12 +5,13 @@ import type {
   PointerEvent as ReactPointerEvent,
   ReactNode,
 } from 'react';
-import { Button } from '../primitives/Button';
+import { Button } from '../primitives/button';
 import { cx } from '../utils/cx';
 import { toAngleValue, toLineLengthValue, toLengthValue } from './layoutHelpers';
 
 export interface WorkbenchCanvasItemFrameProps extends ComponentPropsWithRef<'div'> {
   cursor?: CSSProperties['cursor'] | undefined;
+  focused?: boolean | undefined;
   height: number | string;
   hovered?: boolean | undefined;
   interactive?: boolean | undefined;
@@ -32,6 +33,7 @@ export const WorkbenchCanvasItemFrame = forwardRef<HTMLDivElement, WorkbenchCanv
     {
       className,
       cursor,
+      focused = false,
       height,
       hovered = false,
       interactive = false,
@@ -75,6 +77,7 @@ export const WorkbenchCanvasItemFrame = forwardRef<HTMLDivElement, WorkbenchCanv
         ref={ref}
         aria-selected={selected}
         className={cx('ui-workbench-canvas-item-frame', className)}
+        data-focused={focused ? 'true' : 'false'}
         data-hovered={hovered ? 'true' : 'false'}
         data-interactive={interactive ? 'true' : 'false'}
         data-selected={selected ? 'true' : 'false'}
@@ -86,7 +89,9 @@ export const WorkbenchCanvasItemFrame = forwardRef<HTMLDivElement, WorkbenchCanv
   },
 );
 
-export type WorkbenchCanvasPaneSurfaceProps = ComponentPropsWithRef<'div'>;
+export interface WorkbenchCanvasPaneSurfaceProps extends ComponentPropsWithRef<'div'> {
+  children?: ReactNode;
+}
 
 export const WorkbenchCanvasPaneSurface = forwardRef<
   HTMLDivElement,
@@ -151,6 +156,7 @@ export function WorkbenchCanvasFrameSurface({
 }
 
 export interface WorkbenchCanvasViewportProps extends ComponentPropsWithRef<'div'> {
+  children?: ReactNode;
   grid?: boolean | undefined;
   gridSize?: number | string | undefined;
   height: number | string;
@@ -499,6 +505,29 @@ interface WorkbenchCanvasFrameHandleDrag {
   startY: number;
 }
 
+function trySetPointerCapture(element: HTMLElement, pointerId: number): void {
+  if (typeof element.setPointerCapture !== 'function') return;
+
+  try {
+    element.setPointerCapture(pointerId);
+  } catch {
+    // Synthetic pointer events in Storybook/jsdom may not register an active pointer.
+  }
+}
+
+function tryReleasePointerCapture(element: HTMLElement | null, pointerId: number): void {
+  if (!element || typeof element.releasePointerCapture !== 'function') return;
+
+  try {
+    if (typeof element.hasPointerCapture === 'function' && !element.hasPointerCapture(pointerId)) {
+      return;
+    }
+    element.releasePointerCapture(pointerId);
+  } catch {
+    // Ignore stale synthetic pointer captures.
+  }
+}
+
 export interface WorkbenchCanvasFrameHandleProps extends Omit<
   ComponentPropsWithRef<'div'>,
   | 'children'
@@ -549,12 +578,12 @@ export function WorkbenchCanvasFrameHandle({
     if (!element) return;
 
     if (stopPropagation) event.stopPropagation();
-    element.setPointerCapture(event.pointerId);
     dragRef.current = {
       pointerId: event.pointerId,
       startX: event.clientX,
       startY: event.clientY,
     };
+    trySetPointerCapture(element, event.pointerId);
     onDragStart?.(event);
   };
 
@@ -570,7 +599,7 @@ export function WorkbenchCanvasFrameHandle({
     const drag = dragRef.current;
     if (!drag || drag.pointerId !== event.pointerId) return;
 
-    handleRef.current?.releasePointerCapture(event.pointerId);
+    tryReleasePointerCapture(handleRef.current, event.pointerId);
     dragRef.current = null;
     const dx = event.clientX - drag.startX;
     const dy = event.clientY - drag.startY;
@@ -586,7 +615,7 @@ export function WorkbenchCanvasFrameHandle({
     const drag = dragRef.current;
     if (!drag || drag.pointerId !== event.pointerId) return;
 
-    handleRef.current?.releasePointerCapture(event.pointerId);
+    tryReleasePointerCapture(handleRef.current, event.pointerId);
     dragRef.current = null;
     onDragCancel?.(event);
   };
@@ -629,7 +658,12 @@ export interface WorkbenchCanvasResizeHandleProps extends Omit<
   'children'
 > {
   label?: string | undefined;
+  onResizeCancel?: (event: ReactPointerEvent<HTMLButtonElement>) => void;
+  onResizeEnd?: (dx: number, dy: number, event: ReactPointerEvent<HTMLButtonElement>) => void;
+  onResizeMove?: (dx: number, dy: number, event: ReactPointerEvent<HTMLButtonElement>) => void;
+  onResizeStart?: (event: ReactPointerEvent<HTMLButtonElement>) => void;
   position?: WorkbenchCanvasResizeHandlePosition | undefined;
+  stopPropagation?: boolean;
 }
 
 export type WorkbenchCanvasResizeHandlePosition = 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw';
@@ -637,15 +671,82 @@ export type WorkbenchCanvasResizeHandlePosition = 'n' | 'ne' | 'e' | 'se' | 's'
 export function WorkbenchCanvasResizeHandle({
   className,
   label = 'Resize',
+  onPointerCancel,
+  onPointerDown,
+  onPointerMove,
+  onPointerUp,
+  onResizeCancel,
+  onResizeEnd,
+  onResizeMove,
+  onResizeStart,
   position = 'se',
+  stopPropagation = true,
   type = 'button',
   ...props
 }: WorkbenchCanvasResizeHandleProps) {
+  const handleRef = useRef<HTMLButtonElement>(null);
+  const dragRef = useRef<WorkbenchCanvasFrameHandleDrag | null>(null);
+
+  const handlePointerDown = (event: ReactPointerEvent<HTMLButtonElement>) => {
+    onPointerDown?.(event);
+    if (event.defaultPrevented || event.button !== 0) return;
+
+    const element = handleRef.current;
+    if (!element) return;
+
+    if (stopPropagation) event.stopPropagation();
+    dragRef.current = {
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+    };
+    trySetPointerCapture(element, event.pointerId);
+    onResizeStart?.(event);
+  };
+
+  const handlePointerMove = (event: ReactPointerEvent<HTMLButtonElement>) => {
+    onPointerMove?.(event);
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    onResizeMove?.(event.clientX - drag.startX, event.clientY - drag.startY, event);
+  };
+
+  const handlePointerUp = (event: ReactPointerEvent<HTMLButtonElement>) => {
+    onPointerUp?.(event);
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+
+    tryReleasePointerCapture(handleRef.current, event.pointerId);
+    dragRef.current = null;
+    const dx = event.clientX - drag.startX;
+    const dy = event.clientY - drag.startY;
+    if (dx !== 0 || dy !== 0) {
+      onResizeEnd?.(dx, dy, event);
+    } else {
+      onResizeCancel?.(event);
+    }
+  };
+
+  const handlePointerCancel = (event: ReactPointerEvent<HTMLButtonElement>) => {
+    onPointerCancel?.(event);
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+
+    tryReleasePointerCapture(handleRef.current, event.pointerId);
+    dragRef.current = null;
+    onResizeCancel?.(event);
+  };
+
   return (
     <button
+      ref={handleRef}
       aria-label={label}
       className={cx('ui-workbench-canvas-resize-handle', className)}
       data-position={position}
+      onPointerCancel={handlePointerCancel}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
       title={label}
       type={type}
       {...props}
@@ -785,12 +886,18 @@ export function WorkbenchPreviewCanvas({
 }: WorkbenchPreviewCanvasProps) {
   const {
     className: viewportClassName,
+    ref: interactionRef,
     style: viewportStyle,
     ...restViewportProps
   } = viewportProps ?? {};
 
   return (
-    <div className={cx('ui-workbench-preview-canvas', className)} {...props}>
+    <div
+      className={cx('ui-workbench-preview-canvas', className)}
+      data-panning={isPanning ? 'true' : 'false'}
+      {...props}
+      ref={interactionRef}
+    >
       {onResetView ? (
         <Button
           compact

package/src/layout/WorkbenchLayout.tsx

@@ -3,3 +3,6 @@ export * from './WorkbenchCanvas';
 export * from './WorkbenchFullscreen';
 export * from './WorkbenchTree';
 export * from './WorkbenchPropertyPanel';
+export * from './WorkbenchPropertyOverrideLabel';
+export * from './WorkbenchPropertySearch';
+export * from './propertyFieldFilter';

package/src/layout/WorkbenchLayoutBase.tsx

@@ -1,7 +1,8 @@
 import type { ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
-import { ScrollArea } from '../primitives/ScrollArea';
+import { ScrollArea } from '../primitives/scroll-area';
 import { cxCodicon } from '../utils/codicon';
 import { cx } from '../utils/cx';
+import { workbenchFillScrollRoleProps } from './fillScrollContract';
 import { toLengthValue } from './layoutHelpers';
 
 export type WorkbenchRootProps = ComponentPropsWithRef<'div'>;
@@ -12,8 +13,48 @@ export function WorkbenchRoot({ className, ...props }: WorkbenchRootProps) {
 
 export type WorkbenchFillProps = ComponentPropsWithRef<'div'>;
 
+/**
+ * Flex fill slot that clips overflow (`data-ui-fill-scroll-role="fill"`).
+ * Column by default; the last direct child stretches to fill remaining space.
+ */
 export function WorkbenchFill({ className, ...props }: WorkbenchFillProps) {
-  return <div className={cx('ui-workbench-fill', className)} {...props} />;
+  return (
+    <div
+      className={cx('ui-workbench-fill', className)}
+      {...props}
+      {...workbenchFillScrollRoleProps('fill')}
+    />
+  );
+}
+
+export type WorkbenchFillChainProps = ComponentPropsWithRef<'div'>;
+
+/**
+ * Root of an editor-in-pane fill chain. Descendant nodes that stamp
+ * `data-ui-fill-scroll-role` inherit clip/scroll overflow rules.
+ * Same last-child fill default as `WorkbenchFill` (toolbar + body stacks).
+ */
+export function WorkbenchFillChain({ className, ...props }: WorkbenchFillChainProps) {
+  return (
+    <div
+      className={cx('ui-workbench-fill', 'ui-workbench-fill-chain', className)}
+      {...props}
+      {...workbenchFillScrollRoleProps('fill')}
+    />
+  );
+}
+
+export type WorkbenchScrollRegionProps = ComponentPropsWithRef<'div'>;
+
+/** Named scroll owner inside a fill chain (`data-ui-fill-scroll-role="scroll"`). */
+export function WorkbenchScrollRegion({ className, ...props }: WorkbenchScrollRegionProps) {
+  return (
+    <div
+      className={cx('ui-workbench-scroll-region', className)}
+      {...props}
+      {...workbenchFillScrollRoleProps('scroll')}
+    />
+  );
 }
 
 export type WorkbenchCenterProps = ComponentPropsWithRef<'main'>;

package/src/layout/WorkbenchMediaPreviewViewport.tsx

@@ -0,0 +1,122 @@
+import {
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ComponentPropsWithRef,
+  type ReactNode,
+  type SyntheticEvent,
+} from 'react';
+
+import { Button } from '../primitives/button';
+import { cx } from '../utils/cx';
+import { usePreviewViewport } from './usePreviewViewport';
+
+export interface WorkbenchMediaPreviewViewportProps extends Omit<
+  ComponentPropsWithRef<'div'>,
+  'children'
+> {
+  readonly alt?: string | undefined;
+  readonly help?: ReactNode | undefined;
+  readonly imageUrl: string;
+  readonly maxZoom?: number | undefined;
+  readonly minZoom?: number | undefined;
+  readonly resetLabel?: ReactNode | undefined;
+  readonly resetTitle?: string | undefined;
+  readonly showReset?: boolean | undefined;
+}
+
+export function WorkbenchMediaPreviewViewport({
+  alt = '',
+  className,
+  help = 'Ctrl + Scroll to zoom | Drag to pan',
+  imageUrl,
+  maxZoom,
+  minZoom,
+  resetLabel,
+  resetTitle = 'Reset zoom and pan',
+  showReset = true,
+  ...props
+}: WorkbenchMediaPreviewViewportProps) {
+  const [contentSize, setContentSize] = useState<{ height: number; width: number } | null>(null);
+  const imageRef = useRef<HTMLImageElement>(null);
+
+  const viewport = usePreviewViewport({
+    contentHeight: contentSize?.height,
+    contentWidth: contentSize?.width,
+    maxZoom,
+    minZoom,
+  });
+
+  const syncContentSize = useCallback((image: HTMLImageElement) => {
+    if (image.naturalWidth <= 0 || image.naturalHeight <= 0) {
+      return;
+    }
+
+    setContentSize({
+      height: image.naturalHeight,
+      width: image.naturalWidth,
+    });
+  }, []);
+
+  const handleImageLoad = useCallback(
+    (event: SyntheticEvent<HTMLImageElement>) => {
+      syncContentSize(event.currentTarget);
+    },
+    [syncContentSize],
+  );
+
+  useLayoutEffect(() => {
+    const image = imageRef.current;
+    if (!image) {
+      return;
+    }
+
+    if (image.complete) {
+      syncContentSize(image);
+    }
+  }, [imageUrl, syncContentSize]);
+
+  const resolvedResetLabel = resetLabel ?? `Reset (${Math.round(viewport.effectiveZoom * 100)}%)`;
+
+  return (
+    <div
+      className={cx('ui-workbench-media-preview-viewport', className)}
+      data-ui-workbench-media-preview-viewport="true"
+      {...props}
+      ref={viewport.setViewportElement}
+    >
+      {showReset ? (
+        <Button
+          compact
+          className="ui-workbench-media-preview-viewport__reset"
+          type="button"
+          onClick={viewport.resetView}
+          title={resetTitle}
+        >
+          {resolvedResetLabel}
+        </Button>
+      ) : null}
+
+      <div
+        className="ui-workbench-media-preview-viewport__stage"
+        data-panning={viewport.isPanning ? 'true' : 'false'}
+        style={viewport.stageStyle}
+      >
+        <img
+          alt={alt}
+          className="ui-workbench-media-preview-viewport__image"
+          draggable={false}
+          ref={imageRef}
+          src={imageUrl}
+          onDragStart={(event) => {
+            event.preventDefault();
+          }}
+          onLoad={handleImageLoad}
+        />
+      </div>
+
+      {help ? <div className="ui-workbench-media-preview-viewport__help">{help}</div> : null}
+    </div>
+  );
+}