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

package/src/index.ts

@@ -1,5 +1,25 @@
 export { Modal } from './modal/Modal';
-export type { ModalProps } from './modal/Modal';
+export type { ModalBodyLayout, ModalBodyPadding, ModalProps } from './modal/Modal';
+export { TilepaperAppIcon } from './brand/TilepaperAppIcon';
+export type { TilepaperAppIconProps } from './brand/TilepaperAppIcon';
+export {
+  WorkbenchIcon,
+  WorkbenchIconProvider,
+  isWorkbenchIconDescriptor,
+  normalizeWorkbenchIconDescriptor,
+  useWorkbenchIconResolver,
+  workbenchIconDescriptorToCodiconName,
+} from './icons';
+export type {
+  WorkbenchCodiconDescriptor,
+  WorkbenchIconDescriptor,
+  WorkbenchIconInput,
+  WorkbenchIconNodeDescriptor,
+  WorkbenchIconProps,
+  WorkbenchIconProviderProps,
+  WorkbenchIconRenderProps,
+  WorkbenchIconResolver,
+} from './icons';
 export { commandMenuItemsToContextMenuItems } from './workbench/commands';
 export {
   WorkbenchArtifactModeControls,
@@ -119,6 +139,20 @@ export type {
   WorkbenchSignUpSubmitContext,
   WorkbenchSignUpViewProps,
 } from './workbench/auth';
+export {
+  WorkbenchBootstrapGate,
+  WorkbenchBootstrapView,
+  useWorkbenchBootstrap,
+} from './workbench/bootstrap';
+export type {
+  WorkbenchBootstrapController,
+  WorkbenchBootstrapGateProps,
+  WorkbenchBootstrapRunStatus,
+  WorkbenchBootstrapTaskDefinition,
+  WorkbenchBootstrapTaskStatus,
+  WorkbenchBootstrapTaskViewModel,
+  WorkbenchBootstrapViewProps,
+} from './workbench/bootstrap';
 export {
   WorkbenchTimeline,
   WorkbenchTimelineItem,
@@ -144,6 +178,35 @@ export { ConfirmDialog } from './modal/ConfirmDialog';
 export type { ConfirmDialogProps } from './modal/ConfirmDialog';
 export { ContextMenu } from './overlay/ContextMenu';
 export type { ContextMenuItem, ContextMenuProps } from './overlay/ContextMenu';
+export { measureAnchoredOverlayPanel } from './overlay/measureAnchoredOverlayPanel';
+export type {
+  AnchoredOverlayPanelRect,
+  AnchoredOverlayPlacement,
+  MeasureAnchoredOverlayPanelOptions,
+} from './overlay/measureAnchoredOverlayPanel';
+export { useAnchoredOverlayPanel } from './overlay/useAnchoredOverlayPanel';
+export type {
+  UseAnchoredOverlayPanelOptions,
+  UseAnchoredOverlayPanelResult,
+} from './overlay/useAnchoredOverlayPanel';
+export { useContextMenuState } from './overlay/useContextMenuState';
+export type {
+  ContextMenuPointerEvent,
+  ContextMenuPointerState,
+  UseContextMenuStateResult,
+} from './overlay/useContextMenuState';
+export {
+  createPointerPassthroughController,
+  isPointerOverHitRegion,
+} from './overlay/pointerPassthroughRegion';
+export type {
+  PointerOverHitRegionOptions,
+  PointerPassthroughController,
+  PointerPassthroughControllerOptions,
+  PointerPassthroughPort,
+} from './overlay/pointerPassthroughRegion';
+export { usePointerPassthroughRegion } from './overlay/usePointerPassthroughRegion';
+export type { UsePointerPassthroughRegionOptions } from './overlay/usePointerPassthroughRegion';
 export {
   getWorkbenchStatusDescriptor,
   getWorkbenchStatusLabel,
@@ -175,7 +238,15 @@ export {
   PreviewPaneText,
   PreviewPaneTitle,
   PreviewPaneViewport,
-} from './layout/Panel';
+} from './layout/panel';
+export {
+  WorkbenchAuthoringShell,
+  WorkbenchLabeledPane,
+  WorkbenchPlainTextSource,
+  WorkbenchSurfaceMeta,
+  WorkbenchSurfaceToolbar,
+  WorkbenchSidebarStack,
+} from './layout/panel';
 export type {
   FilterBarActiveChipsProps,
   FilterBarRowProps,
@@ -192,35 +263,54 @@ export type {
   PreviewPaneTextProps,
   PreviewPaneTitleProps,
   PreviewPaneViewportProps,
-} from './layout/Panel';
+  WorkbenchAuthoringShellProps,
+  WorkbenchLabeledPaneChrome,
+  WorkbenchLabeledPaneProps,
+  WorkbenchLabeledPaneTone,
+  WorkbenchPlainTextSourceProps,
+  WorkbenchSurfaceMetaProps,
+  WorkbenchSurfaceToolbarProps,
+  WorkbenchSidebarStackProps,
+} from './layout/panel';
 export {
   SideBarHeaderControl,
   SideBarList,
   SideBarListItem,
   SideBarViewFrame,
   SideBarRow,
-  SideBarScrollSpacer,
-} from './layout/SideBarViewFrame';
+  SidebarActionIconBar,
+  SideBarViewTabStrip,
+  WorkbenchActionList,
+  WorkbenchActionListItem,
+  WorkbenchActionSidebar,
+  WorkbenchSidebarSection,
+  WorkbenchSidebarSectionHeader,
+  WorkbenchSidebarSectionStack,
+  useSidebarSectionBaseDepth,
+} from './layout/sidebar';
 export type {
   SideBarHeaderControlProps,
   SideBarListItemProps,
   SideBarListProps,
   SideBarViewFrameProps,
   SideBarRowProps,
-  SideBarScrollSpacerProps,
-} from './layout/SideBarViewFrame';
-export {
-  WorkbenchActionList,
-  WorkbenchActionListItem,
-  WorkbenchSidebarSection,
-} from './layout/WorkbenchSidebarActions';
-export type {
+  SidebarActionIconBarProps,
+  SidebarActionIconDescriptor,
+  SideBarViewTabDescriptor,
+  SideBarViewTabStripProps,
   WorkbenchActionItem,
   WorkbenchActionListItemProps,
   WorkbenchActionListProps,
+  WorkbenchActionSidebarItem,
+  WorkbenchActionSidebarProps,
   WorkbenchActionStatus,
+  WorkbenchSidebarSectionHeaderProps,
   WorkbenchSidebarSectionProps,
-} from './layout/WorkbenchSidebarActions';
+  WorkbenchSidebarSectionStackItem,
+  WorkbenchSidebarSectionStackProps,
+} from './layout/sidebar';
+export { WorkbenchMediaPreviewViewport } from './layout/WorkbenchMediaPreviewViewport';
+export type { WorkbenchMediaPreviewViewportProps } from './layout/WorkbenchMediaPreviewViewport';
 export {
   WorkbenchBanner,
   WorkbenchBannerIcon,
@@ -257,6 +347,7 @@ export {
   WorkbenchEditorFrame,
   WorkbenchEditorViewport,
   WorkbenchFill,
+  WorkbenchFillChain,
   WorkbenchFloatingMenu,
   WorkbenchFloatingMenuItem,
   WorkbenchFullscreenBackdrop,
@@ -304,18 +395,24 @@ export {
   WorkbenchPropertyHint,
   WorkbenchPropertyInline,
   WorkbenchPropertyKeyValue,
+  WorkbenchMetricGrid,
   WorkbenchPropertyNumberRow,
+  WorkbenchPropertyOverrideLabel,
   WorkbenchPropertyPanel,
   WorkbenchPropertyRangeRow,
   WorkbenchPropertyRow,
+  WorkbenchPropertySearch,
   WorkbenchPropertySection,
   WorkbenchPropertySelectActionRow,
   WorkbenchPropertySelectRow,
   WorkbenchPropertyStack,
   WorkbenchPropertyTextRow,
   WorkbenchPropertyToggleButton,
+  filterWorkbenchPropertyFields,
+  isWorkbenchPropertySearchActive,
   WorkbenchRenderSurface,
   WorkbenchRoot,
+  WorkbenchScrollRegion,
   WorkbenchSectionTitle,
   WorkbenchTemplateGlyph,
   WorkbenchTree,
@@ -365,6 +462,7 @@ export type {
   WorkbenchEditorBottomPanelTitleProps,
   WorkbenchEditorFrameProps,
   WorkbenchEditorViewportProps,
+  WorkbenchFillChainProps,
   WorkbenchFillProps,
   WorkbenchFloatingMenuAlign,
   WorkbenchFloatingMenuItemProps,
@@ -417,10 +515,20 @@ export type {
   WorkbenchPropertyHintProps,
   WorkbenchPropertyInlineProps,
   WorkbenchPropertyKeyValueProps,
+  WorkbenchMetricGridEntry,
+  WorkbenchMetricGridItem,
+  WorkbenchMetricGridProps,
   WorkbenchPropertyNumberRowProps,
+  WorkbenchPropertyOverrideLabelProps,
+  WorkbenchPropertyOverrideResetAppearance,
+  WorkbenchPropertyFieldFilterInput,
+  WorkbenchPropertyFieldFilterResult,
+  WorkbenchPropertyFieldManifestEntry,
   WorkbenchPropertyPanelProps,
   WorkbenchPropertyRangeRowProps,
   WorkbenchPropertyRowProps,
+  WorkbenchPropertySearchProps,
+  WorkbenchPropertySectionLevel,
   WorkbenchPropertySectionProps,
   WorkbenchPropertySelectOption,
   WorkbenchPropertySelectActionRowProps,
@@ -430,6 +538,7 @@ export type {
   WorkbenchPropertyToggleButtonProps,
   WorkbenchRenderSurfaceProps,
   WorkbenchRootProps,
+  WorkbenchScrollRegionProps,
   WorkbenchSectionTitleProps,
   WorkbenchTemplateGlyphIcon,
   WorkbenchTemplateGlyphProps,
@@ -442,6 +551,18 @@ export type {
   WorkbenchTreeItemProps,
   WorkbenchTreeProps,
 } from './layout/WorkbenchLayout';
+export {
+  WORKBENCH_FILL_SCROLL_ROLE_ATTR,
+  isWorkbenchFillOwner,
+  isWorkbenchScrollOwner,
+  resolveWorkbenchFillScrollRole,
+  workbenchFillScrollRoleProps,
+} from './layout/fillScrollContract';
+export type {
+  WorkbenchFillScrollOwnerRegistry,
+  WorkbenchFillScrollRole,
+  WorkbenchFillScrollRoleProps,
+} from './layout/fillScrollContract';
 export {
   StatusBar as WorkbenchStatusBar,
   StatusBarItem as WorkbenchStatusBarItem,
@@ -455,59 +576,81 @@ export type {
   StatusBarSectionModel as WorkbenchStatusBarSectionModel,
   StatusBarSectionProps as WorkbenchStatusBarSectionProps,
 } from './workbench/StatusBar';
-export { AbsoluteBox } from './primitives/AbsoluteBox';
-export type { AbsoluteBoxProps, WorkbenchRect } from './primitives/AbsoluteBox';
-export { Badge } from './primitives/Badge';
-export type { BadgeProps } from './primitives/Badge';
-export { Button } from './primitives/Button';
-export type { ButtonProps } from './primitives/Button';
-export { Checkbox } from './primitives/Checkbox';
-export type { CheckboxProps } from './primitives/Checkbox';
-export { EmptyState } from './primitives/EmptyState';
-export type { EmptyStateProps } from './primitives/EmptyState';
-export { Field } from './primitives/Field';
-export type { FieldProps } from './primitives/Field';
-export { IconButton } from './primitives/IconButton';
-export type { IconButtonProps } from './primitives/IconButton';
-export { List, ListEmptyState, ListItem, ListItemActionButton } from './primitives/List';
+export { AbsoluteBox } from './primitives';
+export type { AbsoluteBoxProps, WorkbenchRect } from './primitives';
+export { Badge } from './primitives';
+export type { BadgeProps } from './primitives';
+export { Button } from './primitives';
+export type { ButtonProps } from './primitives';
+export { Checkbox } from './primitives';
+export type { CheckboxProps } from './primitives';
+export { Chip } from './primitives';
+export type { ChipProps } from './primitives';
+export { EmptyState } from './primitives';
+export type { EmptyStateProps } from './primitives';
+export { PanelLoading } from './primitives';
+export type { PanelLoadingProps } from './primitives';
+export { Field } from './primitives';
+export type { FieldProps } from './primitives';
+export { IconButton } from './primitives';
+export type { IconButtonProps } from './primitives';
+export { List, ListEmptyState, ListItem, ListItemActionButton } from './primitives';
 export type {
   ListEmptyStateProps,
   ListItemActionButtonProps,
   ListItemProps,
   ListProps,
-} from './primitives/List';
-export { NumberInput } from './primitives/NumberInput';
-export type { NumberInputProps } from './primitives/NumberInput';
-export { StatusBar, StatusBarLabel, StatusBarSection } from './primitives/StatusBar';
-export type {
-  StatusBarLabelProps,
-  StatusBarProps,
-  StatusBarSectionAlign,
-  StatusBarSectionProps,
-  StatusBarSeverity,
-} from './primitives/StatusBar';
+} from './primitives';
+export { NumberInput } from './primitives';
+export type { NumberInputProps } from './primitives';
+export { SearchableMultiSelect } from './primitives';
+export type { SearchableMultiSelectOption, SearchableMultiSelectProps } from './primitives';
 export {
-  ActivityBar,
-  Collapsible,
-  SideBar,
-  TabbedPanels,
-  WorkbenchShell,
-} from './primitives/WorkbenchChrome';
+  SEARCHABLE_MULTI_SELECT_LISTBOX_ATTR,
+  isSearchableMultiSelectPortalTarget,
+} from './primitives';
+export { TabbedPanels } from './primitives';
+export type { TabbedPanelItem, TabbedPanelsProps } from './primitives';
+export { ButtonGroup, EditorTabs, ResizablePanels, SegmentedControl } from './primitives';
+export { CatalogBrowseCard } from './primitives';
+export type { CatalogBrowseCardProps, CatalogBrowseCardVariant } from './primitives';
+export { RecordMediaHero } from './primitives';
+export type { RecordMediaHeroLayout, RecordMediaHeroProps } from './primitives';
+export { CatalogBrowseFacetChips, CatalogBrowsePane } from './primitives';
 export type {
-  ActivityBarProps,
-  ActivityItem,
-  CollapsibleProps,
-  SideBarProps,
-  TabbedPanelItem,
-  TabbedPanelsProps,
-  WorkbenchShellProps,
-} from './primitives/WorkbenchChrome';
-export {
-  ButtonGroup,
-  EditorTabs,
-  ResizablePanels,
-  SegmentedControl,
-} from './primitives/WorkbenchEditor';
+  CatalogBrowseFacetChipsProps,
+  CatalogBrowseFacetOption,
+  CatalogBrowseItem,
+  CatalogBrowseItemRenderState,
+  CatalogBrowsePaneProps,
+  CatalogBrowseViewMode,
+} from './primitives';
+export { filterCatalogBrowseItems, matchCatalogBrowseItem } from './primitives';
+export { LibraryFacetFilterStrip } from './primitives';
+export type {
+  LibraryFacetActiveChip,
+  LibraryFacetField,
+  LibraryFacetFieldKind,
+  LibraryFacetFieldOption,
+  LibraryFacetFieldPresentation,
+  LibraryFacetFilterStripProps,
+} from './primitives';
+export { LibraryFacetFilterPanel } from './primitives';
+export type {
+  LibraryFacetFilterPanelLabels,
+  LibraryFacetFilterPanelProps,
+  LibraryFacetSection,
+} from './primitives';
+export { CatalogFilterOverlay } from './primitives';
+export type { CatalogFilterOverlayProps } from './primitives';
+export { LibraryDetailLayout } from './primitives';
+export type { LibraryDetailLayoutMode, LibraryDetailLayoutProps } from './primitives';
+export { WorkbenchMediaPlaceholder } from './primitives';
+export type { WorkbenchMediaPlaceholderProps } from './primitives';
+export { WorkbenchMediaSlot } from './primitives';
+export type { WorkbenchMediaSlotProps } from './primitives';
+export { WorkbenchThumbnail } from './primitives';
+export type { WorkbenchThumbnailProps, WorkbenchThumbnailSize } from './primitives';
 export type {
   ButtonGroupProps,
   EditorTab,
@@ -516,25 +659,26 @@ export type {
   ResizablePanelsProps,
   SegmentedControlOption,
   SegmentedControlProps,
-} from './primitives/WorkbenchEditor';
-export { Select } from './primitives/Select';
-export type { SelectProps } from './primitives/Select';
-export { ScrollArea } from './primitives/ScrollArea';
+} from './primitives';
+export { Select } from './primitives';
+export type { SelectProps } from './primitives';
+export { ScrollArea } from './primitives';
 export type {
   ScrollAreaGutter,
   ScrollAreaOrientation,
   ScrollAreaProps,
   ScrollAreaScrollbarVisibility,
-} from './primitives/ScrollArea';
-export { TextInput } from './primitives/TextInput';
-export type { ControlWidth, TextInputProps } from './primitives/TextInput';
-export { TextArea } from './primitives/TextArea';
-export type { TextAreaProps } from './primitives/TextArea';
-export { Toolbar } from './primitives/Toolbar';
-export type { ToolbarProps } from './primitives/Toolbar';
+} from './primitives';
+export { TextInput } from './primitives';
+export type { ControlWidth, TextInputProps } from './primitives';
+export { TextArea } from './primitives';
+export type { TextAreaProps } from './primitives';
+export { Toolbar } from './primitives';
+export type { ToolbarProps } from './primitives';
 export {
   WorkspaceDraftsContext,
   WorkspaceDraftsProvider,
+  useWorkspaceDraftController,
   useWorkspaceDrafts,
 } from './workbench/workspace/WorkspaceDraftsContext';
 export type {
@@ -543,3 +687,49 @@ export type {
 } from './workbench/workspace/WorkspaceDraftsContext';
 export { StructuredArtifactEditor } from './workbench/StructuredArtifactEditor';
 export type { StructuredArtifactEditorProps } from './workbench/StructuredArtifactEditor';
+export { createStringDragMime, createTypedDragMime } from './utils/dragMime';
+export type { TypedDragMime, TypedDragMimeOptions } from './utils/dragMime';
+export {
+  EDITOR_TAB_DRAG_DATA_TYPE,
+  getEditorTabDropPosition,
+  isEditorTabMoveNoop,
+  isEditorTabsScrollerEventTarget,
+  normalizeEditorTabReorderIndex,
+  readEditorTabDragPayload,
+  resolveEditorTabDropTarget,
+  resolveEditorTabStripDropTarget,
+} from './workbench/editor-tabs-dnd';
+export type { EditorTabDragPayload, EditorTabDropTarget } from './workbench/editor-tabs-dnd';
+export { useEditorTabsStripDnd } from './workbench/useEditorTabsStripDnd';
+export type {
+  UseEditorTabsStripDndOptions,
+  UseEditorTabsStripDndResult,
+} from './workbench/useEditorTabsStripDnd';
+export { WorkbenchEditorTabs } from './workbench/WorkbenchEditorTabs';
+export type { WorkbenchEditorTabsProps } from './workbench/WorkbenchEditorTabs';
+export {
+  createWorkbenchStandaloneEditorTabCommandContext,
+  createWorkbenchStandaloneEditorTabContextMenuItems,
+  isWorkbenchEditorTabClosable,
+} from './workbench/editorTabContextMenu';
+export type {
+  CreateWorkbenchStandaloneEditorTabCommandContextInput,
+  WorkbenchStandaloneEditorTabLike,
+} from './workbench/editorTabContextMenu';
+export { useWorkbenchEditorTabContextMenu } from './workbench/useWorkbenchEditorTabContextMenu';
+export type {
+  UseWorkbenchEditorTabContextMenuOptions,
+  UseWorkbenchEditorTabContextMenuResult,
+} from './workbench/useWorkbenchEditorTabContextMenu';
+export {
+  clampPreviewViewportZoom,
+  computePreviewViewportFitScale,
+  computeZoomPanTowardPoint,
+  usePreviewViewport,
+} from './layout/usePreviewViewport';
+export type {
+  PreviewViewportPoint,
+  PreviewViewportSize,
+  UsePreviewViewportOptions,
+  UsePreviewViewportResult,
+} from './layout/usePreviewViewport';

package/src/jdw/JdwPreview.tsx

@@ -1,8 +1,23 @@
+import { useEffect, useMemo, useRef, type ReactNode } from 'react';
 import type { WidgetRegistryContract } from '@workbench-kit/contracts';
-import { parseJsonWidgetData, type LayoutConstraints } from '@workbench-kit/jdw';
+import {
+  collectJsonWidgetChangedValuePaths,
+  collectJsonWidgetInvalidations,
+  expandJsonWidgetDocumentRefs,
+  parseJsonWidgetData,
+  resolveJsonWidgetValues,
+  validateJsonWidgetNode,
+  type LayoutConstraints,
+  type JsonWidgetValueMap,
+  type JsonWidgetInvalidation,
+  type ValidationIssue,
+  type WidgetPath,
+} from '@workbench-kit/jdw';
 
 import { WorkbenchParseError, WorkbenchRenderSurface } from '../layout/WorkbenchLayout.js';
-import { useRenderJdw } from './renderJdw.js';
+import { renderJdwWithLayout } from './cssRenderBackend.js';
+
+const EMPTY_CHANGED_VALUE_PATHS: readonly string[] = [];
 
 export interface JdwPreviewProps {
   json: string;
@@ -10,6 +25,49 @@ export interface JdwPreviewProps {
   emptyLabel?: string | undefined;
   className?: string | undefined;
   layoutConstraints?: LayoutConstraints | undefined;
+  selectedPath?: WidgetPath | null | undefined;
+  strictKnownTypes?: boolean | undefined;
+  values?: JsonWidgetValueMap | undefined;
+  changedValuePaths?: readonly string[] | undefined;
+  onSelectPath?: ((path: WidgetPath) => void) | undefined;
+  /**
+   * When set, expand `type: "ref"` before validate/layout so composed documents
+   * draw without mutating the authored JSON shown in Code/Form outline.
+   */
+  documentPath?: string | null | undefined;
+  loadDocument?: ((path: string) => string | null) | undefined;
+}
+
+function formatValidationMessage(issue: { readonly message: string; readonly path: string }) {
+  return issue.path ? `${issue.path}: ${issue.message}` : issue.message;
+}
+
+export function getJdwPreviewInvalidations(
+  json: string,
+  changedValuePaths: readonly string[] = [],
+): readonly JsonWidgetInvalidation[] {
+  const parsed = parseJsonWidgetData(json);
+  if (parsed.parseError !== null || parsed.value === null) {
+    return [];
+  }
+
+  return collectJsonWidgetInvalidations(parsed.value, changedValuePaths);
+}
+
+function mergeChangedValuePaths(
+  first: readonly string[],
+  second: readonly string[],
+): readonly string[] {
+  return [
+    ...new Set([...first, ...second].map((path) => path.trim()).filter((path) => path.length > 0)),
+  ];
+}
+
+interface JdwPreviewState {
+  readonly invalidations: readonly JsonWidgetInvalidation[];
+  readonly issues: readonly ValidationIssue[];
+  readonly renderOutput: ReactNode;
+  readonly valid: boolean;
 }
 
 export function JdwPreview({
@@ -18,21 +76,120 @@ export function JdwPreview({
   emptyLabel = 'No render output.',
   className,
   layoutConstraints,
+  selectedPath = null,
+  strictKnownTypes = true,
+  values,
+  changedValuePaths = EMPTY_CHANGED_VALUE_PATHS,
+  onSelectPath,
+  documentPath = null,
+  loadDocument,
 }: JdwPreviewProps) {
-  const parsed = parseJsonWidgetData(json);
-  const renderOutput = useRenderJdw(json, { registry, emptyLabel, layoutConstraints });
+  const previousValuesRef = useRef<JsonWidgetValueMap | undefined>(values);
+  const onSelectPathRef = useRef(onSelectPath);
+  onSelectPathRef.current = onSelectPath;
+
+  const changedValuePathsFromValues = useMemo(
+    () => collectJsonWidgetChangedValuePaths(previousValuesRef.current, values),
+    [values],
+  );
+  const activeChangedValuePaths = useMemo(
+    () => mergeChangedValuePaths(changedValuePaths, changedValuePathsFromValues),
+    [changedValuePaths, changedValuePathsFromValues],
+  );
+
+  useEffect(() => {
+    previousValuesRef.current = values;
+  }, [values]);
+
+  const previewState = useMemo<JdwPreviewState>(() => {
+    const parsed = parseJsonWidgetData(json);
+    if (parsed.parseError !== null || parsed.value === null) {
+      return {
+        invalidations: [],
+        issues: [
+          {
+            path: 'root',
+            message: parsed.parseError ?? 'Invalid JSON widget data.',
+          },
+        ],
+        renderOutput: null,
+        valid: false,
+      };
+    }
+
+    let drawableNode = parsed.value;
+    if (loadDocument) {
+      const expanded = expandJsonWidgetDocumentRefs(parsed.value, {
+        documentPath,
+        loadDocument,
+      });
+      if (expanded.issues.length > 0 || expanded.value === null) {
+        return {
+          invalidations: [],
+          issues: expanded.issues.map((issue) => ({
+            path: issue.path,
+            message: issue.message,
+          })),
+          renderOutput: null,
+          valid: false,
+        };
+      }
+      drawableNode = expanded.value;
+    }
+
+    const resolvedNode = resolveJsonWidgetValues(drawableNode, values);
+    const issues: ValidationIssue[] = [];
+    validateJsonWidgetNode(resolvedNode, 'root', issues, {
+      registeredTypes: registry?.types(),
+      strictKnownTypes,
+    });
+
+    return {
+      invalidations: collectJsonWidgetInvalidations(drawableNode, activeChangedValuePaths),
+      issues,
+      renderOutput:
+        issues.length === 0
+          ? renderJdwWithLayout(resolvedNode, {
+              registry,
+              emptyLabel,
+              layoutConstraints,
+              selectedPath,
+              onSelectPath: (path) => onSelectPathRef.current?.(path),
+            })
+          : null,
+      valid: issues.length === 0,
+    };
+  }, [
+    activeChangedValuePaths,
+    documentPath,
+    emptyLabel,
+    json,
+    layoutConstraints,
+    loadDocument,
+    registry,
+    selectedPath,
+    strictKnownTypes,
+    values,
+  ]);
 
-  if (parsed.parseError !== null) {
+  if (!previewState.valid) {
+    const firstIssue = previewState.issues[0];
     return (
       <WorkbenchParseError role="alert" data-testid="jdw-preview-error">
-        {parsed.parseError}
+        {firstIssue ? formatValidationMessage(firstIssue) : 'Invalid JDW document.'}
       </WorkbenchParseError>
     );
   }
 
   return (
-    <WorkbenchRenderSurface className={className} data-testid="jdw-preview-output">
-      {renderOutput ?? emptyLabel}
+    <WorkbenchRenderSurface
+      className={className}
+      data-jdw-invalidations={
+        previewState.invalidations.length > 0 ? previewState.invalidations.length : undefined
+      }
+      data-testid="jdw-preview-output"
+    >
+      {previewState.renderOutput ?? emptyLabel}
     </WorkbenchRenderSurface>
   );
 }