@typespec/playground 0.14.1-dev.2 → 0.15.0-dev.4

package/dist/index.js

@@ -1,4 +1,4 @@
-import { i as createBrowserHost, n as registerMonacoLanguage } from "./services-CELCHECS.js";
+import { i as createBrowserHost, n as registerMonacoLanguage } from "./services-CtYDGH-a.js";
 import { createUrlStateStorage } from "./state-storage.js";
 //#region src/monaco-worker.ts
 function registerMonacoDefaultWorkersForVite() {

package/dist/react/index.js

@@ -1,10 +1,10 @@
-import { a as resolveVirtualPath, i as createBrowserHost, n as registerMonacoLanguage, o as debugGlobals, r as updateDiagnosticsForCodeFixes, s as printDebugInfo, t as getMonacoRange } from "../services-CELCHECS.js";
+import { a as resolveVirtualPath, i as createBrowserHost, n as registerMonacoLanguage, o as debugGlobals, r as updateDiagnosticsForCodeFixes, s as printDebugInfo, t as getMonacoRange } from "../services-CtYDGH-a.js";
 import { createUrlStateStorage } from "../state-storage.js";
 import { getSourceLocation } from "@typespec/compiler";
-import { KeyCode, KeyMod, MarkerSeverity, Uri, editor } from "monaco-editor";
+import { KeyCode, KeyMod, MarkerSeverity, Range, Uri, editor } from "monaco-editor";
 import { CompletionItemTag } from "vscode-languageserver";
 import { Fragment, createContext, memo, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
-import { Button, Card, Checkbox, DrawerBody, DrawerHeader, DrawerHeaderTitle, FluentProvider, Input, Label, Menu, MenuDivider, MenuItem, MenuList, MenuPopover, MenuTrigger, OverlayDrawer, Popover, PopoverSurface, PopoverTrigger, Radio, RadioGroup, SearchBox, Select, Subtitle2, Switch, Tab, TabList, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableRow, Text, Title3, Toast, ToastBody, ToastTitle, Toaster, Toolbar, ToolbarButton, Tooltip, mergeClasses, tokens, useId as useId$1, useToastController, webLightTheme } from "@fluentui/react-components";
+import { Button, Card, Checkbox, DrawerBody, DrawerHeader, DrawerHeaderTitle, FluentProvider, Input, Label, Menu, MenuDivider, MenuItem, MenuList, MenuPopover, MenuTrigger, OverlayDrawer, Popover, PopoverSurface, PopoverTrigger, Radio, RadioGroup, SearchBox, Select, Spinner, Subtitle2, Switch, Tab, TabList, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableRow, Text, Title3, Toast, ToastBody, ToastTitle, Toaster, Toolbar, ToolbarButton, Tooltip, mergeClasses, tokens, useId as useId$1, useToastController, webLightTheme } from "@fluentui/react-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { $ } from "@typespec/compiler/typekit";
 import { Broom16Filled, Bug16Regular, Checkmark16Regular, ChevronDown16Regular, ChevronDownRegular, ChevronRightRegular, DataLineRegular, Dismiss24Regular, DocumentBulletList24Regular, DocumentRegular, ErrorCircle16Filled, FolderListRegular, FolderRegular, MoreHorizontal24Filled, Save16Regular, SettingsRegular, Warning16Filled } from "@fluentui/react-icons";
@@ -153,12 +153,9 @@ var FooterItem = ({ children, link, className }) => {
 		children
 	});
 };
-//#endregion
-//#region src/react/footer/footer-version-item.module.css
-var button = "_button_1c15n_4";
 var footer_version_item_module_default = {
 	"version-item": "_version-item_1c15n_1",
-	button
+	button: "_button_1c15n_4"
 };
 //#endregion
 //#region src/react/footer/footer-version-item.tsx
@@ -259,21 +256,19 @@ function Pane({ children, ...props }) {
 		children
 	});
 }
-var sash = "_sash_v2eo6_20";
-var pane = "_pane_v2eo6_70";
 var split_pane_module_default = {
 	"split-pane": "_split-pane_v2eo6_1",
 	"split-disabled": "_split-disabled_v2eo6_8",
 	"split-pane-dragging": "_split-pane-dragging_v2eo6_12",
 	"react-split-vertical": "_react-split-vertical_v2eo6_12",
 	"react-split-horizontal": "_react-split-horizontal_v2eo6_16",
-	sash,
+	sash: "_sash_v2eo6_20",
 	"sash-disabled": "_sash-disabled_v2eo6_29",
 	"sash-vertical": "_sash-vertical_v2eo6_33",
 	"sash-horizontal": "_sash-horizontal_v2eo6_37",
 	"sash-content": "_sash-content_v2eo6_41",
 	"sash-content-dragging": "_sash-content-dragging_v2eo6_47",
-	pane
+	pane: "_pane_v2eo6_70"
 };
 var SashContent = ({ className, children, dragging, ...others }) => {
 	return /* @__PURE__ */ jsx("div", {
@@ -545,25 +540,18 @@ function useTreeControls({ onSetExpanded }) {
 		rerender
 	]);
 }
-var tree = "_tree_16t0l_1";
-var focus = "_focus_16t0l_18";
-var active = "_active_16t0l_22";
-var caret = "_caret_16t0l_26";
-var icon = "_icon_16t0l_33";
-var label = "_label_16t0l_40";
-var column = "_column_16t0l_44";
 var tree_module_default = {
-	tree,
+	tree: "_tree_16t0l_1",
 	"tree-row": "_tree-row_16t0l_4",
-	focus,
-	active,
-	caret,
-	icon,
-	label,
-	column
+	focus: "_focus_16t0l_18",
+	active: "_active_16t0l_22",
+	caret: "_caret_16t0l_26",
+	icon: "_icon_16t0l_33",
+	label: "_label_16t0l_40",
+	column: "_column_16t0l_44"
 };
 var INDENT_SIZE = 8;
-function TreeViewRow({ id, row, active, focussed, activate, icon: Icon }) {
+function TreeViewRow({ id, row, active, focussed, activate, icon: Icon, label: Label }) {
 	const paddingLeft = row.depth * INDENT_SIZE;
 	const onClick = useCallback(() => activate(row), [activate, row]);
 	return /* @__PURE__ */ jsxs("div", {
@@ -588,7 +576,7 @@ function TreeViewRow({ id, row, active, focussed, activate, icon: Icon }) {
 			/* @__PURE__ */ jsx("span", {
 				className: "label",
 				title: row.item.name,
-				children: row.item.name
+				children: Label ? /* @__PURE__ */ jsx(Label, { node: row.item }) : row.item.name
 			})
 		]
 	});
@@ -601,7 +589,7 @@ var Caret = ({ row }) => {
 	if (row.hasChildren) return row.expanded ? /* @__PURE__ */ jsx(ChevronDownRegular, { onClick: toggleExpand }) : /* @__PURE__ */ jsx(ChevronRightRegular, { onClick: toggleExpand });
 	else return null;
 };
-function Tree({ tree, selected, onSelect, onSetExpanded, nodeIcon, selectionMode = "none" }) {
+function Tree({ tree, selected, onSelect, onSetExpanded, nodeIcon, nodeLabel, selectionMode = "none" }) {
 	const id = useId();
 	const { expanded, toggleExpand, expand, collapse } = useTreeControls({ onSetExpanded });
 	const [focusedIndex, setFocusedIndex] = useState(-1);
@@ -691,6 +679,7 @@ function Tree({ tree, selected, onSelect, onSetExpanded, nodeIcon, selectionMode
 			return /* @__PURE__ */ jsx(TreeViewRow, {
 				id: `${id}-${row.index}`,
 				icon: nodeIcon,
+				label: nodeLabel,
 				focussed: focusedIndex === row.index,
 				row,
 				active: selectionMode === "single" && row.id === selectedKey,
@@ -1245,6 +1234,26 @@ var DefaultFooter = () => {
 	return /* @__PURE__ */ jsx(Footer, { children: /* @__PURE__ */ jsx(FooterVersionItem, {}) });
 };
 //#endregion
+//#region src/react/diff-utils.ts
+/**
+* Computes which lines in the new text are changed or inserted compared to the old text.
+* Uses a greedy forward-matching approach to handle insertions/deletions.
+*/
+function getChangedLineNumbers(oldText, newText) {
+	const oldLines = oldText.split("\n");
+	const newLines = newText.split("\n");
+	const matchedNewIndices = /* @__PURE__ */ new Set();
+	let oi = 0;
+	for (let ni = 0; ni < newLines.length; ni++) for (let j = oi; j < oldLines.length; j++) if (newLines[ni] === oldLines[j]) {
+		matchedNewIndices.add(ni);
+		oi = j + 1;
+		break;
+	}
+	const changed = [];
+	for (let ni = 0; ni < newLines.length; ni++) if (!matchedNewIndices.has(ni)) changed.push(ni + 1);
+	return changed;
+}
+//#endregion
 //#region src/react/typespec-editor.tsx
 var TypeSpecEditor = ({ actions, options, ...other }) => {
 	return /* @__PURE__ */ jsx(Editor, {
@@ -1259,34 +1268,52 @@ var TypeSpecEditor = ({ actions, options, ...other }) => {
 		...other
 	});
 };
-var OutputEditor = ({ filename, value, editorOptions }) => {
+var OutputEditor = ({ filename, value, changedLineNumbers, editorOptions }) => {
 	const model = useMonacoModel(filename);
+	const [editorInstance, setEditorInstance] = useState(null);
+	const decorationCollectionRef = useRef(null);
+	const onMount = useCallback(({ editor: ed }) => {
+		decorationCollectionRef.current = ed.createDecorationsCollection();
+		setEditorInstance(ed);
+	}, []);
+	useEffect(() => {
+		if (filename === "") return;
+		model.setValue(value);
+	}, [
+		filename,
+		value,
+		model
+	]);
+	useEffect(() => {
+		if (!editorInstance || !decorationCollectionRef.current) return;
+		if (changedLineNumbers && changedLineNumbers.length > 0 && changedLineNumbers.length < 500) decorationCollectionRef.current.set(changedLineNumbers.map((line) => ({
+			range: new Range(line, 1, line, 1),
+			options: {
+				isWholeLine: true,
+				className: "playground-changed-line"
+			}
+		})));
+		else decorationCollectionRef.current.clear();
+	}, [changedLineNumbers, editorInstance]);
 	if (filename === "") return null;
-	const options = {
-		...editorOptions,
-		readOnly: true,
-		automaticLayout: true,
-		minimap: { enabled: false }
-	};
-	model.setValue(value);
 	return /* @__PURE__ */ jsx(Editor, {
 		model,
-		options
+		options: {
+			...editorOptions,
+			readOnly: true,
+			automaticLayout: true,
+			minimap: { enabled: false }
+		},
+		onMount
 	});
 };
-//#endregion
-//#region src/react/settings/compiler-settings.module.css
-var settings = "_settings_1yvpj_1";
-var section = "_section_1yvpj_7";
-var field = "_field_1yvpj_23";
-var empty = "_empty_1yvpj_33";
 var compiler_settings_module_default = {
-	settings,
-	section,
+	settings: "_settings_1yvpj_1",
+	section: "_section_1yvpj_7",
 	"section-title": "_section-title_1yvpj_19",
-	field,
+	field: "_field_1yvpj_23",
 	"section-subtitle": "_section-subtitle_1yvpj_29",
-	empty
+	empty: "_empty_1yvpj_33"
 };
 var emitter_options_form_module_default = {
 	form: "_form_w9o1o_1",
@@ -1789,7 +1816,7 @@ var file_output_module_default = {
 /**
 * Display a file output using different viewers.
 */
-var FileOutput = ({ filename, content, viewers }) => {
+var FileOutput = ({ filename, content, viewers, changedLineNumbers }) => {
 	const resolvedViewers = useMemo(() => ({
 		[RawFileViewer.key]: RawFileViewer,
 		...viewers
@@ -1805,7 +1832,8 @@ var FileOutput = ({ filename, content, viewers }) => {
 	if (keys.length === 0) return /* @__PURE__ */ jsx(Fragment$1, { children: "No viewers" });
 	else if (keys.length === 1) return resolvedViewers[keys[0]].render({
 		filename,
-		content
+		content,
+		changedLineNumbers
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: file_output_module_default["file-output"],
@@ -1822,16 +1850,18 @@ var FileOutput = ({ filename, content, viewers }) => {
 			})
 		}), selectedRender && selectedRender({
 			filename,
-			content
+			content,
+			changedLineNumbers
 		})]
 	});
 };
 var RawFileViewer = {
 	key: "raw",
 	label: "File",
-	render: ({ filename, content }) => /* @__PURE__ */ jsx(OutputEditor, {
+	render: ({ filename, content, changedLineNumbers }) => /* @__PURE__ */ jsx(OutputEditor, {
 		filename,
-		value: content
+		value: content,
+		changedLineNumbers
 	})
 };
 //#endregion
@@ -1843,10 +1873,19 @@ var FileNodeIcon = ({ node }) => {
 	if (node.isDirectory) return /* @__PURE__ */ jsx(FolderRegular, {});
 	return /* @__PURE__ */ jsx(DocumentRegular, {});
 };
+var FileNodeLabel = ({ node }) => {
+	return /* @__PURE__ */ jsx("span", {
+		style: node.changed ? {
+			fontWeight: 600,
+			color: "var(--colorPaletteGreenForeground1)"
+		} : void 0,
+		children: node.name
+	});
+};
 /**
 * Builds a tree structure from a flat list of file paths.
 */
-function buildTree(files) {
+function buildTree(files, changedFiles) {
 	const root = {
 		id: "__root__",
 		name: "root",
@@ -1874,7 +1913,8 @@ function buildTree(files) {
 		if (lastSlash === -1) root.children.push({
 			id: file,
 			name: file,
-			isDirectory: false
+			isDirectory: false,
+			changed: changedFiles?.has(file)
 		});
 		else {
 			const dirPath = file.substring(0, lastSlash);
@@ -1882,7 +1922,8 @@ function buildTree(files) {
 			ensureDir(dirPath).children.push({
 				id: file,
 				name: fileName,
-				isDirectory: false
+				isDirectory: false,
+				changed: changedFiles?.has(file)
 			});
 		}
 	}
@@ -1898,8 +1939,8 @@ function buildTree(files) {
 	sortChildren(root);
 	return root;
 }
-var FileTreeExplorer = ({ files, selected, onSelect }) => {
-	const tree = useMemo(() => buildTree(files), [files]);
+var FileTreeExplorer = ({ files, selected, onSelect, changedFiles }) => {
+	const tree = useMemo(() => buildTree(files, changedFiles), [files, changedFiles]);
 	return /* @__PURE__ */ jsx("div", {
 		className: file_tree_module_default["file-tree"],
 		children: /* @__PURE__ */ jsx(Tree, {
@@ -1907,18 +1948,15 @@ var FileTreeExplorer = ({ files, selected, onSelect }) => {
 			selectionMode: "single",
 			selected,
 			onSelect,
-			nodeIcon: FileNodeIcon
+			nodeIcon: FileNodeIcon,
+			nodeLabel: FileNodeLabel
 		})
 	});
 };
-//#endregion
-//#region src/react/output-tabs/output-tabs.module.css
-var tabs = "_tabs_1x6x2_1";
-var tab = "_tab_1x6x2_1";
 var output_tabs_module_default = {
-	tabs,
+	tabs: "_tabs_1x6x2_1",
 	"tab-divider": "_tab-divider_1x6x2_7",
-	tab,
+	tab: "_tab_1x6x2_1",
 	"tab--selected": "_tab--selected_1x6x2_18"
 };
 //#endregion
@@ -1940,23 +1978,85 @@ var OutputTabs = ({ filenames, selected, onSelect }) => {
 	});
 };
 //#endregion
+//#region src/react/output-view/use-file-changes.ts
+/**
+* Tracks which output files have changed between compilations.
+* Returns the set of changed file paths and a map of changed line numbers per file.
+*/
+function useFileChanges(program, outputFiles, highlightChanges) {
+	const [changedFiles, setChangedFiles] = useState(/* @__PURE__ */ new Set());
+	const [changedLines, setChangedLines] = useState(/* @__PURE__ */ new Map());
+	const prevContentsRef = useRef(/* @__PURE__ */ new Map());
+	useEffect(() => {
+		if (!highlightChanges) return;
+		let cancelled = false;
+		async function diffFiles() {
+			const changed = /* @__PURE__ */ new Set();
+			const lines = /* @__PURE__ */ new Map();
+			const newContents = /* @__PURE__ */ new Map();
+			const isEmitterSwitch = prevContentsRef.current.size > 0 && !outputFiles.some((f) => prevContentsRef.current.has(f));
+			let hasAnyChange = false;
+			for (const file of outputFiles) try {
+				const contents = await program.host.readFile("./tsp-output/" + file);
+				newContents.set(file, contents.text);
+				if (!isEmitterSwitch) {
+					const prev = prevContentsRef.current.get(file);
+					if (prev === void 0 && prevContentsRef.current.size > 0) {
+						changed.add(file);
+						const lineCount = contents.text.split("\n").length;
+						lines.set(file, Array.from({ length: lineCount }, (_, i) => i + 1));
+						hasAnyChange = true;
+					} else if (prev !== void 0 && prev !== contents.text) {
+						changed.add(file);
+						lines.set(file, getChangedLineNumbers(prev, contents.text));
+						hasAnyChange = true;
+					} else if (prev === void 0) hasAnyChange = true;
+				} else hasAnyChange = true;
+			} catch {}
+			if (cancelled) return;
+			if (hasAnyChange || prevContentsRef.current.size === 0) {
+				prevContentsRef.current = newContents;
+				setChangedFiles(changed);
+				setChangedLines(lines);
+			}
+		}
+		diffFiles();
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		program,
+		outputFiles,
+		highlightChanges
+	]);
+	return useMemo(() => ({
+		changedFiles,
+		changedLines
+	}), [changedFiles, changedLines]);
+}
+//#endregion
 //#region src/react/output-view/output-view.module.css
 var output_view_module_default = {
-	"output-view": "_output-view_eeqi3_1",
-	"file-viewer": "_file-viewer_eeqi3_6",
-	"output-content": "_output-content_eeqi3_12",
-	"file-viewer-content": "_file-viewer-content_eeqi3_16",
-	"file-viewer-content-with-breadcrumb": "_file-viewer-content-with-breadcrumb_eeqi3_21",
-	"type-graph-viewer": "_type-graph-viewer_eeqi3_32",
-	"viewer-tabs-container": "_viewer-tabs-container_eeqi3_37",
-	"viewer-error": "_viewer-error_eeqi3_41"
+	"output-view": "_output-view_l4ok7_1",
+	"file-viewer": "_file-viewer_l4ok7_6",
+	"output-content": "_output-content_l4ok7_12",
+	"file-viewer-content": "_file-viewer-content_l4ok7_16",
+	"file-viewer-content-with-breadcrumb": "_file-viewer-content-with-breadcrumb_l4ok7_21",
+	"type-graph-viewer": "_type-graph-viewer_l4ok7_32",
+	"viewer-tabs-container": "_viewer-tabs-container_l4ok7_37",
+	"viewer-error": "_viewer-error_l4ok7_41",
+	"output-view-wrapper": "_output-view-wrapper_l4ok7_45",
+	"output-compiling": "_output-compiling_l4ok7_50",
+	"output-compiling-overlay": "_output-compiling-overlay_l4ok7_57",
+	"output-stale-banner": "_output-stale-banner_l4ok7_64"
 };
 //#endregion
 //#region src/react/output-view/file-viewer.tsx
-var FileViewerComponent = ({ program, outputFiles, fileViewers }) => {
+var FileViewerComponent = ({ program, outputFiles, fileViewers, highlightChanges }) => {
 	const [filename, setFilename] = useState("");
 	const [content, setContent] = useState("");
-	const showFileTree = useMemo(() => outputFiles.length > 1 && (outputFiles.some((f) => f.includes("/")) || outputFiles.length >= 3), [outputFiles]);
+	const { changedFiles, changedLines } = useFileChanges(program, outputFiles, highlightChanges);
+	const showFileTree = useMemo(() => outputFiles.some((f) => f.includes("/")) || outputFiles.length >= 3, [outputFiles]);
 	const loadOutputFile = useCallback(async (path) => {
 		setContent((await program.host.readFile("./tsp-output/" + path)).text);
 	}, [program.host]);
@@ -1989,7 +2089,8 @@ var FileViewerComponent = ({ program, outputFiles, fileViewers }) => {
 				children: /* @__PURE__ */ jsx(FileTreeExplorer, {
 					files: outputFiles,
 					selected: filename,
-					onSelect: handleFileSelection
+					onSelect: handleFileSelection,
+					changedFiles: highlightChanges ? changedFiles : void 0
 				})
 			}), /* @__PURE__ */ jsx(Pane, { children: /* @__PURE__ */ jsxs("div", {
 				className: output_view_module_default["file-viewer-content-with-breadcrumb"],
@@ -1998,7 +2099,8 @@ var FileViewerComponent = ({ program, outputFiles, fileViewers }) => {
 					children: /* @__PURE__ */ jsx(FileOutput, {
 						filename,
 						content,
-						viewers: fileViewers
+						viewers: fileViewers,
+						changedLineNumbers: highlightChanges ? changedLines.get(filename) : void 0
 					})
 				})]
 			}) })]
@@ -2015,13 +2117,15 @@ var FileViewerComponent = ({ program, outputFiles, fileViewers }) => {
 			children: /* @__PURE__ */ jsx(FileOutput, {
 				filename,
 				content,
-				viewers: fileViewers
+				viewers: fileViewers,
+				changedLineNumbers: highlightChanges ? changedLines.get(filename) : void 0
 			})
 		})]
 	});
 };
-function createFileViewer(fileViewers) {
+function createFileViewer(fileViewers, options) {
 	const viewerMap = Object.fromEntries(fileViewers.map((x) => [x.key, x]));
+	const highlightChanges = options?.highlightChanges ?? false;
 	return {
 		key: "file-output",
 		label: "Output explorer",
@@ -2029,7 +2133,8 @@ function createFileViewer(fileViewers) {
 		render: (props) => {
 			return /* @__PURE__ */ jsx(FileViewerComponent, {
 				...props,
-				fileViewers: viewerMap
+				fileViewers: viewerMap,
+				highlightChanges
 			});
 		}
 	};
@@ -2061,21 +2166,50 @@ var TypeGraphViewer = {
 };
 //#endregion
 //#region src/react/output-view/output-view.tsx
-var OutputView = ({ compilationState, viewers, fileViewers, selectedViewer, onViewerChange, viewerState, onViewerStateChange }) => {
-	const resolvedViewers = useMemo(() => resolveViewers(viewers, fileViewers), [fileViewers, viewers]);
-	if (compilationState === void 0) return /* @__PURE__ */ jsx(Fragment$1, {});
+var OutputView = ({ compilationState, isCompiling, isOutputStale, viewers, fileViewers, highlightChanges, selectedViewer, onViewerChange, viewerState, onViewerStateChange }) => {
+	const resolvedViewers = useMemo(() => resolveViewers(viewers, fileViewers, highlightChanges), [
+		fileViewers,
+		viewers,
+		highlightChanges
+	]);
+	if (compilationState === void 0) {
+		if (isCompiling) return /* @__PURE__ */ jsx("div", {
+			className: output_view_module_default["output-compiling"],
+			children: /* @__PURE__ */ jsx(Spinner, {
+				size: "small",
+				label: "Compiling..."
+			})
+		});
+		return /* @__PURE__ */ jsx(Fragment$1, {});
+	}
 	if ("internalCompilerError" in compilationState) return /* @__PURE__ */ jsx(Fragment$1, {});
-	return /* @__PURE__ */ jsx(OutputViewInternal, {
-		compilationResult: compilationState,
-		viewers: resolvedViewers,
-		selectedViewer,
-		onViewerChange,
-		viewerState,
-		onViewerStateChange
+	return /* @__PURE__ */ jsxs("div", {
+		className: output_view_module_default["output-view-wrapper"],
+		children: [
+			isOutputStale && /* @__PURE__ */ jsx("div", {
+				className: output_view_module_default["output-stale-banner"],
+				children: "Output is from last successful compilation"
+			}),
+			isCompiling && /* @__PURE__ */ jsx("div", {
+				className: output_view_module_default["output-compiling-overlay"],
+				children: /* @__PURE__ */ jsx(Spinner, {
+					size: "tiny",
+					label: "Compiling..."
+				})
+			}),
+			/* @__PURE__ */ jsx(OutputViewInternal, {
+				compilationResult: compilationState,
+				viewers: resolvedViewers,
+				selectedViewer,
+				onViewerChange,
+				viewerState,
+				onViewerStateChange
+			})
+		]
 	});
 };
-function resolveViewers(viewers, fileViewers) {
-	const fileViewer = createFileViewer(fileViewers ?? []);
+function resolveViewers(viewers, fileViewers, highlightChanges) {
+	const fileViewer = createFileViewer(fileViewers ?? [], { highlightChanges });
 	const output = { programViewers: {
 		[fileViewer.key]: fileViewer,
 		[TypeGraphViewer.key]: TypeGraphViewer
@@ -2426,6 +2560,9 @@ var Playground = (props) => {
 	}, [host]);
 	const typespecModel = useMonacoModel("inmemory://test/main.tsp", "typespec");
 	const [compilationState, setCompilationState] = useState(void 0);
+	const lastSuccessfulOutputRef = useRef([]);
+	const [isCompiling, setIsCompiling] = useState(false);
+	const [isOutputStale, setIsOutputStale] = useState(false);
 	const { selectedEmitter, compilerOptions, selectedSampleName, selectedViewer, viewerState, content, onSelectedEmitterChange, onCompilerOptionsChange, onSelectedSampleNameChange, onSelectedViewerChange, onViewerStateChange, onContentChange } = usePlaygroundState({
 		libraries: props.libraries,
 		samples: props.samples,
@@ -2435,6 +2572,10 @@ var Playground = (props) => {
 		defaultEmitter: props.defaultEmitter,
 		defaultContent: props.defaultContent
 	});
+	useEffect(() => {
+		lastSuccessfulOutputRef.current = [];
+		setIsOutputStale(false);
+	}, [selectedEmitter]);
 	useEffect(() => {
 		if (typespecModel.getValue() !== (content ?? "")) typespecModel.setValue(content ?? "");
 	}, [content, typespecModel]);
@@ -2456,11 +2597,33 @@ var Playground = (props) => {
 		selectedSampleName,
 		props.samples
 	]);
+	const compileIdRef = useRef(0);
 	const doCompile = useCallback(async () => {
 		const currentContent = typespecModel.getValue();
 		const typespecCompiler = host.compiler;
-		const state = await compile(host, currentContent, selectedEmitter, compilerOptions);
-		setCompilationState(state);
+		const compileId = ++compileIdRef.current;
+		setIsCompiling(true);
+		let state;
+		try {
+			state = await compile(host, currentContent, selectedEmitter, compilerOptions);
+		} catch (error) {
+			console.error("Compilation failed", error);
+			return;
+		} finally {
+			setIsCompiling(false);
+		}
+		if (compileId !== compileIdRef.current) return;
+		if ("program" in state && state.program.hasError() && state.outputFiles.length === 0 && lastSuccessfulOutputRef.current.length > 0) {
+			setIsOutputStale(true);
+			setCompilationState({
+				...state,
+				outputFiles: lastSuccessfulOutputRef.current
+			});
+		} else {
+			setIsOutputStale(false);
+			if ("program" in state && state.outputFiles.length > 0) lastSuccessfulOutputRef.current = state.outputFiles;
+			setCompilationState(state);
+		}
 		if ("program" in state) {
 			const markers = state.program.diagnostics.map((diag) => ({
 				...getMonacoRange(typespecCompiler, diag.target),
@@ -2482,14 +2645,19 @@ var Playground = (props) => {
 		compilerOptions,
 		typespecModel
 	]);
+	const currentEmitterOptions = selectedEmitter ? props.emitterOptions?.[selectedEmitter] : void 0;
 	useEffect(() => {
-		const debouncer = debounce(() => doCompile(), 200);
+		const debouncer = debounce(() => doCompile(), currentEmitterOptions?.debounce ?? 200);
 		const disposable = typespecModel.onDidChangeContent(debouncer);
 		return () => {
 			debouncer.clear();
 			disposable.dispose();
 		};
-	}, [typespecModel, doCompile]);
+	}, [
+		typespecModel,
+		doCompile,
+		currentEmitterOptions?.debounce
+	]);
 	useEffect(() => {
 		doCompile();
 	}, [doCompile]);
@@ -2587,9 +2755,12 @@ var Playground = (props) => {
 	});
 	const outputPanel = /* @__PURE__ */ jsx(OutputView, {
 		compilationState,
+		isCompiling,
+		isOutputStale,
 		editorOptions: props.editorOptions,
 		viewers: props.viewers,
 		fileViewers: selectedEmitter ? props.emitterViewers?.[selectedEmitter] : void 0,
+		highlightChanges: currentEmitterOptions?.newChangeDiff,
 		selectedViewer,
 		onViewerChange: onSelectedViewerChange,
 		viewerState,

package/dist/{services-CELCHECS.js → services-CtYDGH-a.js}

@@ -1,7 +1,7 @@
 import { TypeSpecLanguageConfiguration, createSourceFile, getSourceFileKindFromExt, resolvePath } from "@typespec/compiler";
 import * as monaco from "monaco-editor";
 import * as lsp from "vscode-languageserver";
-import { DiagnosticSeverity, DocumentHighlightKind, FormattingOptions, Range } from "vscode-languageserver";
+import { DiagnosticSeverity, DocumentHighlightKind, FormattingOptions, Range as Range$1 } from "vscode-languageserver";
 import { TextDocument } from "vscode-languageserver-textdocument";
 //#region src/react/debug.ts
 /**
@@ -304,7 +304,7 @@ function position(pos) {
 	};
 }
 function range(range) {
-	return Range.create({
+	return Range$1.create({
 		line: range.startLineNumber - 1,
 		character: range.startColumn - 1
 	}, {

package/dist/src/react/diff-utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Computes which lines in the new text are changed or inserted compared to the old text.
+ * Uses a greedy forward-matching approach to handle insertions/deletions.
+ */
+export declare function getChangedLineNumbers(oldText: string, newText: string): number[];
+//# sourceMappingURL=diff-utils.d.ts.map

package/dist/src/react/diff-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diff-utils.d.ts","sourceRoot":"","sources":["../../../src/react/diff-utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,CA0BhF"}

package/dist/src/react/file-output/file-output.d.ts

@@ -4,6 +4,8 @@ export interface FileOutputProps {
     readonly filename: string;
     readonly content: string;
     readonly viewers: Record<string, FileOutputViewer>;
+    /** Line numbers to highlight as changed (1-based). */
+    readonly changedLineNumbers?: number[];
 }
 /**
  * Display a file output using different viewers.

package/dist/src/react/file-output/file-output.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-output.d.ts","sourceRoot":"","sources":["../../../../src/react/file-output/file-output.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkC,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAIpD,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;CACpD;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAyCzD,CAAC"}
+{"version":3,"file":"file-output.d.ts","sourceRoot":"","sources":["../../../../src/react/file-output/file-output.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkC,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAIpD,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IACnD,sDAAsD;IACtD,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;CACxC;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CA8CzD,CAAC"}

package/dist/src/react/file-tree/file-tree.d.ts

@@ -3,6 +3,7 @@ export interface FileTreeExplorerProps {
     readonly files: string[];
     readonly selected: string;
     readonly onSelect: (file: string) => void;
+    readonly changedFiles?: Set<string>;
 }
 export declare const FileTreeExplorer: FunctionComponent<FileTreeExplorerProps>;
 //# sourceMappingURL=file-tree.d.ts.map

package/dist/src/react/file-tree/file-tree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-tree.d.ts","sourceRoot":"","sources":["../../../../src/react/file-tree/file-tree.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAKjE,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC;IACzB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AA8ED,eAAO,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CAkBrE,CAAC"}
+{"version":3,"file":"file-tree.d.ts","sourceRoot":"","sources":["../../../../src/react/file-tree/file-tree.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAKjE,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC;IACzB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,YAAY,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACrC;AA6FD,eAAO,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CAoBrE,CAAC"}

package/dist/src/react/index.d.ts

@@ -5,7 +5,7 @@ export type { DiagnosticListProps } from './diagnostic-list/diagnostic-list.js';
 export { Editor, useMonacoModel, type EditorProps } from './editor.js';
 export { Footer, FooterItem, FooterVersionItem, type FooterItemProps, type FooterProps, type FooterVersionItemProps, type VersionSelectorProps, type VersionSelectorVersion, } from './footer/index.js';
 export { Playground } from './playground.js';
-export type { PlaygroundProps, PlaygroundSaveData } from './playground.js';
+export type { PlaygroundEmitterOptions, PlaygroundProps, PlaygroundSaveData, } from './playground.js';
 export { StandalonePlayground, createReactPlayground, createStandalonePlaygroundStateStorage, renderReactPlayground, } from './standalone.js';
 export type * from './types.js';
 export { usePlaygroundState, type PlaygroundState } from './use-playground-state.js';

package/dist/src/react/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,YAAY,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAChF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AACvE,OAAO,EACL,MAAM,EACN,UAAU,EACV,iBAAiB,EACjB,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,sBAAsB,EAC3B,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,GAC5B,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC3E,OAAO,EACL,oBAAoB,EACpB,qBAAqB,EACrB,sCAAsC,EACtC,qBAAqB,GACtB,MAAM,iBAAiB,CAAC;AACzB,mBAAmB,YAAY,CAAC;AAChC,OAAO,EAAE,kBAAkB,EAAE,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,YAAY,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAChF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AACvE,OAAO,EACL,MAAM,EACN,UAAU,EACV,iBAAiB,EACjB,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,sBAAsB,EAC3B,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,GAC5B,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EACV,wBAAwB,EACxB,eAAe,EACf,kBAAkB,GACnB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,oBAAoB,EACpB,qBAAqB,EACrB,sCAAsC,EACtC,qBAAqB,GACtB,MAAM,iBAAiB,CAAC;AACzB,mBAAmB,YAAY,CAAC;AAChC,OAAO,EAAE,kBAAkB,EAAE,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/src/react/output-view/file-viewer.d.ts

@@ -1,3 +1,7 @@
 import { FileOutputViewer, ProgramViewer } from '../types.js';
-export declare function createFileViewer(fileViewers: FileOutputViewer[]): ProgramViewer;
+export interface FileViewerOptions {
+    /** When true, highlights changed files in the tree and changed lines in the editor after recompilation. */
+    highlightChanges?: boolean;
+}
+export declare function createFileViewer(fileViewers: FileOutputViewer[], options?: FileViewerOptions): ProgramViewer;
 //# sourceMappingURL=file-viewer.d.ts.map

package/dist/src/react/output-view/file-viewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-viewer.d.ts","sourceRoot":"","sources":["../../../../src/react/output-view/file-viewer.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,gBAAgB,EAAqB,aAAa,EAAE,MAAM,aAAa,CAAC;AAuFtF,wBAAgB,gBAAgB,CAAC,WAAW,EAAE,gBAAgB,EAAE,GAAG,aAAa,CAU/E"}
+{"version":3,"file":"file-viewer.d.ts","sourceRoot":"","sources":["../../../../src/react/output-view/file-viewer.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,gBAAgB,EAAqB,aAAa,EAAE,MAAM,aAAa,CAAC;AAsGtF,MAAM,WAAW,iBAAiB;IAChC,2GAA2G;IAC3G,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,wBAAgB,gBAAgB,CAC9B,WAAW,EAAE,gBAAgB,EAAE,EAC/B,OAAO,CAAC,EAAE,iBAAiB,GAC1B,aAAa,CAiBf"}

package/dist/src/react/output-view/output-view.d.ts

@@ -3,12 +3,19 @@ import { PlaygroundEditorsOptions } from '../playground.js';
 import { CompilationState, FileOutputViewer, ProgramViewer } from '../types.js';
 export interface OutputViewProps {
     compilationState: CompilationState | undefined;
+    isCompiling?: boolean;
+    /** When true, the displayed output is from a previous successful compilation. */
+    isOutputStale?: boolean;
     editorOptions?: PlaygroundEditorsOptions;
     /**
      * List of custom viewers to display the output. It can be file viewers or program viewers.
      */
     viewers?: ProgramViewer[];
     fileViewers?: FileOutputViewer[];
+    /**
+     * When true, highlights changed files and lines after recompilation.
+     */
+    highlightChanges?: boolean;
     /**
      * The currently selected viewer key.
      */

package/dist/src/react/output-view/output-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"output-view.d.ts","sourceRoot":"","sources":["../../../../src/react/output-view/output-view.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkC,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/E,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAiB,gBAAgB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAMpG,MAAM,WAAW,eAAe;IAC9B,gBAAgB,EAAE,gBAAgB,GAAG,SAAS,CAAC;IAC/C,aAAa,CAAC,EAAE,wBAAwB,CAAC;IACzC;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAC1B,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACjC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAClC;;OAEG;IACH,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CA8BzD,CAAC"}
+{"version":3,"file":"output-view.d.ts","sourceRoot":"","sources":["../../../../src/react/output-view/output-view.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAkC,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/E,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAiB,gBAAgB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAMpG,MAAM,WAAW,eAAe;IAC9B,gBAAgB,EAAE,gBAAgB,GAAG,SAAS,CAAC;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iFAAiF;IACjF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,wBAAwB,CAAC;IACzC;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAC1B,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACjC;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAClC;;OAEG;IACH,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAoDzD,CAAC"}

package/dist/src/react/output-view/use-file-changes.d.ts

@@ -0,0 +1,11 @@
+import { CompileResult } from '../types.js';
+export interface FileChanges {
+    changedFiles: Set<string>;
+    changedLines: Map<string, number[]>;
+}
+/**
+ * Tracks which output files have changed between compilations.
+ * Returns the set of changed file paths and a map of changed line numbers per file.
+ */
+export declare function useFileChanges(program: CompileResult["program"], outputFiles: string[], highlightChanges: boolean): FileChanges;
+//# sourceMappingURL=use-file-changes.d.ts.map

package/dist/src/react/output-view/use-file-changes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-file-changes.d.ts","sourceRoot":"","sources":["../../../../src/react/output-view/use-file-changes.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,WAAW;IAC1B,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;CACrC;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAC5B,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,EACjC,WAAW,EAAE,MAAM,EAAE,EACrB,gBAAgB,EAAE,OAAO,GACxB,WAAW,CA8Db"}

package/dist/src/react/playground.d.ts

@@ -4,6 +4,12 @@ import { CommandBarItem } from './responsive-command-bar/index.js';
 import { FileOutputViewer, ProgramViewer } from './types.js';
 import { PlaygroundState } from './use-playground-state.js';
 export type { PlaygroundState };
+export interface PlaygroundEmitterOptions {
+    /** Compile debounce delay in milliseconds. Default is 200. */
+    debounce?: number;
+    /** When true, highlights changed files and lines after recompilation. */
+    newChangeDiff?: boolean;
+}
 export interface PlaygroundProps {
     host: BrowserHost;
     /** Default content if leaving this unmanaged. */
@@ -30,6 +36,10 @@ export interface PlaygroundProps {
     viewers?: ProgramViewer[];
     /** Custom file viewers that enabled for certain emitters. Key of the map is emitter name */
     emitterViewers?: Record<string, FileOutputViewer[]>;
+    /**
+     * Per-emitter playground options. Key is the emitter name.
+     */
+    emitterOptions?: Record<string, PlaygroundEmitterOptions>;
     onSave?: (value: PlaygroundSaveData) => void;
     editorOptions?: PlaygroundEditorsOptions;
     /**

package/dist/src/react/playground.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"playground.d.ts","sourceRoot":"","sources":["../../../src/react/playground.tsx"],"names":[],"mappings":"AAGA,OAAO,sCAAsC,CAAC;AAG9C,OAAO,EAML,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AASjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAoB,gBAAgB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEpF,OAAO,EAAsB,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAIrF,YAAY,EAAE,eAAe,EAAE,CAAC;AAEhC,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,WAAW,CAAC;IAElB,iDAAiD;IACjD,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,kCAAkC;IAClC,QAAQ,CAAC,SAAS,EAAE,SAAS,MAAM,EAAE,CAAC;IAEtC,wBAAwB;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAE3C,oCAAoC;IACpC,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,yDAAyD;IACzD,sBAAsB,CAAC,EAAE,eAAe,CAAC;IACzC,6CAA6C;IAC7C,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAE3D;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB,mDAAmD;IACnD,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IAEnC,kDAAkD;IAClD,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAE1B,4FAA4F;IAC5F,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,EAAE,CAAC,CAAC;IAEpD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAE7C,aAAa,CAAC,EAAE,wBAAwB,CAAC;IAEzC;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACzD,2CAA2C;IAC3C,OAAO,EAAE,MAAM,CAAC;IAEhB,oBAAoB;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAmRzD,CAAC"}
+{"version":3,"file":"playground.d.ts","sourceRoot":"","sources":["../../../src/react/playground.tsx"],"names":[],"mappings":"AAGA,OAAO,sCAAsC,CAAC;AAG9C,OAAO,EAML,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AASjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAoB,gBAAgB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEpF,OAAO,EAAsB,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAIrF,YAAY,EAAE,eAAe,EAAE,CAAC;AAEhC,MAAM,WAAW,wBAAwB;IACvC,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yEAAyE;IACzE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,WAAW,CAAC;IAElB,iDAAiD;IACjD,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,kCAAkC;IAClC,QAAQ,CAAC,SAAS,EAAE,SAAS,MAAM,EAAE,CAAC;IAEtC,wBAAwB;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAE3C,oCAAoC;IACpC,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,yDAAyD;IACzD,sBAAsB,CAAC,EAAE,eAAe,CAAC;IACzC,6CAA6C;IAC7C,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAE3D;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB,mDAAmD;IACnD,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IAEnC,kDAAkD;IAClD,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAE1B,4FAA4F;IAC5F,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,EAAE,CAAC,CAAC;IAEpD;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAAC;IAE1D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAE7C,aAAa,CAAC,EAAE,wBAAwB,CAAC;IAEzC;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACzD,2CAA2C;IAC3C,OAAO,EAAE,MAAM,CAAC;IAEhB,oBAAoB;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAyUzD,CAAC"}

package/dist/src/react/types.d.ts

@@ -32,5 +32,7 @@ export interface FileOutputViewer {
 export interface FileOutputViewerProps {
     readonly filename: string;
     readonly content: string;
+    /** Line numbers to highlight as changed (1-based). */
+    readonly changedLineNumbers?: number[];
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/src/react/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/react/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,qBAAqB,EAAE,GAAG,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,WAAW,EAAE,MAAM,EAAE,CAAC;CAChC,CAAC;AACF,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG,kBAAkB,CAAC;AAElE,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;AAErE,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,oBAAoB;IACpB,QAAQ,CAAC,WAAW,EAAE,MAAM,EAAE,CAAC;IAC/B,kEAAkE;IAClE,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3C,sCAAsC;IACtC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;CACrE;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,GAAG,IAAI,CAAC;CACjE;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,SAAS,GAAG,IAAI,CAAC;CACrE;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/react/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,qBAAqB,EAAE,GAAG,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,WAAW,EAAE,MAAM,EAAE,CAAC;CAChC,CAAC;AACF,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG,kBAAkB,CAAC;AAElE,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;AAErE,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,oBAAoB;IACpB,QAAQ,CAAC,WAAW,EAAE,MAAM,EAAE,CAAC;IAC/B,kEAAkE;IAClE,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3C,sCAAsC;IACtC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;CACrE;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,GAAG,IAAI,CAAC;CACjE;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,SAAS,GAAG,IAAI,CAAC;CACrE;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,sDAAsD;IACtD,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;CACxC"}

package/dist/src/react/typespec-editor.d.ts

@@ -2,6 +2,7 @@ import { editor } from 'monaco-editor';
 import { FunctionComponent } from 'react';
 import { EditorProps } from './editor.js';
 import { PlaygroundEditorsOptions } from './playground.js';
+export { getChangedLineNumbers } from './diff-utils.js';
 export interface TypeSpecEditorProps extends Omit<EditorProps, "options"> {
     options?: editor.IStandaloneEditorConstructionOptions;
 }
@@ -9,6 +10,7 @@ export declare const TypeSpecEditor: FunctionComponent<TypeSpecEditorProps>;
 export declare const OutputEditor: FunctionComponent<{
     filename: string;
     value: string;
+    changedLineNumbers?: number[];
     editorOptions?: PlaygroundEditorsOptions;
 }>;
 //# sourceMappingURL=typespec-editor.d.ts.map

package/dist/src/react/typespec-editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typespec-editor.d.ts","sourceRoot":"","sources":["../../../src/react/typespec-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAA0B,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AACvE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;AAEhE,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC;IACvE,OAAO,CAAC,EAAE,MAAM,CAAC,oCAAoC,CAAC;CACvD;AAED,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,CAejE,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC;IAC3C,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,wBAAwB,CAAC;CAC1C,CAeA,CAAC"}
+{"version":3,"file":"typespec-editor.d.ts","sourceRoot":"","sources":["../../../src/react/typespec-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAS,MAAM,eAAe,CAAC;AAC9C,OAAO,EAA4C,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACzF,OAAO,EAA0B,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AACvE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,8BAA8B,CAAC;AAGtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC;IACvE,OAAO,CAAC,EAAE,MAAM,CAAC,oCAAoC,CAAC;CACvD;AAED,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,CAejE,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC;IAC3C,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,aAAa,CAAC,EAAE,wBAAwB,CAAC;CAC1C,CA8CA,CAAC"}

package/dist/style.css

@@ -446,49 +446,76 @@
 ._tab--selected_1x6x2_18 {
   background-color: var(--colorNeutralBackground5) !important;
 }
-._output-view_eeqi3_1 {
+._output-view_l4ok7_1 {
   display: flex;
   flex-direction: row;
   height: 100%;
 }
-._file-viewer_eeqi3_6 {
+._file-viewer_l4ok7_6 {
   display: flex;
   flex-direction: column;
   height: 100%;
 }
 
-._output-content_eeqi3_12 {
+._output-content_l4ok7_12 {
   flex: 1;
   min-width: 0;
 }
-._file-viewer-content_eeqi3_16 {
+._file-viewer-content_l4ok7_16 {
   flex: 1;
   min-height: 0;
 }
 
-._file-viewer-content-with-breadcrumb_eeqi3_21 {
+._file-viewer-content-with-breadcrumb_l4ok7_21 {
   display: flex;
   flex-direction: column;
   height: 100%;
 }
 
-._file-viewer-content-with-breadcrumb_eeqi3_21 ._file-viewer-content_eeqi3_16 {
+._file-viewer-content-with-breadcrumb_l4ok7_21 ._file-viewer-content_l4ok7_16 {
   flex: 1;
   min-height: 0;
 }
 
-._type-graph-viewer_eeqi3_32 {
+._type-graph-viewer_l4ok7_32 {
   height: 100%;
   overflow-y: auto;
 }
 
-._viewer-tabs-container_eeqi3_37 {
+._viewer-tabs-container_l4ok7_37 {
   background-color: var(--colorNeutralBackground3);
 }
 
-._viewer-error_eeqi3_41 {
+._viewer-error_l4ok7_41 {
   padding: 20px;
 }
+
+._output-view-wrapper_l4ok7_45 {
+  position: relative;
+  height: 100%;
+}
+
+._output-compiling_l4ok7_50 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+._output-compiling-overlay_l4ok7_57 {
+  position: absolute;
+  top: 8px;
+  right: 48px;
+  z-index: 10;
+}
+
+._output-stale-banner_l4ok7_64 {
+  background-color: var(--colorPaletteYellowBackground2);
+  color: var(--colorNeutralForeground1);
+  padding: 4px 12px;
+  font-size: 12px;
+  text-align: center;
+}
 ._layout_63onh_1 {
   display: flex;
   flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typespec/playground",
-  "version": "0.14.1-dev.2",
+  "version": "0.15.0-dev.4",
   "author": "Microsoft Corporation",
   "description": "TypeSpec playground UI components.",
   "homepage": "https://typespec.io",
@@ -59,53 +59,53 @@
     "!dist/test/**"
   ],
   "dependencies": {
-    "@fluentui/react-components": "~9.73.3",
+    "@fluentui/react-components": "^9.73.7",
     "@fluentui/react-icons": "^2.0.323",
     "@typespec/bundler": "^0.5.2 || >= 0.5.3-dev.4",
-    "@typespec/compiler": "^1.11.0 || >= 1.12.0-dev.2",
-    "@typespec/html-program-viewer": "^0.81.0 || >= 0.82.0-dev.2",
+    "@typespec/compiler": "^1.11.0 || >= 1.12.0-dev.4",
+    "@typespec/html-program-viewer": "^0.81.0 || >= 0.82.0-dev.3",
     "@typespec/http": "^1.11.0 || >= 1.12.0-dev.2",
     "@typespec/openapi": "^1.11.0 || >= 1.12.0-dev.2",
-    "@typespec/openapi3": "^1.11.0 || >= 1.12.0-dev.2",
+    "@typespec/openapi3": "^1.11.0 || >= 1.12.0-dev.3",
     "@typespec/protobuf": "^0.81.0 || >= 0.82.0-dev.1",
     "@typespec/rest": "^0.81.0 || >= 0.82.0-dev.2",
     "@typespec/versioning": "^0.81.0 || >= 0.82.0-dev.2",
     "clsx": "^2.1.1",
-    "debounce": "~3.0.0",
+    "debounce": "^3.0.0",
     "lzutf8": "0.6.3",
-    "monaco-editor": "~0.55.1",
-    "react": "~19.2.4",
-    "react-dom": "~19.2.4",
+    "monaco-editor": "^0.55.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "react-error-boundary": "^6.1.1",
-    "swagger-ui-dist": "^5.32.0",
-    "vscode-languageserver": "~9.0.1",
-    "vscode-languageserver-textdocument": "~1.0.12",
-    "yaml": "~2.8.2"
+    "swagger-ui-dist": "^5.32.2",
+    "vscode-languageserver": "^9.0.1",
+    "vscode-languageserver-textdocument": "^1.0.12",
+    "yaml": "^2.8.3"
   },
   "devDependencies": {
     "@babel/core": "^7.29.0",
-    "@playwright/test": "^1.58.2",
-    "@storybook/cli": "^10.3.3",
-    "@storybook/react-vite": "^10.3.3",
+    "@playwright/test": "^1.59.1",
+    "@storybook/cli": "^10.3.5",
+    "@storybook/react-vite": "^10.3.5",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/debounce": "~1.2.4",
-    "@types/node": "~25.5.0",
-    "@types/react": "~19.2.14",
-    "@types/react-dom": "~19.2.3",
-    "@types/swagger-ui-dist": "~3.30.6",
+    "@types/debounce": "^1.2.4",
+    "@types/node": "^25.5.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@types/swagger-ui-dist": "^3.30.6",
     "@typespec/bundler": "^0.5.2 || >= 0.5.3-dev.4",
-    "@vitejs/plugin-react": "~6.0.1",
-    "cross-env": "~10.1.0",
-    "es-module-shims": "~2.8.0",
-    "rimraf": "~6.1.3",
-    "storybook": "^10.3.3",
-    "typescript": "~5.9.3",
-    "vite": "^8.0.1",
+    "@vitejs/plugin-react": "^6.0.1",
+    "cross-env": "^10.1.0",
+    "es-module-shims": "^2.8.0",
+    "rimraf": "^6.1.3",
+    "storybook": "^10.3.5",
+    "typescript": "~6.0.2",
+    "vite": "^8.0.7",
     "vite-plugin-checker": "^0.12.0",
     "vite-plugin-dts": "4.5.4",
-    "vitest": "^4.1.0",
+    "vitest": "^4.1.3",
     "@typespec/react-components": "^0.57.0"
   },
   "scripts": {