@typespec/playground 0.2.1 → 0.2.2

package/dist/index.css

@@ -145,25 +145,6 @@
   overflow: hidden;
 }
 
-.problem-pane-module_problem-pane__GJKF4 {
-  height: 100%;
-  background-color: var(--colorNeutralBackground3);
-  display: flex;
-  flex-direction: column;
-  max-height: 100%;
-}
-
-.problem-pane-module_problem-content__rYzbh {
-  overflow-y: auto;
-}
-.problem-pane-module_no-problems__Ub8R- {
-  padding: 10px;
-}
-
-.problem-pane-module_internal-compiler-error__laE4f {
-  padding: 10px;
-}
-
 .file-output-module_file-output__YBaE7 {
   position: relative;
   height: 100%;
@@ -195,34 +176,23 @@
   background-color: var(--colorNeutralBackground5) !important;
 }
 
-.diagnostic-list-module_list__6tVpz {
-}
-
-.diagnostic-list-module_item__BE8Fr {
-  cursor: pointer;
+.problem-pane-module_problem-pane__GJKF4 {
+  height: 100%;
+  background-color: var(--colorNeutralBackground3);
   display: flex;
-  gap: 10px;
-  padding: 0 10px;
-}
-
-.diagnostic-list-module_item__BE8Fr:hover {
-  background-color: var(--colorNeutralBackground3Hover);
-}
-
-.diagnostic-list-module_item--error__tnhWA {
-  color: var(--colorStatusDangerForeground1);
+  flex-direction: column;
+  max-height: 100%;
 }
 
-.diagnostic-list-module_item--warning__J7vIN {
-  color: var(--colorStatusWarningForeground1);
+.problem-pane-module_problem-content__rYzbh {
+  overflow-y: auto;
 }
-
-.diagnostic-list-module_item-code__AgVjZ {
-  color: var(--colorBrandForeground2);
+.problem-pane-module_no-problems__Ub8R- {
+  padding: 10px;
 }
 
-.diagnostic-list-module_item-loc__IeYnW {
-  color: var(--colorNeutralForeground3);
+.problem-pane-module_internal-compiler-error__laE4f {
+  padding: 10px;
 }
 
 .header-module_header__LyUNg {
@@ -267,6 +237,36 @@
   transform: rotate(90deg);
 }
 
+.diagnostic-list-module_list__6tVpz {
+}
+
+.diagnostic-list-module_item__BE8Fr {
+  cursor: pointer;
+  display: flex;
+  gap: 10px;
+  padding: 0 10px;
+}
+
+.diagnostic-list-module_item__BE8Fr:hover {
+  background-color: var(--colorNeutralBackground3Hover);
+}
+
+.diagnostic-list-module_item--error__tnhWA {
+  color: var(--colorStatusDangerForeground1);
+}
+
+.diagnostic-list-module_item--warning__J7vIN {
+  color: var(--colorStatusWarningForeground1);
+}
+
+.diagnostic-list-module_item-code__AgVjZ {
+  color: var(--colorBrandForeground2);
+}
+
+.diagnostic-list-module_item-loc__IeYnW {
+  color: var(--colorNeutralForeground3);
+}
+
 .emitter-options-form-module_form__dm2RP {
   display: flex;
   flex-direction: column;

package/dist/index.js

@@ -1,4 +1,4 @@
-export { c as createBrowserHost, a as createUrlStateStorage, r as registerMonacoLanguage } from './state-storage-C_Vk3Rrw.js';
+export { c as createBrowserHost, a as createUrlStateStorage, r as registerMonacoLanguage } from './state-storage-BuvyP4WR.js';
 import '@typespec/compiler';
 import 'monaco-editor';
 import 'vscode-languageserver';

package/dist/react/index.js

@@ -5,7 +5,7 @@ import debounce from 'debounce';
 import { editor, Uri, MarkerSeverity, KeyMod, KeyCode } from 'monaco-editor';
 import { CompletionItemTag } from 'vscode-languageserver';
 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-C_Vk3Rrw.js';
+import { g as getMonacoRange, c as createBrowserHost, r as registerMonacoLanguage, a as createUrlStateStorage } from '../state-storage-BuvyP4WR.js';
 import { ColorProvider, TypeSpecProgramViewer } from '@typespec/html-program-viewer';
 import { getSourceLocation } from '@typespec/compiler';
 import { createRoot } from 'react-dom/client';
@@ -32,10 +32,9 @@ const FooterItem = ({ children, link, className }) => {
 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;
+    const latest = versionSelector?.latest;
+    const selected = versionSelector?.selected ?? host.compiler.MANIFEST.version;
     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 }) => {
@@ -76,14 +75,13 @@ const SamplesDropdown = ({ samples, selectedSampleName, onSelectedSampleNameChan
             onSelectedSampleNameChange(evt.target.value);
         }
     }, [onSelectedSampleNameChange]);
-    return (jsxs(Select, { className: "sample-dropdown", onChange: handleSelected, value: selectedSampleName !== null && selectedSampleName !== void 0 ? selectedSampleName : "", "aria-label": "Select a sample", children: [jsx("option", { value: "", disabled: true, children: "Select sample..." }), options] }));
+    return (jsxs(Select, { className: "sample-dropdown", onChange: handleSelected, value: selectedSampleName ?? "", "aria-label": "Select a sample", 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;
+    const emitterOptionsSchema = library.definition?.emitter?.options?.properties;
     if (emitterOptionsSchema === undefined) {
         return jsx(Fragment, { children: "\"No options\"" });
     }
@@ -98,15 +96,13 @@ const EmitterOptionsForm = ({ library, options, optionsChanged, }) => {
         });
     }, [options, optionsChanged]);
     return (jsx("div", { className: style$9["form"], children: entries.map(([key, value]) => {
-            var _a;
-            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));
+            return (jsx("div", { className: style$9["form-item"], children: jsx(JsonSchemaPropertyInput, { emitterOptions: options[library.name] ?? {}, name: key, prop: value, onChange: handleChange }) }, key));
         }) }));
 };
 const JsonSchemaPropertyInput = ({ emitterOptions, name, prop, onChange, }) => {
-    var _a;
     const prettyName = useMemo(() => name[0].toUpperCase() + name.slice(1).replace(/-/g, " "), [name]);
     const inputId = useId("input");
-    const value = (_a = emitterOptions[name]) !== null && _a !== void 0 ? _a : prop.default;
+    const value = emitterOptions[name] ?? prop.default;
     const handleChange = useCallback((_, data) => onChange({ name, value: "value" in data ? data.value : data.checked }), [onChange]);
     switch (prop.type) {
         case "boolean":
@@ -119,17 +115,15 @@ const JsonSchemaPropertyInput = ({ emitterOptions, name, prop, onChange, }) => {
 
 const LinterForm = ({ libraries, linterRuleSet, onLinterRuleSetChanged, }) => {
     const rulesets = Object.values(libraries).flatMap((lib) => {
-        var _a, _b, _c;
         // eslint-disable-next-line deprecation/deprecation
-        const linter = (_a = lib.linter) !== null && _a !== void 0 ? _a : (_b = lib.definition) === null || _b === void 0 ? void 0 : _b.linter;
-        return Object.keys((_c = linter === null || linter === void 0 ? void 0 : linter.ruleSets) !== null && _c !== void 0 ? _c : {}).map((x) => `${lib.name}/${x}`);
+        const linter = lib.linter ?? lib.definition?.linter;
+        return Object.keys(linter?.ruleSets ?? {}).map((x) => `${lib.name}/${x}`);
     });
     if (rulesets.length === 0) {
         return jsx(Fragment, { children: "No ruleset available" });
     }
     const handleChange = (ruleSet, checked) => {
-        var _a;
-        const ruleSets = (_a = linterRuleSet.extends) !== null && _a !== void 0 ? _a : [];
+        const ruleSets = linterRuleSet.extends ?? [];
         const updatedRuleSets = checked
             ? [...ruleSets, ruleSet]
             : ruleSets.filter((x) => x !== ruleSet);
@@ -138,8 +132,7 @@ const LinterForm = ({ libraries, linterRuleSet, onLinterRuleSetChanged, }) => {
         });
     };
     return (jsx(Fragment, { children: rulesets.map((ruleSet) => {
-            var _a;
-            return (jsx(RuleSetCheckbox, { ruleSet: ruleSet, checked: (_a = linterRuleSet.extends) === null || _a === void 0 ? void 0 : _a.includes(ruleSet), onChange: handleChange }, ruleSet));
+            return (jsx(RuleSetCheckbox, { ruleSet: ruleSet, checked: linterRuleSet.extends?.includes(ruleSet), onChange: handleChange }, ruleSet));
         }) }));
 };
 const RuleSetCheckbox = ({ ruleSet, checked, onChange }) => {
@@ -150,7 +143,6 @@ const RuleSetCheckbox = ({ ruleSet, checked, onChange }) => {
 };
 
 const CompilerSettings = ({ selectedEmitter, host, options, onOptionsChanged, }) => {
-    var _a, _b;
     const emitterOptionsChanged = useCallback((emitterOptions) => {
         onOptionsChanged({
             ...options,
@@ -158,14 +150,14 @@ const CompilerSettings = ({ selectedEmitter, host, options, onOptionsChanged, })
         });
     }, [options]);
     const library = host.libraries[selectedEmitter];
-    const linterRuleSet = (_a = options.linterRuleSet) !== null && _a !== void 0 ? _a : {};
+    const linterRuleSet = options.linterRuleSet ?? {};
     const linterRuleSetChanged = useCallback((linterRuleSet) => {
         onOptionsChanged({
             ...options,
             linterRuleSet,
         });
     }, [options]);
-    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 })] }));
+    return (jsxs("div", { children: [jsxs(Fragment, { children: ["Emitter: ", selectedEmitter] }), jsx(Divider, { style: { marginTop: 20 } }), jsx("h3", { children: "Options" }), library && (jsx(EmitterOptionsForm, { library: library, options: options.options ?? {}, 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, }) => {
@@ -200,15 +192,14 @@ const Editor = ({ model, options, actions, onMount }) => {
             automaticLayout: true,
             ...options,
         });
-        onMount === null || onMount === void 0 ? void 0 : onMount({ editor: editorRef.current });
+        onMount?.({ editor: editorRef.current });
     }, []);
     useEffect(() => {
-        var _a;
-        editor.setTheme((_a = options.theme) !== null && _a !== void 0 ? _a : "typespec");
+        editor.setTheme(options.theme ?? "typespec");
     }, [options.theme]);
     useEffect(() => {
         const disposables = [];
-        for (const command of actions !== null && actions !== void 0 ? actions : []) {
+        for (const command of actions ?? []) {
             disposables.push(editorRef.current.addAction(command));
         }
         return () => {
@@ -225,9 +216,8 @@ const Editor = ({ model, options, actions, onMount }) => {
 };
 function useMonacoModel(uri, language) {
     return useMemo(() => {
-        var _a;
         const monacoUri = Uri.parse(uri);
-        return (_a = editor.getModel(monacoUri)) !== null && _a !== void 0 ? _a : editor.createModel("", language, monacoUri);
+        return editor.getModel(monacoUri) ?? editor.createModel("", language, monacoUri);
     }, [uri, language]);
 }
 
@@ -297,8 +287,7 @@ const FileOutput = ({ filename, content, viewers }) => {
         setSelected(data.value);
     }, [selected]);
     const selectedRender = useMemo(() => {
-        var _a;
-        return (_a = viewers.find((x) => x.key === selected)) === null || _a === void 0 ? void 0 : _a.render;
+        return viewers.find((x) => x.key === selected)?.render;
     }, [selected, viewers]);
     return (jsxs("div", { className: style$7["file-output"], children: [jsx("div", { className: style$7["viewer-selector"], children: jsx(Select, { value: selected, onChange: handleSelected, "aria-label": "Select viewer", children: viewers.map(({ key, label }) => (jsx("option", { value: key, children: label }, key))) }) }), selectedRender && selectedRender({ filename, content })] }));
 };
@@ -384,7 +373,7 @@ const OutputViewInternal = ({ compilationResult, viewers, editorOptions }) => {
         if (viewSelection.type === "file") {
             if (outputFiles.length > 0) {
                 const fileStillThere = outputFiles.find((x) => x === viewSelection.filename);
-                void loadOutputFile(fileStillThere !== null && fileStillThere !== void 0 ? fileStillThere : outputFiles[0]);
+                void loadOutputFile(fileStillThere ?? outputFiles[0]);
             }
             else {
                 setViewSelection({ type: "file", filename: viewSelection.filename, content: "" });
@@ -424,7 +413,7 @@ function getRawFileViewer(editorOptions) {
     };
 }
 const OutputContent = ({ viewSelection, program, viewers, editorOptions, }) => {
-    const resolvedViewers = useMemo(() => [getRawFileViewer(editorOptions), ...(viewers !== null && viewers !== void 0 ? viewers : [])], [viewers]);
+    const resolvedViewers = useMemo(() => [getRawFileViewer(editorOptions), ...(viewers ?? [])], [viewers]);
     switch (viewSelection.type) {
         case "file":
             return (jsx(FileOutput, { filename: viewSelection.filename, content: viewSelection.content, viewers: resolvedViewers }));
@@ -455,7 +444,7 @@ const DiagnosticList = ({ diagnostics, onDiagnosticSelected, }) => {
         return jsx("div", { className: style$3["list"], children: "No errors" });
     }
     const handleItemSelected = useCallback((diagnostic) => {
-        onDiagnosticSelected === null || onDiagnosticSelected === void 0 ? void 0 : onDiagnosticSelected(diagnostic);
+        onDiagnosticSelected?.(diagnostic);
     }, [onDiagnosticSelected]);
     return (jsx("div", { className: style$3["list"], children: diagnostics.map((x, i) => {
             return jsx(DiagnosticItem, { diagnostic: x, onItemSelected: handleItemSelected }, i);
@@ -546,7 +535,6 @@ const Sash = ({ className, render, onDragStart, onDragging, onDragEnd, onReset,
 };
 
 const SplitPane = ({ children, sizes: propSizes, initialSizes: defaultSizes, allowResize = true, split = "vertical", className: wrapClassName, sashRender = (_, active) => jsx(SashContent, { dragging: active }), resizerSize = 4, performanceMode = false, onChange = () => null, onDragStart = () => null, onDragEnd = () => null, ...others }) => {
-    var _a;
     const [resolvedPropSize, updateSizes] = useControllableValue(propSizes, defaultSizes, onChange);
     const axis = useRef({ x: 0, y: 0 });
     const wrapper = useRef(null);
@@ -555,8 +543,7 @@ const SplitPane = ({ children, sizes: propSizes, initialSizes: defaultSizes, all
     const [isDragging, setDragging] = useState(false);
     useEffect(() => {
         const resizeObserver = new ResizeObserver(() => {
-            var _a, _b;
-            setWrapperRect((_b = (_a = wrapper === null || wrapper === void 0 ? void 0 : wrapper.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : {});
+            setWrapperRect(wrapper?.current?.getBoundingClientRect() ?? {});
         });
         resizeObserver.observe(wrapper.current);
         return () => {
@@ -568,11 +555,11 @@ const SplitPane = ({ children, sizes: propSizes, initialSizes: defaultSizes, all
         splitPos: split === "vertical" ? "left" : "top",
         splitAxis: split === "vertical" ? "x" : "y",
     }), [split]);
-    const wrapSize = (_a = wrapperRect[sizeName]) !== null && _a !== void 0 ? _a : 0;
+    const wrapSize = wrapperRect[sizeName] ?? 0;
     // Get limit sizes via children
     const paneLimitSizes = useMemo(() => children.map((childNode) => {
         const limits = [0, Infinity];
-        if ((childNode === null || childNode === void 0 ? void 0 : childNode.type) === Pane) {
+        if (childNode?.type === Pane) {
             const { minSize, maxSize } = childNode.props;
             limits[0] = assertsSize(minSize, wrapSize, 0);
             limits[1] = assertsSize(maxSize, wrapSize);
@@ -604,8 +591,7 @@ const SplitPane = ({ children, sizes: propSizes, initialSizes: defaultSizes, all
     }, [...resolvedPropSize, children.length, wrapSize]);
     const sashPosSizes = useMemo(() => sizes.reduce((a, b) => [...a, a[a.length - 1] + b], [0]), [...sizes]);
     const dragStart = useCallback((e) => {
-        var _a, _b;
-        (_b = (_a = document === null || document === void 0 ? void 0 : document.body) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add(style["split-disabled"]);
+        document?.body?.classList?.add(style["split-disabled"]);
         axis.current = { x: e.pageX, y: e.pageY };
         cacheSizes.current = { sizes, sashPosSizes };
         setDragging(true);
@@ -617,8 +603,7 @@ const SplitPane = ({ children, sizes: propSizes, initialSizes: defaultSizes, all
         }
     }, [defaultSizes, updateSizes]);
     const dragEnd = useCallback((e) => {
-        var _a, _b;
-        (_b = (_a = document === null || document === void 0 ? void 0 : document.body) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove(style["split-disabled"]);
+        document?.body?.classList?.remove(style["split-disabled"]);
         axis.current = { x: e.pageX, y: e.pageY };
         cacheSizes.current = { sizes, sashPosSizes };
         setDragging(false);
@@ -678,16 +663,14 @@ function assertsSize(size, sum, defaultValue = Infinity) {
 }
 
 const Playground = (props) => {
-    var _a, _b, _c, _d;
     const { host, onSave } = props;
     const editorRef = useRef(undefined);
     const [selectedEmitter, onSelectedEmitterChange] = useControllableValue(props.emitter, props.defaultEmitter, props.onEmitterChange);
-    const [compilerOptions, onCompilerOptionsChange] = useControllableValue(props.compilerOptions, (_a = props.defaultCompilerOptions) !== null && _a !== void 0 ? _a : {}, props.onCompilerOptionsChange);
+    const [compilerOptions, onCompilerOptionsChange] = useControllableValue(props.compilerOptions, props.defaultCompilerOptions ?? {}, props.onCompilerOptionsChange);
     const [selectedSampleName, onSelectedSampleNameChange] = useControllableValue(props.sampleName, props.defaultSampleName, props.onSampleNameChange);
     const [content, setContent] = useState(props.defaultContent);
     const isSampleUntouched = useMemo(() => {
-        var _a, _b;
-        return Boolean(selectedSampleName && content === ((_b = (_a = props.samples) === null || _a === void 0 ? void 0 : _a[selectedSampleName]) === null || _b === void 0 ? void 0 : _b.content));
+        return Boolean(selectedSampleName && content === props.samples?.[selectedSampleName]?.content);
     }, [content, selectedSampleName, props.samples]);
     const typespecModel = useMonacoModel("inmemory://test/main.tsp", "typespec");
     const [compilationState, setCompilationState] = useState(undefined);
@@ -704,7 +687,7 @@ const Playground = (props) => {
                 severity: diag.severity === "error" ? MarkerSeverity.Error : MarkerSeverity.Warning,
                 tags: diag.code === "deprecated" ? [CompletionItemTag.Deprecated] : undefined,
             }));
-            editor.setModelMarkers(typespecModel, "owner", markers !== null && markers !== void 0 ? markers : []);
+            editor.setModelMarkers(typespecModel, "owner", markers ?? []);
         }
         else {
             editor.setModelMarkers(typespecModel, "owner", []);
@@ -716,8 +699,7 @@ const Playground = (props) => {
         }
     }, [typespecModel]);
     useEffect(() => {
-        var _a;
-        updateTypeSpec((_a = props.defaultContent) !== null && _a !== void 0 ? _a : "");
+        updateTypeSpec(props.defaultContent ?? "");
     }, []);
     useEffect(() => {
         if (selectedSampleName && props.samples) {
@@ -762,8 +744,7 @@ const Playground = (props) => {
         isSampleUntouched,
     ]);
     const formatCode = useCallback(() => {
-        var _a, _b;
-        void ((_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.getAction("editor.action.formatDocument")) === null || _b === void 0 ? void 0 : _b.run());
+        void editorRef.current?.getAction("editor.action.formatDocument")?.run();
     }, [typespecModel]);
     const fileBug = useCallback(async () => {
         if (props.onFileBug) {
@@ -790,10 +771,9 @@ const Playground = (props) => {
         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));
+        editorRef.current?.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, fileBug: props.onFileBug ? fileBug : undefined, documentationUrl: (_b = props.links) === null || _b === void 0 ? void 0 : _b.documentationUrl }), jsx(TypeSpecEditor, { model: typespecModel, actions: typespecEditorActions, options: props.editorOptions, onMount: onTypeSpecEditorMount })] }), jsx(Pane, { children: jsx(OutputView, { compilationState: compilationState, editorOptions: props.editorOptions, viewers: (_c = props.emitterViewers) === null || _c === void 0 ? void 0 : _c[selectedEmitter] }) })] }) }), jsx(Pane, { minSize: 30, children: jsx(ProblemPane, { collapsed: verticalPaneSizes[1] === verticalPaneSizesConst.collapsed[1], compilationState: compilationState, onHeaderClick: toggleProblemPane, onDiagnosticSelected: handleDiagnosticSelected }) })] }), (_d = props.footer) !== null && _d !== void 0 ? _d : jsx(DefaultFooter, {})] }) }));
+    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, fileBug: props.onFileBug ? fileBug : undefined, documentationUrl: props.links?.documentationUrl }), jsx(TypeSpecEditor, { model: typespecModel, actions: typespecEditorActions, options: props.editorOptions, onMount: onTypeSpecEditorMount })] }), jsx(Pane, { children: jsx(OutputView, { compilationState: compilationState, editorOptions: props.editorOptions, viewers: props.emitterViewers?.[selectedEmitter] }) })] }) }), jsx(Pane, { minSize: 30, children: jsx(ProblemPane, { collapsed: verticalPaneSizes[1] === verticalPaneSizesConst.collapsed[1], compilationState: compilationState, onHeaderClick: toggleProblemPane, onDiagnosticSelected: handleDiagnosticSelected }) })] }), props.footer ?? jsx(DefaultFooter, {})] }) }));
 };
 const verticalPaneSizesConst = {
     collapsed: [undefined, 30],
@@ -801,7 +781,6 @@ const verticalPaneSizesConst = {
 };
 const outputDir = "./tsp-output";
 async function compile(host, content, selectedEmitter, options) {
-    var _a;
     await host.writeFile("main.tsp", content);
     await emptyOutputDir(host);
     try {
@@ -811,7 +790,7 @@ async function compile(host, content, selectedEmitter, options) {
             options: {
                 ...options.options,
                 [selectedEmitter]: {
-                    ...(_a = options.options) === null || _a === void 0 ? void 0 : _a[selectedEmitter],
+                    ...options.options?.[selectedEmitter],
                     "emitter-output-dir": "tsp-output",
                 },
             },
@@ -884,16 +863,13 @@ const StandalonePlayground = (config) => {
         void navigator.clipboard.writeText(window.location.toString());
         dispatchToast(jsxs(Toast, { children: [jsx(ToastTitle, { children: "Saved!" }), jsx(ToastBody, { children: "Playground link has been copied to the clipboard." })] }), { intent: "success" });
     }, [dispatchToast, context]);
-    const fixedOptions = useMemo(() => {
-        var _a;
-        return context && {
-            host: context.host,
-            libraries: config.libraries,
-            defaultContent: context.initialState.content,
-            defaultEmitter: (_a = context.initialState.emitter) !== null && _a !== void 0 ? _a : config.defaultEmitter,
-            defaultCompilerOptions: context.initialState.options,
-            defaultSampleName: context.initialState.sampleName,
-        };
+    const fixedOptions = useMemo(() => context && {
+        host: context.host,
+        libraries: config.libraries,
+        defaultContent: context.initialState.content,
+        defaultEmitter: context.initialState.emitter ?? config.defaultEmitter,
+        defaultCompilerOptions: context.initialState.options,
+        defaultSampleName: context.initialState.sampleName,
     }, [context]);
     if (context === undefined || fixedOptions === undefined) {
         return config.fallback;