@typespec/playground 0.1.0-alpha.4-dev.17 → 0.1.0-alpha.4-dev.18

package/dist/react/index.js

@@ -1,15 +1,14 @@
 import { createContext, useContext, memo, useCallback, useMemo, useRef, useEffect, useState, useId as useId$1 } from 'react';
-import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
-import { mergeClasses, Popover, PopoverTrigger, PopoverSurface, Title3, Table, TableHeader, TableRow, TableHeaderCell, TableBody, TableCell, Select, useId, Label, RadioGroup, Radio, Input, Switch, Checkbox, Link, tokens, Toolbar, Tooltip, ToolbarButton, Dialog, DialogTrigger, DialogSurface, DialogBody, useToastController, Toast, ToastTitle, ToastBody, Toaster, FluentProvider, webLightTheme } from '@fluentui/react-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { mergeClasses, Popover, PopoverTrigger, PopoverSurface, Title3, Table, TableHeader, TableRow, TableHeaderCell, TableBody, TableCell, Select, useId, Label, RadioGroup, Radio, Input, Switch, Checkbox, Divider, Dialog, DialogTrigger, ToolbarButton, DialogSurface, DialogBody, DialogTitle, DialogContent, Link, Toolbar, Tooltip, TabList, Tab, tokens, useToastController, Toast, ToastTitle, ToastBody, Toaster, FluentProvider, webLightTheme } from '@fluentui/react-components';
 import debounce from 'debounce';
 import { editor, Uri, MarkerSeverity, KeyMod, KeyCode } from 'monaco-editor';
 import { CompletionItemTag } from 'vscode-languageserver';
-import { g as getMarkerLocation, c as createBrowserHost, r as registerMonacoLanguage, a as createUrlStateStorage } from '../state-storage-2a373027.js';
-import { Save16Regular, Broom16Filled, Settings24Regular, Bug16Regular } from '@fluentui/react-icons';
-import { css } from '@emotion/react';
+import { Settings24Regular, Save16Regular, Broom16Filled, Bug16Regular, ErrorCircle16Filled, Warning16Filled, ChevronDown16Regular } from '@fluentui/react-icons';
+import { g as getMonacoRange, c as createBrowserHost, r as registerMonacoLanguage, a as createUrlStateStorage } from '../state-storage-5b3bbcd1.js';
 import { ColorProvider, TypeSpecProgramViewer } from '@typespec/html-program-viewer';
+import { getSourceLocation } from '@typespec/compiler';
 import { createRoot } from 'react-dom/client';
-import '@typespec/compiler';
 import 'vscode-languageserver-textdocument';
 import 'lzutf8';
 
@@ -23,21 +22,21 @@ function usePlaygroundContext() {
     return context;
 }
 
-var style$2 = {"footer":"footer-module_footer__QqUEE","footer-item":"footer-module_footer-item__7rhbZ"};
+var style$b = {"footer":"footer-module_footer__QqUEE","footer-item":"footer-module_footer-item__7rhbZ"};
 
 const FooterItem = ({ children, link, className }) => {
-    const resolvedClassName = mergeClasses(style$2["footer-item"], className);
+    const resolvedClassName = mergeClasses(style$b["footer-item"], className);
     return link ? (jsx("a", { className: resolvedClassName, href: link, target: "_blank", children: children })) : (jsx("div", { className: resolvedClassName, children: children }));
 };
 
-var style$1 = {"version-item":"footer-version-item-module_version-item__pjuvV","button":"footer-version-item-module_button__70iqf"};
+var style$a = {"version-item":"footer-version-item-module_version-item__pjuvV","button":"footer-version-item-module_button__70iqf"};
 
 const FooterVersionItem = memo(({ versionSelector }) => {
     var _a;
     const { host } = usePlaygroundContext();
     const latest = versionSelector === null || versionSelector === void 0 ? void 0 : versionSelector.latest;
     const selected = (_a = versionSelector === null || versionSelector === void 0 ? void 0 : versionSelector.selected) !== null && _a !== void 0 ? _a : host.compiler.MANIFEST.version;
-    return (jsx(FooterItem, { className: style$1["version-item"], children: jsxs(Popover, { children: [jsx(PopoverTrigger, { disableButtonEnhancement: true, children: jsxs("div", { className: style$1["button"], children: [jsx("span", { children: "Version " }), jsx("span", { children: selected }), jsx("span", { children: latest ? (latest === selected ? " (latest)" : " (old)") : "" })] }) }), jsx(PopoverSurface, { children: jsx(VersionsPopup, { versionSelector: versionSelector }) })] }) }));
+    return (jsx(FooterItem, { className: style$a["version-item"], children: jsxs(Popover, { children: [jsx(PopoverTrigger, { disableButtonEnhancement: true, children: jsxs("div", { className: style$a["button"], children: [jsx("span", { children: "Version " }), jsx("span", { children: selected }), jsx("span", { children: latest ? (latest === selected ? " (latest)" : " (old)") : "" })] }) }), jsx(PopoverSurface, { children: jsx(VersionsPopup, { versionSelector: versionSelector }) })] }) }));
 });
 const VersionsPopup = memo(({ versionSelector }) => {
     const { host } = usePlaygroundContext();
@@ -55,11 +54,7 @@ const VersionSelector = memo(({ versions, selected, latest, onChange }) => {
 });
 
 const Footer = ({ className, children }) => {
-    return jsx("div", { className: mergeClasses(style$2.footer, className), children: children });
-};
-
-const DefaultFooter = () => {
-    return (jsx(Footer, { children: jsx(FooterVersionItem, {}) }));
+    return jsx("div", { className: mergeClasses(style$b.footer, className), children: children });
 };
 
 const EmitterDropdown = ({ emitters, onSelectedEmitterChange, selectedEmitter, }) => {
@@ -84,6 +79,8 @@ const SamplesDropdown = ({ samples, selectedSampleName, onSelectedSampleNameChan
     return (jsxs(Select, { className: "sample-dropdown", onChange: handleSelected, value: selectedSampleName !== null && selectedSampleName !== void 0 ? selectedSampleName : "", children: [jsx("option", { value: "", disabled: true, children: "Select sample..." }), options] }));
 };
 
+var style$9 = {"form":"emitter-options-form-module_form__dm2RP","item":"emitter-options-form-module_item__WocHP","switch":"emitter-options-form-module_switch__d4EQs"};
+
 const EmitterOptionsForm = ({ library, options, optionsChanged, }) => {
     var _a, _b, _c;
     const emitterOptionsSchema = (_c = (_b = (_a = library.definition) === null || _a === void 0 ? void 0 : _a.emitter) === null || _b === void 0 ? void 0 : _b.options) === null || _c === void 0 ? void 0 : _c.properties;
@@ -100,9 +97,9 @@ const EmitterOptionsForm = ({ library, options, optionsChanged, }) => {
             },
         });
     }, [options, optionsChanged]);
-    return (jsx("div", { children: entries.map(([key, value]) => {
+    return (jsx("div", { className: style$9["form"], children: entries.map(([key, value]) => {
             var _a;
-            return (jsx("div", { css: { margin: "16px 0" }, children: jsx(JsonSchemaPropertyInput, { emitterOptions: (_a = options[library.name]) !== null && _a !== void 0 ? _a : {}, name: key, prop: value, onChange: handleChange }) }, key));
+            return (jsx("div", { className: style$9["form-item"], children: jsx(JsonSchemaPropertyInput, { emitterOptions: (_a = options[library.name]) !== null && _a !== void 0 ? _a : {}, name: key, prop: value, onChange: handleChange }) }, key));
         }) }));
 };
 const JsonSchemaPropertyInput = ({ emitterOptions, name, prop, onChange, }) => {
@@ -113,10 +110,10 @@ const JsonSchemaPropertyInput = ({ emitterOptions, name, prop, onChange, }) => {
     const handleChange = useCallback((_, data) => onChange({ name, value: "value" in data ? data.value : data.checked }), [onChange]);
     switch (prop.type) {
         case "boolean":
-            return jsx(Switch, { label: prettyName, checked: value, onChange: handleChange });
+            return (jsx(Switch, { className: style$9["switch"], label: prettyName, labelPosition: "above", checked: value, onChange: handleChange }));
         case "string":
         default:
-            return (jsxs("div", { children: [jsx("div", { children: jsx(Label, { htmlFor: inputId, title: name, children: prettyName }) }), jsx("div", { children: prop.enum ? (jsx(RadioGroup, { layout: "horizontal", id: inputId, value: value, onChange: handleChange, children: prop.enum.map((x) => (jsx(Radio, { value: x, label: x }, x))) })) : (jsx(Input, { id: inputId, value: value, onChange: handleChange })) })] }));
+            return (jsxs("div", { className: style$9["item"], children: [jsx(Label, { htmlFor: inputId, title: name, children: prettyName }), prop.enum ? (jsx(RadioGroup, { layout: "horizontal", id: inputId, value: value, onChange: handleChange, children: prop.enum.map((x) => (jsx(Radio, { value: x, label: x }, x))) })) : (jsx(Input, { id: inputId, value: value, onChange: handleChange }))] }));
     }
 };
 
@@ -166,19 +163,30 @@ const CompilerSettings = ({ selectedEmitter, host, options, onOptionsChanged, })
             linterRuleSet,
         });
     }, [options]);
-    return (jsxs("div", { css: { padding: 10 }, children: [jsx("h2", { children: "Settings" }), jsxs(Fragment, { children: ["Emitter: ", selectedEmitter] }), jsx("h3", { children: "Options" }), library && (jsx(EmitterOptionsForm, { library: library, options: (_b = options.options) !== null && _b !== void 0 ? _b : {}, optionsChanged: emitterOptionsChanged })), jsx("h3", { children: "Linter" }), jsx(LinterForm, { libraries: host.libraries, linterRuleSet: linterRuleSet, onLinterRuleSetChanged: linterRuleSetChanged })] }));
+    return (jsxs("div", { children: [jsxs(Fragment, { children: ["Emitter: ", selectedEmitter] }), jsx(Divider, { style: { marginTop: 20 } }), jsx("h3", { children: "Options" }), library && (jsx(EmitterOptionsForm, { library: library, options: (_b = options.options) !== null && _b !== void 0 ? _b : {}, optionsChanged: emitterOptionsChanged })), jsx(Divider, { style: { marginTop: 20 } }), jsx("h3", { children: "Linter" }), jsx(LinterForm, { libraries: host.libraries, linterRuleSet: linterRuleSet, onLinterRuleSetChanged: linterRuleSetChanged })] }));
+};
+
+const CompilerSettingsDialogButton = ({ selectedEmitter, compilerOptions, onCompilerOptionsChange, }) => {
+    const { host } = usePlaygroundContext();
+    return (jsxs(Dialog, { children: [jsx(DialogTrigger, { children: jsx(ToolbarButton, { icon: jsx(Settings24Regular, {}) }) }), jsx(DialogSurface, { children: jsxs(DialogBody, { children: [jsx(DialogTitle, { children: "Settings" }), jsx(DialogContent, { children: jsx(CompilerSettings, { host: host, selectedEmitter: selectedEmitter, options: compilerOptions, onOptionsChanged: onCompilerOptionsChange }) })] }) })] }));
 };
 
-const EditorCommandBar = ({ documentationUrl, saveCode, formatCode, newIssue, host, selectedEmitter, onSelectedEmitterChange, compilerOptions: emitterOptions, onCompilerOptionsChange, samples, selectedSampleName, onSelectedSampleNameChange, }) => {
+var style$8 = {"bar":"editor-command-bar-module_bar__5q4D5","divider":"editor-command-bar-module_divider__iDahk","spacer":"editor-command-bar-module_spacer__hlHE9"};
+
+const EditorCommandBar = ({ documentationUrl, saveCode, formatCode, newIssue, host, selectedEmitter, onSelectedEmitterChange, compilerOptions, onCompilerOptionsChange, samples, selectedSampleName, onSelectedSampleNameChange, }) => {
     const documentation = documentationUrl ? (jsx("label", { children: jsx(Link, { href: documentationUrl, target: "_blank", children: "Docs" }) })) : undefined;
     const bugButton = newIssue ? jsx(FileBugButton, { onClick: newIssue }) : undefined;
     const emitters = useMemo(() => Object.values(host.libraries)
         .filter((x) => x.isEmitter)
         .map((x) => x.name), [host.libraries]);
-    return (jsx("div", { css: { borderBottom: `1px solid ${tokens.colorNeutralStroke1}` }, children: jsxs(Toolbar, { children: [jsx(Tooltip, { content: "Save", relationship: "description", withArrow: true, children: jsx(ToolbarButton, { "aria-label": "Save", icon: jsx(Save16Regular, {}), onClick: saveCode }) }), jsx(Tooltip, { content: "Format", relationship: "description", withArrow: true, children: jsx(ToolbarButton, { "aria-label": "Format", icon: jsx(Broom16Filled, {}), onClick: formatCode }) }), samples && (jsx(SamplesDropdown, { samples: samples, selectedSampleName: selectedSampleName, onSelectedSampleNameChange: onSelectedSampleNameChange })), jsx(EmitterDropdown, { emitters: emitters, onSelectedEmitterChange: onSelectedEmitterChange, selectedEmitter: selectedEmitter }), jsxs(Dialog, { children: [jsx(DialogTrigger, { children: jsx(ToolbarButton, { icon: jsx(Settings24Regular, {}) }) }), jsx(DialogSurface, { children: jsx(DialogBody, { children: jsx(CompilerSettings, { host: host, selectedEmitter: selectedEmitter, options: emitterOptions, onOptionsChanged: onCompilerOptionsChange }) }) })] }), documentation, jsx("div", { css: { flex: "1" } }), bugButton] }) }));
+    return (jsx("div", { className: style$8["bar"], children: jsxs(Toolbar, { children: [jsx(Tooltip, { content: "Save", relationship: "description", withArrow: true, children: jsx(ToolbarButton, { "aria-label": "Save", icon: jsx(Save16Regular, {}), onClick: saveCode }) }), jsx(Tooltip, { content: "Format", relationship: "description", withArrow: true, children: jsx(ToolbarButton, { "aria-label": "Format", icon: jsx(Broom16Filled, {}), onClick: formatCode }) }), samples && (jsxs(Fragment, { children: [jsx(SamplesDropdown, { samples: samples, selectedSampleName: selectedSampleName, onSelectedSampleNameChange: onSelectedSampleNameChange }), jsx("div", { className: style$8["spacer"] })] })), jsx(EmitterDropdown, { emitters: emitters, onSelectedEmitterChange: onSelectedEmitterChange, selectedEmitter: selectedEmitter }), documentation && (jsxs(Fragment, { children: [jsx("div", { className: style$8["spacer"] }), documentation] })), jsx("div", { className: style$8["divider"] }), bugButton, jsx(CompilerSettingsDialogButton, { compilerOptions: compilerOptions, onCompilerOptionsChange: onCompilerOptionsChange, selectedEmitter: selectedEmitter })] }) }));
 };
 const FileBugButton = ({ onClick }) => {
-    return (jsx(Tooltip, { content: "File Bug Report", relationship: "description", withArrow: true, children: jsx(ToolbarButton, { appearance: "subtle", "aria-label": "File Bug Report", icon: jsx(Bug16Regular, {}), onClick: onClick, children: "File bug" }) }));
+    return (jsx(Tooltip, { content: "File Bug Report", relationship: "description", withArrow: true, children: jsx(ToolbarButton, { appearance: "subtle", "aria-label": "File Bug Report", icon: jsx(Bug16Regular, {}), onClick: onClick }) }));
+};
+
+const DefaultFooter = () => {
+    return (jsx(Footer, { children: jsx(FooterVersionItem, {}) }));
 };
 
 const Editor = ({ model, options, actions, onMount }) => {
@@ -210,7 +218,7 @@ const Editor = ({ model, options, actions, onMount }) => {
             editorRef.current.setModel(model);
         }
     }, [model]);
-    return (jsx("div", { className: "monaco-editor-container", css: { width: "100%", height: "100%", overflow: "hidden" }, ref: editorContainerRef }));
+    return (jsx("div", { className: "monaco-editor-container", style: { width: "100%", height: "100%", overflow: "hidden" }, ref: editorContainerRef }));
 };
 function useMonacoModel(uri, language) {
     return useMemo(() => {
@@ -269,36 +277,7 @@ function useAsyncMemo(callback, defaultValue, deps) {
     return value;
 }
 
-const DiagnosticList = ({ diagnostics }) => {
-    if (diagnostics.length === 0) {
-        return jsx("div", { className: "center", children: "No errors" });
-    }
-    return (jsx("div", { css: { height: "100%", overflow: "auto" }, children: diagnostics.map((x, i) => {
-            return jsx(DiagnosticItem, { diagnostic: x }, i);
-        }) }));
-};
-const DiagnosticItem = ({ diagnostic }) => {
-    return (jsxs("div", { css: { display: "flex" }, children: [jsx("div", { css: [{ padding: "0 5px" }, diagnostic.severity === "error" ? errorColor : warningColor], children: diagnostic.severity }), jsx("div", { css: { padding: "0 5px", color: tokens.colorNeutralForeground2 }, children: diagnostic.code }), jsx("div", { css: { padding: "0 5px" }, children: diagnostic.message })] }));
-};
-const errorColor = css({ color: tokens.colorStatusDangerForeground1 });
-const warningColor = css({ color: tokens.colorStatusWarningForeground1 });
-
-const ErrorTab = ({ internalCompilerError, diagnostics, }) => {
-    return (jsxs(Fragment, { children: [internalCompilerError && jsx(InternalCompilerError, { error: internalCompilerError }), diagnostics && jsx(DiagnosticList, { diagnostics: diagnostics })] }));
-};
-const InternalCompilerError = ({ error }) => {
-    return (jsx("div", { css: { CenterStyles }, children: jsxs("div", { css: {
-                border: `1px solid ${tokens.colorStatusDangerBorder1}`,
-                padding: "10px",
-                margin: "20px",
-            }, children: [jsx("h3", { children: "Internal Compiler error" }), jsx("div", { children: "File issue at https://github.com/microsoft/typespec" }), jsx("hr", {}), jsx("div", { children: error.stack })] }) }));
-};
-const CenterStyles = css({
-    display: "flex",
-    height: "100%",
-    alignItems: "center",
-    justifyContent: "center",
-});
+var style$7 = {"file-output":"file-output-module_file-output__YBaE7","viewer-selector":"file-output-module_viewer-selector__fNWoo"};
 
 /**
  * Display a file output using different viewers.
@@ -318,36 +297,24 @@ const FileOutput = ({ filename, content, viewers }) => {
         var _a;
         return (_a = viewers.find((x) => x.key === selected)) === null || _a === void 0 ? void 0 : _a.render;
     }, [selected, viewers]);
-    return (jsxs("div", { css: { width: "100%", height: "100%", overflow: "hidden" }, children: [jsx(Select, { value: selected, onChange: handleSelected, css: DropdownStyle, children: viewers.map(({ key, label }) => (jsx("option", { value: key, children: label }, key))) }), selectedRender && selectedRender({ filename, content })] }));
+    return (jsxs("div", { className: style$7["file-output"], children: [jsx("div", { className: style$7["viewer-selector"], children: jsx(Select, { value: selected, onChange: handleSelected, children: viewers.map(({ key, label }) => (jsx("option", { value: key, children: label }, key))) }) }), selectedRender && selectedRender({ filename, content })] }));
 };
-const DropdownStyle = css({
-    margin: "0.5rem 1.5rem",
-    position: "absolute",
-    "z-index": 1,
-    right: 0,
-});
+
+var style$6 = {"tabs":"output-tabs-module_tabs__MFCRl","tab-divider":"output-tabs-module_tab-divider__9Fv--","tab":"output-tabs-module_tab__FJ78k","tab--selected":"output-tabs-module_tab--selected__GjCZY"};
 
 const OutputTabs = ({ tabs, selected, onSelect }) => {
     const [leftTabs, rightTabs] = chunk(tabs, (x) => x.align === "left");
-    return (jsxs("div", { css: { display: "flex", borderBottom: `1px solid ${tokens.colorNeutralStroke1}` }, children: [leftTabs.map((tab) => {
-                return (jsx(OutputTab, { tab: tab, selected: selected === tab.id, onSelect: onSelect }, tab.id));
-            }), jsx("span", { css: { flex: 1, borderRight: `1px solid ${tokens.colorNeutralStroke1}` } }), rightTabs.map((tab) => {
-                return (jsx(OutputTab, { tab: tab, selected: selected === tab.id, onSelect: onSelect }, tab.id));
+    const onTabSelect = useCallback((event, data) => {
+        onSelect(data.value);
+    }, [onSelect]);
+    return (jsxs(TabList, { selectedValue: selected, onTabSelect: onTabSelect, className: style$6["tabs"], children: [leftTabs.map((tab) => {
+                return (jsx(OutputTabEl, { value: tab.id, className: tab.id === selected && style$6["tab--selected"], children: tab.name }, tab.id));
+            }), jsx("div", { className: style$6["tab-divider"] }), rightTabs.map((tab) => {
+                return (jsx(OutputTabEl, { value: tab.id, className: tab.id === selected && style$6["tab--selected"], children: tab.name }, tab.id));
             })] }));
 };
-const OutputTab = ({ tab, selected, onSelect }) => {
-    return (jsx("div", { tabIndex: 0, css: [
-            {
-                height: "26px",
-                padding: "0 5px",
-                borderRight: `1px solid ${tokens.colorNeutralStroke1}`,
-                borderTop: "none",
-                borderBottom: "none",
-                textDecoration: "none",
-                cursor: "pointer",
-            },
-            selected ? { fontWeight: "bold", backgroundColor: tokens.colorNeutralBackground5 } : {},
-        ], onClick: () => onSelect(tab.id), children: tab.name }));
+const OutputTabEl = (props) => {
+    return jsx(Tab, { ...props, className: mergeClasses(style$6["tab"], props.className) });
 };
 function chunk(items, condition) {
     const match = [];
@@ -392,12 +359,14 @@ const OutputEditor = ({ filename, value, editorOptions }) => {
     return jsx(Editor, { model: model, options: options });
 };
 
+var style$5 = {"output-view":"output-view-module_output-view__uT5Ae","output-content":"output-view-module_output-content__Lis-G","type-graph-viewer":"output-view-module_type-graph-viewer__tUDEV"};
+
 const OutputView = ({ compilationState, viewers, editorOptions, }) => {
     if (compilationState === undefined) {
         return jsx(Fragment, {});
     }
     if ("internalCompilerError" in compilationState) {
-        return jsx(InternalCompilerError, { error: compilationState.internalCompilerError });
+        return jsx(Fragment, {});
     }
     return (jsx(OutputViewInternal, { compilationResult: compilationState, viewers: viewers, editorOptions: editorOptions }));
 };
@@ -432,25 +401,17 @@ const OutputViewInternal = ({ compilationResult, viewers, editorOptions }) => {
                 id: x,
             })),
             { id: "type-graph", name: "Type Graph", align: "right" },
-            {
-                id: "errors",
-                name: jsx(ErrorTabLabel, { diagnostics: diagnostics }),
-                align: "right",
-            },
         ];
     }, [outputFiles, diagnostics]);
     const handleTabSelection = useCallback((tabId) => {
         if (tabId === "type-graph") {
             setViewSelection({ type: "type-graph" });
         }
-        else if (tabId === "errors") {
-            setViewSelection({ type: "errors" });
-        }
         else {
             void loadOutputFile(tabId);
         }
     }, []);
-    return (jsxs(Fragment, { children: [jsx(OutputTabs, { tabs: tabs, selected: viewSelection.type === "file" ? viewSelection.filename : viewSelection.type, onSelect: handleTabSelection }), jsx("div", { className: "output-content", css: { width: "100%", height: "100%", overflow: "hidden" }, children: jsx(OutputContent, { viewSelection: viewSelection, editorOptions: editorOptions, program: program, viewers: viewers }) })] }));
+    return (jsxs("div", { className: style$5["output-view"], children: [jsx(OutputTabs, { tabs: tabs, selected: viewSelection.type === "file" ? viewSelection.filename : viewSelection.type, onSelect: handleTabSelection }), jsx("div", { className: style$5["output-content"], children: jsx(OutputContent, { viewSelection: viewSelection, editorOptions: editorOptions, program: program, viewers: viewers }) })] }));
 };
 function getRawFileViewer(editorOptions) {
     return {
@@ -464,27 +425,12 @@ const OutputContent = ({ viewSelection, program, viewers, editorOptions, }) => {
     switch (viewSelection.type) {
         case "file":
             return (jsx(FileOutput, { filename: viewSelection.filename, content: viewSelection.content, viewers: resolvedViewers }));
-        case "errors":
-            return jsx(ErrorTab, { diagnostics: program === null || program === void 0 ? void 0 : program.diagnostics });
         default:
-            return (jsx("div", { css: {
-                    height: "100%",
-                    overflow: "scroll",
-                }, children: program && jsx(TypeGraphViewer, { program: program }) }));
+            return program && jsx(TypeGraphViewer, { program: program });
     }
 };
-const ErrorTabLabel = ({ diagnostics }) => {
-    const errorCount = diagnostics ? diagnostics.length : 0;
-    return (jsxs("div", { children: ["Errors ", errorCount > 0 ? jsx("span", { css: ErrorTabCountStyles, children: errorCount }) : ""] }));
-};
-const ErrorTabCountStyles = css({
-    backgroundColor: tokens.colorStatusDangerBackground3,
-    color: tokens.colorNeutralForegroundOnBrand,
-    padding: "0 5px",
-    borderRadius: "20px",
-});
 const TypeGraphViewer = ({ program }) => {
-    return (jsx(ColorProvider, { colors: TypeGraphColors, children: jsx(TypeSpecProgramViewer, { program: program }) }));
+    return (jsx("div", { className: style$5["type-graph-viewer"], children: jsx(ColorProvider, { colors: TypeGraphColors, children: jsx(TypeSpecProgramViewer, { program: program }) }) }));
 };
 const TypeGraphColors = {
     background: tokens.colorNeutralBackground1,
@@ -497,6 +443,76 @@ const TypeGraphColors = {
     property: tokens.colorPaletteMarigoldForeground2,
 };
 
+var style$4 = {"layout":"playground-module_layout__SCPgt"};
+
+var style$3 = {"list":"diagnostic-list-module_list__6tVpz","item":"diagnostic-list-module_item__BE8Fr","item--error":"diagnostic-list-module_item--error__tnhWA","item--warning":"diagnostic-list-module_item--warning__J7vIN","item-code":"diagnostic-list-module_item-code__AgVjZ","item-loc":"diagnostic-list-module_item-loc__IeYnW"};
+
+const DiagnosticList = ({ diagnostics, onDiagnosticSelected, }) => {
+    if (diagnostics.length === 0) {
+        return jsx("div", { className: style$3["list"], children: "No errors" });
+    }
+    const handleItemSelected = useCallback((diagnostic) => {
+        onDiagnosticSelected === null || onDiagnosticSelected === void 0 ? void 0 : onDiagnosticSelected(diagnostic);
+    }, [onDiagnosticSelected]);
+    return (jsx("div", { className: style$3["list"], children: diagnostics.map((x, i) => {
+            return jsx(DiagnosticItem, { diagnostic: x, onItemSelected: handleItemSelected }, i);
+        }) }));
+};
+const DiagnosticItem = ({ diagnostic, onItemSelected }) => {
+    const handleClick = useCallback(() => {
+        onItemSelected(diagnostic);
+    }, [diagnostic, onItemSelected]);
+    return (jsxs("div", { tabIndex: 0, className: style$3["item"], onClick: handleClick, children: [jsx("div", { className: mergeClasses((style$3["item-severity"],
+                    style$3[diagnostic.severity === "error" ? "item--error" : "item--warning"])), children: diagnostic.severity }), jsx("div", { className: style$3["item-code"], children: diagnostic.code }), jsx("div", { className: style$3["item-message"], children: diagnostic.message }), jsx("div", { className: style$3["item-loc"], children: jsx(DiagnosticTargetLink, { target: diagnostic.target }) })] }));
+};
+const DiagnosticTargetLink = memo(({ target }) => {
+    if (typeof target === "symbol") {
+        return jsx("span", {});
+    }
+    const location = getSourceLocation(target);
+    const file = location.file.path === "/test/main.tsp" ? "" : `${location.file.path}:`;
+    const { line, character } = location.file.getLineAndCharacterOfPosition(location.pos);
+    return (jsxs("span", { children: [file, line + 1, ":", character + 1] }));
+});
+
+var style$2 = {"header":"header-module_header__LyUNg","header--error":"header-module_header--error__8MKzf","error-icon":"header-module_error-icon__gb-oB","header--warning":"header-module_header--warning__QPFEE","warning-icon":"header-module_warning-icon__u14P3","header-content":"header-module_header-content__Uc4HJ","header-chevron":"header-module_header-chevron__HXm6b","header-chevron--collapsed":"header-module_header-chevron--collapsed__wKyHV"};
+
+const ProblemPaneHeader = memo(({ compilationState, ...props }) => {
+    const noProblem = (jsx(Container, { status: "none", ...props, children: "No problems" }));
+    if (compilationState === undefined) {
+        return noProblem;
+    }
+    if ("internalCompilerError" in compilationState) {
+        return (jsxs(Container, { status: "error", ...props, children: [jsx(ErrorCircle16Filled, {}), " Internal Compiler Error"] }));
+    }
+    const diagnostics = compilationState.program.diagnostics;
+    if (diagnostics.length === 0) {
+        return noProblem;
+    }
+    const errors = diagnostics.filter((x) => x.severity === "error");
+    const warnings = diagnostics.filter((x) => x.severity === "warning");
+    return (jsxs(Container, { status: errors.length > 0 ? "error" : "warning", ...props, children: [errors.length > 0 ? (jsxs(Fragment, { children: [jsx(ErrorCircle16Filled, { className: style$2["error-icon"] }), " ", errors.length, " errors"] })) : null, warnings.length > 0 ? (jsxs(Fragment, { children: [jsx(Warning16Filled, { className: style$2["warning-icon"] }), " ", warnings.length, " warnings"] })) : null] }));
+});
+const Container = ({ children, className, status, onClick, collaped }) => {
+    return (jsxs("div", { tabIndex: onClick === undefined ? undefined : 0, className: mergeClasses(style$2["header"], status === "error" && style$2["header--error"], status === "warning" && style$2["header--warning"], className), onClick: onClick, children: [jsx("div", { className: style$2["header-content"], children: children }), jsx(ChevronDown16Regular, { className: mergeClasses(style$2["header-chevron"], collaped && style$2["header-chevron--collapsed"]) })] }));
+};
+
+var style$1 = {"problem-pane":"problem-pane-module_problem-pane__GJKF4","problem-content":"problem-pane-module_problem-content__rYzbh","no-problems":"problem-pane-module_no-problems__Ub8R-","internal-compiler-error":"problem-pane-module_internal-compiler-error__laE4f"};
+
+const ProblemPane = ({ collapsed, compilationState, onHeaderClick, onDiagnosticSelected, }) => {
+    return (jsxs("div", { className: style$1["problem-pane"], children: [jsx(ProblemPaneHeader, { compilationState: compilationState, onClick: onHeaderClick, collaped: collapsed }), jsx("div", { className: style$1["problem-content"], children: jsx(ProblemPaneContent, { compilationState: compilationState, onDiagnosticSelected: onDiagnosticSelected }) })] }));
+};
+const ProblemPaneContent = ({ compilationState, onDiagnosticSelected, }) => {
+    if (compilationState === undefined) {
+        return jsx(Fragment, {});
+    }
+    if ("internalCompilerError" in compilationState) {
+        return (jsx("pre", { className: style$1["internal-compiler-error"], children: compilationState.internalCompilerError.stack }));
+    }
+    const diagnostics = compilationState.program.diagnostics;
+    return diagnostics.length === 0 ? (jsx("div", { className: style$1["no-problems"], children: " No problems" })) : (jsx(DiagnosticList, { diagnostics: diagnostics, onDiagnosticSelected: onDiagnosticSelected }));
+};
+
 function Pane({ children, ...props }) {
     return jsx("div", { ...props, children: children });
 }
@@ -593,7 +609,9 @@ const SplitPane = ({ children, sizes: propSizes, initialSizes: defaultSizes, all
         onDragStart(e);
     }, [onDragStart, sizes, sashPosSizes]);
     const resetPosition = useCallback(() => {
-        updateSizes(defaultSizes);
+        if (defaultSizes) {
+            updateSizes(defaultSizes);
+        }
     }, [defaultSizes, updateSizes]);
     const dragEnd = useCallback((e) => {
         var _a, _b;
@@ -678,7 +696,7 @@ const Playground = (props) => {
         setCompilationState(state);
         if ("program" in state) {
             const markers = state.program.diagnostics.map((diag) => ({
-                ...getMarkerLocation(typespecCompiler, diag.target),
+                ...getMonacoRange(typespecCompiler, diag.target),
                 message: diag.message,
                 severity: diag.severity === "error" ? MarkerSeverity.Error : MarkerSeverity.Warning,
                 tags: diag.code === "deprecated" ? [CompletionItemTag.Deprecated] : undefined,
@@ -758,14 +776,26 @@ const Playground = (props) => {
     const onTypeSpecEditorMount = useCallback(({ editor }) => {
         editorRef.current = editor;
     }, []);
-    return (jsx(PlaygroundContextProvider, { value: { host }, children: jsxs("div", { css: {
-                display: "flex",
-                flexDirection: "column",
-                width: "100%",
-                height: "100%",
-                overflow: "hidden",
-                fontFamily: `"Segoe UI", Tahoma, Geneva, Verdana, sans-serif`,
-            }, children: [jsxs(SplitPane, { initialSizes: ["50%", "50%"], css: { gridArea: "typespeceditor", width: "100%", height: "100%", overflow: "hidden" }, children: [jsxs(Pane, { children: [jsx(EditorCommandBar, { host: host, selectedEmitter: selectedEmitter, onSelectedEmitterChange: onSelectedEmitterChange, compilerOptions: compilerOptions, onCompilerOptionsChange: onCompilerOptionsChange, samples: props.samples, selectedSampleName: selectedSampleName, onSelectedSampleNameChange: onSelectedSampleNameChange, saveCode: saveCode, formatCode: formatCode, newIssue: ((_b = props === null || props === void 0 ? void 0 : props.links) === null || _b === void 0 ? void 0 : _b.githubIssueUrl) ? newIssue : undefined, documentationUrl: (_c = props.links) === null || _c === void 0 ? void 0 : _c.documentationUrl }), jsx(TypeSpecEditor, { model: typespecModel, actions: typespecEditorActions, options: props.editorOptions, onMount: onTypeSpecEditorMount })] }), jsx(Pane, { children: jsx(OutputView, { compilationState: compilationState, editorOptions: props.editorOptions, viewers: (_d = props.emitterViewers) === null || _d === void 0 ? void 0 : _d[selectedEmitter] }) })] }), (_e = props.footer) !== null && _e !== void 0 ? _e : jsx(DefaultFooter, {})] }) }));
+    const [verticalPaneSizes, setVerticalPaneSizes] = useState(verticalPaneSizesConst.collapsed);
+    const toggleProblemPane = useCallback(() => {
+        setVerticalPaneSizes((value) => {
+            return value === verticalPaneSizesConst.collapsed
+                ? verticalPaneSizesConst.expanded
+                : verticalPaneSizesConst.collapsed;
+        });
+    }, [setVerticalPaneSizes]);
+    const onVerticalPaneSizeChange = useCallback((sizes) => {
+        setVerticalPaneSizes(sizes);
+    }, [setVerticalPaneSizes]);
+    const handleDiagnosticSelected = useCallback((diagnostic) => {
+        var _a;
+        (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.setSelection(getMonacoRange(host.compiler, diagnostic.target));
+    }, [setVerticalPaneSizes]);
+    return (jsx(PlaygroundContextProvider, { value: { host }, children: jsxs("div", { className: style$4["layout"], children: [jsxs(SplitPane, { sizes: verticalPaneSizes, onChange: onVerticalPaneSizeChange, split: "horizontal", children: [jsx(Pane, { children: jsxs(SplitPane, { initialSizes: ["50%", "50%"], children: [jsxs(Pane, { children: [jsx(EditorCommandBar, { host: host, selectedEmitter: selectedEmitter, onSelectedEmitterChange: onSelectedEmitterChange, compilerOptions: compilerOptions, onCompilerOptionsChange: onCompilerOptionsChange, samples: props.samples, selectedSampleName: selectedSampleName, onSelectedSampleNameChange: onSelectedSampleNameChange, saveCode: saveCode, formatCode: formatCode, newIssue: ((_b = props === null || props === void 0 ? void 0 : props.links) === null || _b === void 0 ? void 0 : _b.githubIssueUrl) ? newIssue : undefined, documentationUrl: (_c = props.links) === null || _c === void 0 ? void 0 : _c.documentationUrl }), jsx(TypeSpecEditor, { model: typespecModel, actions: typespecEditorActions, options: props.editorOptions, onMount: onTypeSpecEditorMount })] }), jsx(Pane, { children: jsx(OutputView, { compilationState: compilationState, editorOptions: props.editorOptions, viewers: (_d = props.emitterViewers) === null || _d === void 0 ? void 0 : _d[selectedEmitter] }) })] }) }), jsx(Pane, { minSize: 30, children: jsx(ProblemPane, { collapsed: verticalPaneSizes[1] === verticalPaneSizesConst.collapsed[1], compilationState: compilationState, onHeaderClick: toggleProblemPane, onDiagnosticSelected: handleDiagnosticSelected }) })] }), (_e = props.footer) !== null && _e !== void 0 ? _e : jsx(DefaultFooter, {})] }) }));
+};
+const verticalPaneSizesConst = {
+    collapsed: [undefined, 30],
+    expanded: [undefined, 200],
 };
 const outputDir = "./tsp-output";
 async function compile(host, content, selectedEmitter, options) {