@typespec/playground 0.2.0 → 0.2.1

package/dist/index.css

@@ -24,15 +24,6 @@
   overflow: auto;
 }
 
-.footer-version-item-module_version-item__pjuvV {
-  padding: 0;
-}
-.footer-version-item-module_button__70iqf {
-  cursor: pointer;
-  height: 100%;
-  padding: 0 5px;
-}
-
 .footer-module_footer__QqUEE {
   grid-area: footer;
   display: flex;
@@ -52,6 +43,15 @@
   background-color: #063a5c;
 }
 
+.footer-version-item-module_version-item__pjuvV {
+  padding: 0;
+}
+.footer-version-item-module_button__70iqf {
+  cursor: pointer;
+  height: 100%;
+  padding: 0 5px;
+}
+
 .output-view-module_output-view__uT5Ae {
   display: flex;
   flex-direction: column;
@@ -145,6 +145,25 @@
   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%;
@@ -176,25 +195,6 @@
   background-color: var(--colorNeutralBackground5) !important;
 }
 
-.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;
-}
-
 .diagnostic-list-module_list__6tVpz {
 }
 

package/dist/index.js

@@ -1,4 +1,4 @@
-export { c as createBrowserHost, a as createUrlStateStorage, r as registerMonacoLanguage } from './state-storage-II_txdR1.js';
+export { c as createBrowserHost, a as createUrlStateStorage, r as registerMonacoLanguage } from './state-storage-C_Vk3Rrw.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-II_txdR1.js';
+import { g as getMonacoRange, c as createBrowserHost, r as registerMonacoLanguage, a as createUrlStateStorage } from '../state-storage-C_Vk3Rrw.js';
 import { ColorProvider, TypeSpecProgramViewer } from '@typespec/html-program-viewer';
 import { getSourceLocation } from '@typespec/compiler';
 import { createRoot } from 'react-dom/client';
@@ -50,7 +50,7 @@ const VersionSelector = memo(({ versions, selected, latest, onChange }) => {
     const changeVersion = useCallback((ev, data) => {
         onChange(versions.find((x) => x.name === data.value));
     }, [versions, onChange]);
-    return (jsxs("div", { children: [jsx(Title3, { children: "Select release" }), jsx(Select, { value: selected, onChange: changeVersion, children: versions.map((version) => (jsxs("option", { value: version.name, children: [version.label, " ", version.name === latest ? "(latest)" : ""] }, version.name))) })] }));
+    return (jsxs("div", { children: [jsx(Title3, { children: "Select release" }), jsx(Select, { value: selected, onChange: changeVersion, "aria-label": "Select version", children: versions.map((version) => (jsxs("option", { value: version.name, children: [version.label, " ", version.name === latest ? "(latest)" : ""] }, version.name))) })] }));
 });
 
 const Footer = ({ className, children }) => {
@@ -64,7 +64,7 @@ const EmitterDropdown = ({ emitters, onSelectedEmitterChange, selectedEmitter, }
     const handleSelected = useCallback((evt) => {
         onSelectedEmitterChange(evt.target.value);
     }, [onSelectedEmitterChange]);
-    return (jsxs(Select, { className: "sample-dropdown", onChange: handleSelected, value: selectedEmitter, children: [jsx("option", { value: "", disabled: true, children: "Select emitter..." }), options] }));
+    return (jsxs(Select, { className: "sample-dropdown", onChange: handleSelected, value: selectedEmitter, "aria-label": "Select an emitter", children: [jsx("option", { value: "", disabled: true, children: "Select emitter..." }), options] }));
 };
 
 const SamplesDropdown = ({ samples, selectedSampleName, onSelectedSampleNameChange, }) => {
@@ -76,7 +76,7 @@ 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 : "", children: [jsx("option", { value: "", disabled: true, children: "Select sample..." }), options] }));
+    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] }));
 };
 
 var style$9 = {"form":"emitter-options-form-module_form__dm2RP","item":"emitter-options-form-module_item__WocHP","switch":"emitter-options-form-module_switch__d4EQs"};
@@ -170,7 +170,7 @@ const CompilerSettings = ({ selectedEmitter, host, options, onOptionsChanged, })
 
 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 }) })] }) })] }));
+    return (jsxs(Dialog, { children: [jsx(DialogTrigger, { children: jsx(ToolbarButton, { icon: jsx(Settings24Regular, {}), "aria-label": "Open Settings" }) }), jsx(DialogSurface, { children: jsxs(DialogBody, { children: [jsx(DialogTitle, { children: "Settings" }), jsx(DialogContent, { children: jsx(CompilerSettings, { host: host, selectedEmitter: selectedEmitter, options: compilerOptions, onOptionsChanged: onCompilerOptionsChange }) })] }) })] }));
 };
 
 var style$8 = {"bar":"editor-command-bar-module_bar__5q4D5","divider":"editor-command-bar-module_divider__iDahk","spacer":"editor-command-bar-module_spacer__hlHE9"};
@@ -300,7 +300,7 @@ 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", { 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 })] }));
+    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 })] }));
 };
 
 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"};
@@ -503,7 +503,7 @@ const Container = ({ children, className, status, onClick, collaped }) => {
 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 }) })] }));
+    return (jsxs("div", { className: style$1["problem-pane"], children: [jsx(ProblemPaneHeader, { compilationState: compilationState, onClick: onHeaderClick, collaped: collapsed }), jsx("div", { className: style$1["problem-content"], "aria-hidden": collapsed, children: jsx(ProblemPaneContent, { compilationState: compilationState, onDiagnosticSelected: onDiagnosticSelected }) })] }));
 };
 const ProblemPaneContent = ({ compilationState, onDiagnosticSelected, }) => {
     if (compilationState === undefined) {