@typespec/playground 0.13.0-dev.2 → 0.13.0-dev.4

package/dist/index.js

@@ -1,4 +1,4 @@
-export { c as createBrowserHost, r as registerMonacoLanguage } from './services-CzxNzZLi.js';
+export { c as createBrowserHost, r as registerMonacoLanguage } from './services-Z619RuQS.js';
 export { createUrlStateStorage } from './state-storage.js';
 
 function registerMonacoDefaultWorkersForVite() {

package/dist/react/index.js

@@ -1,13 +1,14 @@
 import require$$0, { createContext, useContext, memo, useCallback, useRef, useEffect, useMemo, useState, useId as useId$1 } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { mergeClasses, Popover, PopoverTrigger, PopoverSurface, Title3, Table, TableHeader, TableRow, TableHeaderCell, TableBody, TableCell, Select, tokens, Card, Text, Tooltip, ToolbarButton, OverlayDrawer, DrawerHeader, DrawerHeaderTitle, Button, DrawerBody, useId, Label, Checkbox, RadioGroup, Radio, Input, Switch, Divider, Dialog, DialogTrigger, DialogSurface, DialogBody, DialogTitle, DialogContent, Toolbar, Link, TabList, Tab, useToastController, Toast, ToastTitle, ToastBody, Toaster, FluentProvider, webLightTheme } from '@fluentui/react-components';
+import { mergeClasses, Popover, PopoverTrigger, PopoverSurface, Title3, Table, TableHeader, TableRow, TableHeaderCell, TableBody, TableCell, Select, tokens, Card, Text, Tooltip, ToolbarButton, OverlayDrawer, DrawerHeader, DrawerHeaderTitle, Button, DrawerBody, Toolbar, Link, useId, Label, Checkbox, RadioGroup, Radio, Input, Switch, Subtitle2, TabList, Tab, useToastController, Toast, ToastTitle, ToastBody, Toaster, FluentProvider, webLightTheme } from '@fluentui/react-components';
 import { getSourceLocation } from '@typespec/compiler';
 import { editor, Uri, MarkerSeverity, KeyMod, KeyCode } from 'monaco-editor';
 import { $ } from '@typespec/compiler/typekit';
-import { DocumentBulletList24Regular, Dismiss24Regular, Settings24Regular, Save16Regular, Broom16Filled, Bug16Regular, FolderListRegular, DataLineRegular, ErrorCircle16Filled, Warning16Filled, ChevronDown16Regular } from '@fluentui/react-icons';
+import { DocumentBulletList24Regular, Dismiss24Regular, Save16Regular, Broom16Filled, Bug16Regular, SettingsRegular, FolderListRegular, DataLineRegular, ErrorCircle16Filled, Warning16Filled, ChevronDown16Regular } from '@fluentui/react-icons';
 import debounce from 'debounce';
 import { CompletionItemTag } from 'vscode-languageserver';
-import { a as resolveVirtualPath, p as printDebugInfo, d as debugGlobals, g as getMonacoRange, u as updateDiagnosticsForCodeFixes, c as createBrowserHost, r as registerMonacoLanguage } from '../services-CzxNzZLi.js';
+import { a as resolveVirtualPath, p as printDebugInfo, d as debugGlobals, g as getMonacoRange, u as updateDiagnosticsForCodeFixes, c as createBrowserHost, r as registerMonacoLanguage } from '../services-Z619RuQS.js';
+import { stringify, parse } from 'yaml';
 import { ErrorBoundary } from 'react-error-boundary';
 import { TypeGraph } from '@typespec/html-program-viewer/react';
 import '@typespec/html-program-viewer/style.css';
@@ -26,7 +27,7 @@ function usePlaygroundContext() {
 
 const list = "_list_wrnwm_1";
 const item$1 = "_item_wrnwm_4";
-const style$b = {
+const style$e = {
 	list: list,
 	item: item$1,
 	"item--error": "_item--error_wrnwm_15",
@@ -46,9 +47,9 @@ const DiagnosticList = ({
     [onDiagnosticSelected]
   );
   if (diagnostics.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: style$b["list"], children: "No errors" });
+    return /* @__PURE__ */ jsx("div", { className: style$e["list"], children: "No errors" });
   }
-  return /* @__PURE__ */ jsx("div", { className: style$b["list"], children: diagnostics.map((x, i) => {
+  return /* @__PURE__ */ jsx("div", { className: style$e["list"], children: diagnostics.map((x, i) => {
     return /* @__PURE__ */ jsx(DiagnosticItem, { diagnostic: x, onItemSelected: handleItemSelected }, i);
   }) });
 };
@@ -56,19 +57,19 @@ const DiagnosticItem = ({ diagnostic, onItemSelected }) => {
   const handleClick = useCallback(() => {
     onItemSelected(diagnostic);
   }, [diagnostic, onItemSelected]);
-  return /* @__PURE__ */ jsxs("div", { tabIndex: 0, className: style$b["item"], onClick: handleClick, children: [
+  return /* @__PURE__ */ jsxs("div", { tabIndex: 0, className: style$e["item"], onClick: handleClick, children: [
     /* @__PURE__ */ jsx(
       "div",
       {
         className: mergeClasses(
-          (style$b[diagnostic.severity === "error" ? "item--error" : "item--warning"])
+          (style$e[diagnostic.severity === "error" ? "item--error" : "item--warning"])
         ),
         children: diagnostic.severity
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: style$b["item-code"], children: diagnostic.code }),
-    /* @__PURE__ */ jsx("div", { className: style$b["item-message"], children: diagnostic.message }),
-    /* @__PURE__ */ jsx("div", { className: style$b["item-loc"], children: /* @__PURE__ */ jsx(DiagnosticTargetLink, { target: diagnostic.target }) })
+    /* @__PURE__ */ jsx("div", { className: style$e["item-code"], children: diagnostic.code }),
+    /* @__PURE__ */ jsx("div", { className: style$e["item-message"], children: diagnostic.message }),
+    /* @__PURE__ */ jsx("div", { className: style$e["item-loc"], children: /* @__PURE__ */ jsx(DiagnosticTargetLink, { target: diagnostic.target }) })
   ] });
 };
 const DiagnosticTargetLink = memo(({ target }) => {
@@ -133,18 +134,18 @@ function useMonacoModel(uri, language) {
 }
 
 const footer = "_footer_e6dic_1";
-const style$a = {
+const style$d = {
 	footer: footer,
 	"footer-item": "_footer-item_e6dic_9"
 };
 
 const FooterItem = ({ children, link, className }) => {
-  const resolvedClassName = mergeClasses(style$a["footer-item"], className);
+  const resolvedClassName = mergeClasses(style$d["footer-item"], className);
   return link ? /* @__PURE__ */ jsx("a", { className: resolvedClassName, href: link, target: "_blank", rel: "noopener noreferrer", children }) : /* @__PURE__ */ jsx("div", { className: resolvedClassName, children });
 };
 
 const button = "_button_1c15n_4";
-const style$9 = {
+const style$c = {
 	"version-item": "_version-item_1c15n_1",
 	button: button
 };
@@ -153,8 +154,8 @@ const FooterVersionItem = memo(({ versionSelector }) => {
   const { host } = usePlaygroundContext();
   const latest = versionSelector?.latest;
   const selected = versionSelector?.selected ?? host.compiler.MANIFEST.version;
-  return /* @__PURE__ */ jsx(FooterItem, { className: style$9["version-item"], children: /* @__PURE__ */ jsxs(Popover, { children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsxs("div", { className: style$9["button"], children: [
+  return /* @__PURE__ */ jsx(FooterItem, { className: style$c["version-item"], children: /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsxs("div", { className: style$c["button"], children: [
       /* @__PURE__ */ jsx("span", { children: "Version " }),
       /* @__PURE__ */ jsx("span", { children: selected }),
       /* @__PURE__ */ jsx("span", { children: latest ? latest === selected ? " (latest)" : " (old)" : "" })
@@ -200,7 +201,7 @@ const VersionSelector = memo(({ versions, selected, latest, onChange }) => {
 });
 
 const Footer = ({ className, children }) => {
-  return /* @__PURE__ */ jsx("div", { className: mergeClasses(style$a.footer, className), children });
+  return /* @__PURE__ */ jsx("div", { className: mergeClasses(style$d.footer, className), children });
 };
 
 function useControllableValue(controlledValue, defaultUncontrolledValue, onChange) {
@@ -988,7 +989,7 @@ const EmitterDropdown = ({
   );
 };
 
-const style$8 = {
+const style$b = {
 	"samples-grid": "_samples-grid_1dkte_1",
 	"sample-card": "_sample-card_1dkte_8",
 	"sample-card-content": "_sample-card-content_1dkte_26",
@@ -1075,9 +1076,9 @@ const SampleIcon = ({ name }) => {
         );
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: style$8["sample-icon"], style: { backgroundColor: colors.bg }, "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx("svg", { width: "48", height: "48", viewBox: "0 0 48 48", className: style$8["sample-icon-pattern"], children: renderPattern() }),
-    /* @__PURE__ */ jsx("span", { className: style$8["sample-icon-initials"], style: { color: colors.fg }, children: initials })
+  return /* @__PURE__ */ jsxs("div", { className: style$b["sample-icon"], style: { backgroundColor: colors.bg }, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("svg", { width: "48", height: "48", viewBox: "0 0 48 48", className: style$b["sample-icon-pattern"], children: renderPattern() }),
+    /* @__PURE__ */ jsx("span", { className: style$b["sample-icon-initials"], style: { color: colors.fg }, children: initials })
   ] });
 };
 
@@ -1085,7 +1086,7 @@ const SampleCard = ({ name, sample, onSelect }) => {
   return /* @__PURE__ */ jsx(
     Card,
     {
-      className: style$8["sample-card"],
+      className: style$b["sample-card"],
       onClick: () => onSelect(name),
       role: "button",
       tabIndex: 0,
@@ -1095,11 +1096,11 @@ const SampleCard = ({ name, sample, onSelect }) => {
           onSelect(name);
         }
       },
-      children: /* @__PURE__ */ jsxs("div", { className: style$8["sample-card-content"], children: [
+      children: /* @__PURE__ */ jsxs("div", { className: style$b["sample-card-content"], children: [
         /* @__PURE__ */ jsx(SampleIcon, { name }),
-        /* @__PURE__ */ jsxs("div", { className: style$8["sample-card-text"], children: [
-          /* @__PURE__ */ jsx(Text, { as: "h3", weight: "semibold", className: style$8["sample-title"], children: name }),
-          sample.description && /* @__PURE__ */ jsx(Text, { as: "p", className: style$8["sample-description"], children: sample.description })
+        /* @__PURE__ */ jsxs("div", { className: style$b["sample-card-text"], children: [
+          /* @__PURE__ */ jsx(Text, { as: "h3", weight: "semibold", className: style$b["sample-title"], children: name }),
+          sample.description && /* @__PURE__ */ jsx(Text, { as: "p", className: style$b["sample-description"], children: sample.description })
         ] })
       ] })
     }
@@ -1151,19 +1152,140 @@ const SamplesDrawerTrigger = ({
               children: "Sample Gallery"
             }
           ) }),
-          /* @__PURE__ */ jsx(DrawerBody, { children: /* @__PURE__ */ jsx("div", { className: style$8["samples-grid"], children: Object.entries(samples).map(([name, sample]) => /* @__PURE__ */ jsx(SampleCard, { name, sample, onSelect: handleSampleSelect }, name)) }) })
+          /* @__PURE__ */ jsx(DrawerBody, { children: /* @__PURE__ */ jsx("div", { className: style$b["samples-grid"], children: Object.entries(samples).map(([name, sample]) => /* @__PURE__ */ jsx(SampleCard, { name, sample, onSelect: handleSampleSelect }, name)) }) })
         ]
       }
     )
   ] });
 };
 
-const form = "_form_sqeas_1";
-const item = "_item_sqeas_7";
-const style$7 = {
+const bar = "_bar_15c2c_1";
+const divider = "_divider_15c2c_5";
+const spacer = "_spacer_15c2c_9";
+const style$a = {
+	bar: bar,
+	divider: divider,
+	spacer: spacer
+};
+
+const EditorCommandBar = ({
+  documentationUrl,
+  saveCode,
+  formatCode,
+  fileBug,
+  host,
+  selectedEmitter,
+  onSelectedEmitterChange,
+  samples,
+  selectedSampleName,
+  onSelectedSampleNameChange,
+  commandBarButtons
+}) => {
+  const documentation = documentationUrl ? /* @__PURE__ */ jsx("label", { children: /* @__PURE__ */ jsx(Link, { href: documentationUrl, target: "_blank", children: "Docs" }) }) : void 0;
+  const bugButton = fileBug ? /* @__PURE__ */ jsx(FileBugButton, { onClick: fileBug }) : void 0;
+  const emitters = useMemo(
+    () => Object.values(host.libraries).filter((x) => x.isEmitter).map((x) => x.name),
+    [host.libraries]
+  );
+  return /* @__PURE__ */ jsx("div", { className: style$a["bar"], children: /* @__PURE__ */ jsxs(Toolbar, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { content: "Save", relationship: "description", withArrow: true, children: /* @__PURE__ */ jsx(ToolbarButton, { "aria-label": "Save", icon: /* @__PURE__ */ jsx(Save16Regular, {}), onClick: saveCode }) }),
+    /* @__PURE__ */ jsx(Tooltip, { content: "Format", relationship: "description", withArrow: true, children: /* @__PURE__ */ jsx(ToolbarButton, { "aria-label": "Format", icon: /* @__PURE__ */ jsx(Broom16Filled, {}), onClick: formatCode }) }),
+    samples && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        SamplesDrawerTrigger,
+        {
+          samples,
+          onSelectedSampleNameChange
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: style$a["spacer"] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      EmitterDropdown,
+      {
+        emitters,
+        onSelectedEmitterChange,
+        selectedEmitter
+      }
+    ),
+    documentation && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: style$a["spacer"] }),
+      documentation
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: style$a["divider"] }),
+    commandBarButtons,
+    bugButton
+  ] }) });
+};
+const FileBugButton = ({ onClick }) => {
+  return /* @__PURE__ */ jsx(Tooltip, { content: "File Bug Report", relationship: "description", withArrow: true, children: /* @__PURE__ */ jsx(
+    ToolbarButton,
+    {
+      appearance: "subtle",
+      "aria-label": "File Bug Report",
+      icon: /* @__PURE__ */ jsx(Bug16Regular, {}),
+      onClick
+    }
+  ) });
+};
+
+const DefaultFooter = () => {
+  return /* @__PURE__ */ jsx(Footer, { children: /* @__PURE__ */ jsx(FooterVersionItem, {}) });
+};
+
+const TypeSpecEditor = ({
+  actions,
+  options,
+  ...other
+}) => {
+  const resolvedOptions = {
+    "semanticHighlighting.enabled": true,
+    automaticLayout: true,
+    tabSize: 2,
+    minimap: {
+      enabled: false
+    },
+    ...options
+  };
+  return /* @__PURE__ */ jsx(Editor, { actions, options: resolvedOptions, ...other });
+};
+const OutputEditor = ({ filename, value, editorOptions }) => {
+  const model = useMonacoModel(filename);
+  if (filename === "") {
+    return null;
+  }
+  const options = {
+    ...editorOptions,
+    readOnly: true,
+    automaticLayout: true,
+    minimap: {
+      enabled: false
+    }
+  };
+  model.setValue(value);
+  return /* @__PURE__ */ jsx(Editor, { model, options });
+};
+
+const settings = "_settings_1yvpj_1";
+const section = "_section_1yvpj_7";
+const field = "_field_1yvpj_23";
+const empty = "_empty_1yvpj_33";
+const style$9 = {
+	settings: settings,
+	section: section,
+	"section-title": "_section-title_1yvpj_19",
+	field: field,
+	empty: empty
+};
+
+const form = "_form_w9o1o_1";
+const item = "_item_w9o1o_7";
+const description = "_description_w9o1o_13";
+const style$8 = {
 	form: form,
 	item: item,
-	"switch": "_switch_sqeas_13"
+	description: description,
+	"switch": "_switch_w9o1o_17"
 };
 
 const EmitterOptionsForm = ({
@@ -1185,11 +1307,11 @@ const EmitterOptionsForm = ({
   );
   const emitterOptionsSchema = library.definition?.emitter?.options?.properties;
   if (emitterOptionsSchema === void 0) {
-    return /* @__PURE__ */ jsx(Fragment, { children: '"No options"' });
+    return /* @__PURE__ */ jsx(Text, { size: 200, children: "No options available" });
   }
   const entries = Object.entries(emitterOptionsSchema);
-  return /* @__PURE__ */ jsx("div", { className: style$7["form"], children: entries.map(([key, value]) => {
-    return /* @__PURE__ */ jsx("div", { className: style$7["form-item"], children: value.type === "array" ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: style$8["form"], children: entries.map(([key, value]) => {
+    return /* @__PURE__ */ jsx("div", { className: style$8["form-item"], children: value.type === "array" ? /* @__PURE__ */ jsx(
       JsonSchemaArrayPropertyInput,
       {
         emitterOptions: options[library.name] ?? {},
@@ -1240,7 +1362,7 @@ const JsonSchemaArrayPropertyInput = ({
     return JsonSchemaPropertyInput({ emitterOptions, name, prop: itemsSchema, onChange });
   }
   const itemsEnum = itemsSchema.enum;
-  return /* @__PURE__ */ jsxs("div", { className: style$7["item"], children: [
+  return /* @__PURE__ */ jsxs("div", { className: style$8["item"], children: [
     /* @__PURE__ */ jsx(Label, { htmlFor: inputId, title: name, children: prettyName }),
     itemsEnum.map((x) => /* @__PURE__ */ jsx(
       Checkbox,
@@ -1272,20 +1394,24 @@ const JsonSchemaPropertyInput = ({
   );
   switch (prop.type) {
     case "boolean":
-      return /* @__PURE__ */ jsx(
-        Switch,
-        {
-          className: style$7["switch"],
-          label: prettyName,
-          labelPosition: "above",
-          checked: value,
-          onChange: handleChange
-        }
-      );
+      return /* @__PURE__ */ jsxs("div", { className: style$8["item"], children: [
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            className: style$8["switch"],
+            label: prettyName,
+            labelPosition: "above",
+            checked: value,
+            onChange: handleChange
+          }
+        ),
+        prop.description && /* @__PURE__ */ jsx(Text, { size: 200, className: style$8["description"], children: prop.description })
+      ] });
     case "string":
     default:
-      return /* @__PURE__ */ jsxs("div", { className: style$7["item"], children: [
+      return /* @__PURE__ */ jsxs("div", { className: style$8["item"], children: [
         /* @__PURE__ */ jsx(Label, { htmlFor: inputId, title: name, children: prettyName }),
+        prop.description && /* @__PURE__ */ jsx(Text, { size: 200, className: style$8["description"], children: prop.description }),
         prop.enum ? /* @__PURE__ */ jsx(RadioGroup, { layout: "horizontal", id: inputId, value, onChange: handleChange, children: prop.enum.map((x) => /* @__PURE__ */ jsx(Radio, { value: x, label: x }, x)) }) : /* @__PURE__ */ jsx(Input, { id: inputId, value, onChange: handleChange })
       ] });
   }
@@ -1301,7 +1427,7 @@ const LinterForm = ({
     return Object.keys(linter?.ruleSets ?? {}).map((x) => `${lib.name}/${x}`);
   });
   if (rulesets.length === 0) {
-    return /* @__PURE__ */ jsx(Fragment, { children: "No ruleset available" });
+    return /* @__PURE__ */ jsx(Text, { style: { color: "var(--colorNeutralForeground3)", fontStyle: "italic" }, children: "No ruleset available" });
   }
   const handleChange = (ruleSet, checked) => {
     const ruleSets = linterRuleSet.extends ?? [];
@@ -1334,6 +1460,7 @@ const RuleSetCheckbox = ({ ruleSet, checked, onChange }) => {
 
 const CompilerSettings = ({
   selectedEmitter,
+  onSelectedEmitterChange,
   host,
   options,
   onOptionsChanged
@@ -1358,172 +1485,243 @@ const CompilerSettings = ({
     },
     [onOptionsChanged, options]
   );
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs(Fragment, { children: [
-      "Emitter: ",
-      selectedEmitter
+  const emitters = useMemo(
+    () => Object.values(host.libraries).filter((x) => x.isEmitter).map((x) => x.name),
+    [host.libraries]
+  );
+  const handleEmitterChange = useCallback(
+    (evt) => {
+      onSelectedEmitterChange(evt.target.value);
+    },
+    [onSelectedEmitterChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: style$9["settings"], children: [
+    /* @__PURE__ */ jsxs("section", { className: style$9["section"], children: [
+      /* @__PURE__ */ jsx(Subtitle2, { className: style$9["section-title"], children: "Emitter" }),
+      /* @__PURE__ */ jsxs("div", { className: style$9["field"], children: [
+        /* @__PURE__ */ jsx(Label, { children: "Select emitter" }),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: selectedEmitter,
+            onChange: handleEmitterChange,
+            "aria-label": "Select emitter",
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select emitter..." }),
+              emitters.map((name) => /* @__PURE__ */ jsx("option", { children: name }, name))
+            ]
+          }
+        )
+      ] })
     ] }),
-    /* @__PURE__ */ jsx(Divider, { style: { marginTop: 20 } }),
-    /* @__PURE__ */ jsx("h3", { children: "Options" }),
-    library && /* @__PURE__ */ jsx(
-      EmitterOptionsForm,
-      {
-        library,
-        options: options.options ?? {},
-        optionsChanged: emitterOptionsChanged
-      }
-    ),
-    /* @__PURE__ */ jsx(Divider, { style: { marginTop: 20 } }),
-    /* @__PURE__ */ jsx("h3", { children: "Linter" }),
-    /* @__PURE__ */ jsx(
-      LinterForm,
-      {
-        libraries: host.libraries,
-        linterRuleSet,
-        onLinterRuleSetChanged: linterRuleSetChanged
-      }
-    )
-  ] });
-};
-
-const CompilerSettingsDialogButton = ({
-  selectedEmitter,
-  compilerOptions,
-  onCompilerOptionsChange
-}) => {
-  const { host } = usePlaygroundContext();
-  return /* @__PURE__ */ jsxs(Dialog, { children: [
-    /* @__PURE__ */ jsx(DialogTrigger, { children: /* @__PURE__ */ jsx(ToolbarButton, { icon: /* @__PURE__ */ jsx(Settings24Regular, {}), "aria-label": "Open Settings" }) }),
-    /* @__PURE__ */ jsx(DialogSurface, { children: /* @__PURE__ */ jsxs(DialogBody, { children: [
-      /* @__PURE__ */ jsx(DialogTitle, { children: "Settings" }),
-      /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(
-        CompilerSettings,
+    /* @__PURE__ */ jsxs("section", { className: style$9["section"], children: [
+      /* @__PURE__ */ jsx(Subtitle2, { className: style$9["section-title"], children: "Emitter options" }),
+      library ? /* @__PURE__ */ jsx(
+        EmitterOptionsForm,
         {
-          host,
-          selectedEmitter,
-          options: compilerOptions,
-          onOptionsChanged: onCompilerOptionsChange
+          library,
+          options: options.options ?? {},
+          optionsChanged: emitterOptionsChanged
         }
-      ) })
-    ] }) })
+      ) : /* @__PURE__ */ jsx(Text, { size: 200, className: style$9["empty"], children: "No emitter selected" })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: style$9["section"], children: [
+      /* @__PURE__ */ jsx(Subtitle2, { className: style$9["section-title"], children: "Linter rules" }),
+      /* @__PURE__ */ jsx(
+        LinterForm,
+        {
+          libraries: host.libraries,
+          linterRuleSet,
+          onLinterRuleSetChanged: linterRuleSetChanged
+        }
+      )
+    ] })
   ] });
 };
 
-const bar = "_bar_15c2c_1";
-const divider = "_divider_15c2c_5";
-const spacer = "_spacer_15c2c_9";
-const style$6 = {
-	bar: bar,
-	divider: divider,
-	spacer: spacer
+const style$7 = {
+	"config-panel": "_config-panel_cffut_1",
+	"config-toggle": "_config-toggle_cffut_8",
+	"config-content": "_config-content_cffut_17",
+	"form-content": "_form-content_cffut_23"
 };
 
-const EditorCommandBar = ({
-  documentationUrl,
-  saveCode,
-  formatCode,
-  fileBug,
+function compilerOptionsToTspConfig(selectedEmitter, compilerOptions) {
+  const config = {};
+  if (selectedEmitter) {
+    config.emit = [selectedEmitter];
+  }
+  if (compilerOptions.options && Object.keys(compilerOptions.options).length > 0) {
+    config.options = compilerOptions.options;
+  }
+  if (compilerOptions.linterRuleSet) {
+    config.linter = compilerOptions.linterRuleSet;
+  }
+  return stringify(config, { indent: 2 }) || "";
+}
+function parseTspConfigYaml(yamlContent) {
+  try {
+    const config = parse(yamlContent);
+    if (!config || typeof config !== "object") {
+      return { compilerOptions: {} };
+    }
+    const compilerOptions = {};
+    if (config.options) {
+      compilerOptions.options = config.options;
+    }
+    if (config.linter) {
+      compilerOptions.linterRuleSet = config.linter;
+    }
+    const selectedEmitter = config.emit?.[0];
+    return { selectedEmitter, compilerOptions };
+  } catch {
+    return void 0;
+  }
+}
+
+const ConfigPanel = ({
   host,
   selectedEmitter,
-  onSelectedEmitterChange,
   compilerOptions,
   onCompilerOptionsChange,
-  samples,
-  selectedSampleName,
-  onSelectedSampleNameChange,
-  commandBarButtons
+  onSelectedEmitterChange,
+  editorOptions
 }) => {
-  const documentation = documentationUrl ? /* @__PURE__ */ jsx("label", { children: /* @__PURE__ */ jsx(Link, { href: documentationUrl, target: "_blank", children: "Docs" }) }) : void 0;
-  const bugButton = fileBug ? /* @__PURE__ */ jsx(FileBugButton, { onClick: fileBug }) : void 0;
-  const emitters = useMemo(
-    () => Object.values(host.libraries).filter((x) => x.isEmitter).map((x) => x.name),
-    [host.libraries]
+  const [mode, setMode] = useState("form");
+  const yamlModel = useMonacoModel("inmemory://test/tspconfig.yaml", "yaml");
+  const changeFromYamlRef = useRef(false);
+  useEffect(() => {
+    if (mode !== "yaml") return;
+    if (changeFromYamlRef.current) {
+      changeFromYamlRef.current = false;
+      return;
+    }
+    const yaml = compilerOptionsToTspConfig(selectedEmitter, compilerOptions);
+    const current = yamlModel.getValue();
+    if (current !== yaml) {
+      yamlModel.setValue(yaml);
+    }
+  }, [selectedEmitter, compilerOptions, mode, yamlModel]);
+  const parseAndSync = useMemo(
+    () => debounce((content) => {
+      const parsed = parseTspConfigYaml(content);
+      if (!parsed) return;
+      changeFromYamlRef.current = true;
+      if (parsed.selectedEmitter && parsed.selectedEmitter !== selectedEmitter) {
+        onSelectedEmitterChange(parsed.selectedEmitter);
+      }
+      onCompilerOptionsChange(parsed.compilerOptions);
+    }, 200),
+    [selectedEmitter, onCompilerOptionsChange, onSelectedEmitterChange]
   );
-  return /* @__PURE__ */ jsx("div", { className: style$6["bar"], children: /* @__PURE__ */ jsxs(Toolbar, { children: [
-    /* @__PURE__ */ jsx(Tooltip, { content: "Save", relationship: "description", withArrow: true, children: /* @__PURE__ */ jsx(ToolbarButton, { "aria-label": "Save", icon: /* @__PURE__ */ jsx(Save16Regular, {}), onClick: saveCode }) }),
-    /* @__PURE__ */ jsx(Tooltip, { content: "Format", relationship: "description", withArrow: true, children: /* @__PURE__ */ jsx(ToolbarButton, { "aria-label": "Format", icon: /* @__PURE__ */ jsx(Broom16Filled, {}), onClick: formatCode }) }),
-    samples && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        SamplesDrawerTrigger,
-        {
-          samples,
-          onSelectedSampleNameChange
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: style$6["spacer"] })
-    ] }),
-    /* @__PURE__ */ jsx(
-      EmitterDropdown,
-      {
-        emitters,
-        onSelectedEmitterChange,
-        selectedEmitter
+  useEffect(() => {
+    const disposable = yamlModel.onDidChangeContent(() => {
+      parseAndSync(yamlModel.getValue());
+    });
+    return () => {
+      parseAndSync.clear();
+      disposable.dispose();
+    };
+  }, [yamlModel, parseAndSync]);
+  const handleModeChange = useCallback(
+    (_, data) => {
+      const newMode = data.value;
+      if (newMode === "yaml") {
+        const yaml = compilerOptionsToTspConfig(selectedEmitter, compilerOptions);
+        yamlModel.setValue(yaml);
       }
-    ),
-    documentation && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: style$6["spacer"] }),
-      documentation
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: style$6["divider"] }),
-    commandBarButtons,
-    bugButton,
-    /* @__PURE__ */ jsx(
-      CompilerSettingsDialogButton,
+      setMode(newMode);
+    },
+    [selectedEmitter, compilerOptions, yamlModel]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: style$7["config-panel"], children: [
+    /* @__PURE__ */ jsx("div", { className: style$7["config-toggle"], children: /* @__PURE__ */ jsxs(TabList, { size: "small", selectedValue: mode, onTabSelect: handleModeChange, children: [
+      /* @__PURE__ */ jsx(Tab, { value: "form", children: "Visual" }),
+      /* @__PURE__ */ jsx(Tab, { value: "yaml", children: "Yaml" })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: style$7["config-content"], children: mode === "form" ? /* @__PURE__ */ jsx("div", { className: style$7["form-content"], children: /* @__PURE__ */ jsx(
+      CompilerSettings,
       {
-        compilerOptions,
-        onCompilerOptionsChange,
-        selectedEmitter
+        host,
+        selectedEmitter,
+        onSelectedEmitterChange,
+        options: compilerOptions,
+        onOptionsChanged: onCompilerOptionsChange
       }
-    )
-  ] }) });
-};
-const FileBugButton = ({ onClick }) => {
-  return /* @__PURE__ */ jsx(Tooltip, { content: "File Bug Report", relationship: "description", withArrow: true, children: /* @__PURE__ */ jsx(
-    ToolbarButton,
-    {
-      appearance: "subtle",
-      "aria-label": "File Bug Report",
-      icon: /* @__PURE__ */ jsx(Bug16Regular, {}),
-      onClick
-    }
-  ) });
+    ) }) : /* @__PURE__ */ jsx(Editor, { model: yamlModel, options: { ...editorOptions, minimap: { enabled: false } } }) })
+  ] });
 };
 
-const DefaultFooter = () => {
-  return /* @__PURE__ */ jsx(Footer, { children: /* @__PURE__ */ jsx(FooterVersionItem, {}) });
+const style$6 = {
+	"editor-panel": "_editor-panel_k9ax7_1",
+	"panel-tabs-container": "_panel-tabs-container_k9ax7_7",
+	"panel-content": "_panel-content_k9ax7_11"
 };
 
-const TypeSpecEditor = ({
+const TypeSpecIcon = () => (
+  // icons/raw/tsp-logo-inverted.svg
+  /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "1em",
+      height: "1em",
+      viewBox: "200 200 30 30",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M 223.327 148.108 L 223.327 144.801 L 222.786 144.801 L 222.786 144.213 L 224.44 144.213 L 224.44 144.801 L 223.899 144.801 L 223.899 148.108 Z M 225.391 148.15 Q 225.156 148.15 224.999 148.072 Q 224.843 147.994 224.753 147.846 Q 224.663 147.697 224.624 147.488 Q 224.586 147.279 224.586 147.016 L 225.148 146.963 Q 225.148 147.09 225.157 147.208 Q 225.166 147.326 225.191 147.42 Q 225.217 147.514 225.266 147.57 Q 225.315 147.626 225.391 147.626 Q 225.519 147.626 225.572 147.508 Q 225.625 147.39 225.625 147.223 Q 225.625 147.056 225.537 146.876 Q 225.45 146.696 225.328 146.534 Q 225.121 146.258 224.966 146.022 Q 224.811 145.787 224.725 145.559 Q 224.639 145.331 224.639 145.082 Q 224.639 144.886 224.689 144.72 Q 224.74 144.554 224.836 144.431 Q 224.933 144.308 225.071 144.239 Q 225.209 144.17 225.386 144.17 Q 225.606 144.17 225.758 144.244 Q 225.911 144.319 226.005 144.456 Q 226.099 144.594 226.143 144.784 Q 226.186 144.973 226.186 145.204 L 225.625 145.257 Q 225.625 145.159 225.615 145.059 Q 225.606 144.96 225.582 144.878 Q 225.558 144.796 225.513 144.745 Q 225.468 144.695 225.397 144.695 Q 225.285 144.695 225.243 144.789 Q 225.201 144.883 225.201 145.055 Q 225.201 145.278 225.32 145.485 Q 225.439 145.691 225.641 145.967 Q 225.882 146.293 226.034 146.566 Q 226.186 146.839 226.186 147.17 Q 226.186 147.379 226.141 147.558 Q 226.096 147.737 226 147.87 Q 225.903 148.002 225.753 148.076 Q 225.603 148.15 225.391 148.15 Z M 226.494 148.108 L 226.494 144.213 L 227.066 144.213 Q 227.392 144.213 227.611 144.356 Q 227.829 144.499 227.938 144.761 Q 228.047 145.023 228.047 145.379 Q 228.047 145.734 227.933 145.991 Q 227.819 146.248 227.6 146.392 Q 227.381 146.537 227.066 146.55 L 227.066 148.108 Z M 227.066 145.967 Q 227.217 145.967 227.305 145.907 Q 227.392 145.848 227.43 145.718 Q 227.469 145.588 227.469 145.384 Q 227.469 145.177 227.43 145.047 Q 227.392 144.917 227.303 144.856 Q 227.214 144.796 227.066 144.796 Z",
+          transform: "matrix(4.553588, 0, 0, 3.175088, -811.313782, -249.035522)"
+        }
+      )
+    }
+  )
+);
+const EditorPanel = ({
+  host,
+  model,
   actions,
-  options,
-  ...other
+  editorOptions,
+  onMount,
+  selectedEmitter,
+  compilerOptions,
+  onCompilerOptionsChange,
+  onSelectedEmitterChange,
+  commandBar
 }) => {
-  const resolvedOptions = {
-    "semanticHighlighting.enabled": true,
-    automaticLayout: true,
-    tabSize: 2,
-    minimap: {
-      enabled: false
-    },
-    ...options
-  };
-  return /* @__PURE__ */ jsx(Editor, { actions, options: resolvedOptions, ...other });
-};
-const OutputEditor = ({ filename, value, editorOptions }) => {
-  const model = useMonacoModel(filename);
-  if (filename === "") {
-    return null;
-  }
-  const options = {
-    ...editorOptions,
-    readOnly: true,
-    automaticLayout: true,
-    minimap: {
-      enabled: false
-    }
-  };
-  model.setValue(value);
-  return /* @__PURE__ */ jsx(Editor, { model, options });
+  const [selectedTab, setSelectedTab] = useState("tsp");
+  const onTabSelect = useCallback((_, data) => {
+    setSelectedTab(data.value);
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: style$6["editor-panel"], children: [
+    /* @__PURE__ */ jsx("div", { className: style$6["panel-tabs-container"], children: /* @__PURE__ */ jsxs(TabList, { vertical: true, size: "large", selectedValue: selectedTab, onTabSelect, children: [
+      /* @__PURE__ */ jsx(Tab, { value: "tsp", children: /* @__PURE__ */ jsx("span", { title: "TypeSpec", children: /* @__PURE__ */ jsx(TypeSpecIcon, {}) }) }),
+      /* @__PURE__ */ jsx(Tab, { value: "cfg", children: /* @__PURE__ */ jsx("span", { title: "Config", children: /* @__PURE__ */ jsx(SettingsRegular, {}) }) })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: style$6["panel-content"], children: [
+      commandBar,
+      selectedTab === "tsp" ? /* @__PURE__ */ jsx(
+        TypeSpecEditor,
+        {
+          model,
+          actions,
+          options: editorOptions,
+          onMount
+        }
+      ) : /* @__PURE__ */ jsx(
+        ConfigPanel,
+        {
+          host,
+          selectedEmitter,
+          compilerOptions,
+          onCompilerOptionsChange,
+          onSelectedEmitterChange,
+          editorOptions
+        }
+      )
+    ] })
+  ] });
 };
 
 const style$5 = {
@@ -2165,35 +2363,36 @@ const Playground = (props) => {
   return /* @__PURE__ */ jsx(PlaygroundContextProvider, { value: playgroundContext, children: /* @__PURE__ */ jsxs("div", { className: style$2["layout"], children: [
     /* @__PURE__ */ jsxs(SplitPane, { sizes: verticalPaneSizes, onChange: onVerticalPaneSizeChange, split: "horizontal", children: [
       /* @__PURE__ */ jsx(Pane, { children: /* @__PURE__ */ jsxs(SplitPane, { initialSizes: ["50%", "50%"], children: [
-        /* @__PURE__ */ jsxs(Pane, { className: style$2["edit-pane"], children: [
-          /* @__PURE__ */ jsx(
-            EditorCommandBar,
-            {
-              host,
-              selectedEmitter,
-              onSelectedEmitterChange,
-              compilerOptions,
-              onCompilerOptionsChange,
-              samples: props.samples,
-              selectedSampleName,
-              onSelectedSampleNameChange,
-              saveCode,
-              formatCode,
-              fileBug: props.onFileBug ? fileBug : void 0,
-              commandBarButtons: props.commandBarButtons,
-              documentationUrl: props.links?.documentationUrl
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            TypeSpecEditor,
-            {
-              model: typespecModel,
-              actions: typespecEditorActions,
-              options: props.editorOptions,
-              onMount: onTypeSpecEditorMount
-            }
-          )
-        ] }),
+        /* @__PURE__ */ jsx(Pane, { className: style$2["edit-pane"], children: /* @__PURE__ */ jsx(
+          EditorPanel,
+          {
+            host,
+            model: typespecModel,
+            actions: typespecEditorActions,
+            editorOptions: props.editorOptions,
+            onMount: onTypeSpecEditorMount,
+            selectedEmitter,
+            compilerOptions,
+            onCompilerOptionsChange,
+            onSelectedEmitterChange,
+            commandBar: /* @__PURE__ */ jsx(
+              EditorCommandBar,
+              {
+                host,
+                selectedEmitter,
+                onSelectedEmitterChange,
+                samples: props.samples,
+                selectedSampleName,
+                onSelectedSampleNameChange,
+                saveCode,
+                formatCode,
+                fileBug: props.onFileBug ? fileBug : void 0,
+                commandBarButtons: props.commandBarButtons,
+                documentationUrl: props.links?.documentationUrl
+              }
+            )
+          }
+        ) }),
         /* @__PURE__ */ jsx(Pane, { children: /* @__PURE__ */ jsx(
           OutputView,
           {

package/dist/{services-CzxNzZLi.js → services-Z619RuQS.js}

@@ -47,24 +47,32 @@ function resolveVirtualPath(path, ...paths) {
 function createBrowserHostInternal(options) {
   const virtualFs = /* @__PURE__ */ new Map();
   const jsImports = /* @__PURE__ */ new Map();
-  const libraries = options.libraries;
-  for (const [libName, { _TypeSpecLibrary_ }] of Object.entries(libraries)) {
-    for (const [key, value] of Object.entries(_TypeSpecLibrary_.typespecSourceFiles)) {
+  const libraries = {
+    ...options.libraries
+  };
+  function registerLibraryFiles(libName, lib) {
+    for (const [key, value] of Object.entries(lib._TypeSpecLibrary_.typespecSourceFiles)) {
       virtualFs.set(`/test/node_modules/${libName}/${key}`, value);
     }
-    for (const [key, value] of Object.entries(_TypeSpecLibrary_.jsSourceFiles)) {
+    for (const [key, value] of Object.entries(lib._TypeSpecLibrary_.jsSourceFiles)) {
       addJsImport(`/test/node_modules/${libName}/${key}`, value);
     }
   }
-  virtualFs.set(
-    `/test/package.json`,
-    JSON.stringify({
-      name: "playground-pkg",
-      dependencies: Object.fromEntries(
-        Object.values(libraries).map((x) => [x.name, x.packageJson.version])
-      )
-    })
-  );
+  function updatePackageJson() {
+    virtualFs.set(
+      `/test/package.json`,
+      JSON.stringify({
+        name: "playground-pkg",
+        dependencies: Object.fromEntries(
+          Object.values(libraries).map((x) => [x.name, x.packageJson.version])
+        )
+      })
+    );
+  }
+  for (const [libName, lib] of Object.entries(libraries)) {
+    registerLibraryFiles(libName, lib);
+  }
+  updatePackageJson();
   function addJsImport(path, value) {
     virtualFs.set(path, "");
     jsImports.set(path, value);
@@ -174,24 +182,33 @@ function createBrowserHostInternal(options) {
     }
   };
 }
+async function loadLibraries(libsToLoad, importOptions = {}) {
+  const entries = await Promise.all(
+    libsToLoad.map(async (libName) => {
+      const { _TypeSpecLibrary_, $lib, $linter } = await importLibrary(
+        libName,
+        importOptions
+      );
+      const lib = {
+        name: libName,
+        isEmitter: $lib?.emitter,
+        definition: $lib,
+        packageJson: JSON.parse(_TypeSpecLibrary_.typespecSourceFiles["package.json"]),
+        linter: $linter,
+        _TypeSpecLibrary_
+      };
+      return [libName, lib];
+    })
+  );
+  return Object.fromEntries(entries);
+}
 async function createBrowserHost(libsToLoad, importOptions = {}) {
-  const libraries = {};
-  for (const libName of libsToLoad) {
-    const { _TypeSpecLibrary_, $lib, $linter } = await importLibrary(
-      libName,
-      importOptions
-    );
-    libraries[libName] = {
-      name: libName,
-      isEmitter: $lib?.emitter,
-      definition: $lib,
-      packageJson: JSON.parse(_TypeSpecLibrary_.typespecSourceFiles["package.json"]),
-      linter: $linter,
-      _TypeSpecLibrary_
-    };
-  }
+  const [libraries, compiler] = await Promise.all([
+    loadLibraries(libsToLoad, importOptions),
+    importTypeSpecCompiler(importOptions)
+  ]);
   return createBrowserHostInternal({
-    compiler: await importTypeSpecCompiler(importOptions),
+    compiler,
     libraries
   });
 }

package/dist/src/browser-host.d.ts

@@ -1,6 +1,14 @@
 import { LibraryImportOptions } from './core.js';
-import { BrowserHost } from './types.js';
+import { BrowserHost, PlaygroundTspLibrary } from './types.js';
 export declare function resolveVirtualPath(path: string, ...paths: string[]): string;
+/**
+ * Load libraries in parallel from the given list.
+ * @param libsToLoad List of library names. Must be available in the webpage importmap.
+ * @param importOptions Import configuration.
+ */
+export declare function loadLibraries(libsToLoad: readonly string[], importOptions?: LibraryImportOptions): Promise<Record<string, PlaygroundTspLibrary & {
+    _TypeSpecLibrary_: any;
+}>>;
 /**
  * Create the browser host from the list of libraries.
  * @param libsToLoad List of libraries to load. Those must be set in the webpage importmap.

package/dist/src/browser-host.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"browser-host.d.ts","sourceRoot":"","sources":["../../src/browser-host.ts"],"names":[],"mappings":"AACA,OAAO,EAAyC,KAAK,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAC7F,OAAO,KAAK,EAAE,WAAW,EAAwB,MAAM,YAAY,CAAC;AAEpE,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,UAElE;AAsKD;;;;;GAKG;AACH,wBAAsB,iBAAiB,CACrC,UAAU,EAAE,SAAS,MAAM,EAAE,EAC7B,aAAa,GAAE,oBAAyB,GACvC,OAAO,CAAC,WAAW,CAAC,CAoBtB"}
+{"version":3,"file":"browser-host.d.ts","sourceRoot":"","sources":["../../src/browser-host.ts"],"names":[],"mappings":"AACA,OAAO,EAAyC,KAAK,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAC7F,OAAO,KAAK,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAEpE,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,UAElE;AAmLD;;;;GAIG;AACH,wBAAsB,aAAa,CACjC,UAAU,EAAE,SAAS,MAAM,EAAE,EAC7B,aAAa,GAAE,oBAAyB,GACvC,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,oBAAoB,GAAG;IAAE,iBAAiB,EAAE,GAAG,CAAA;CAAE,CAAC,CAAC,CAmB5E;AAED;;;;;GAKG;AACH,wBAAsB,iBAAiB,CACrC,UAAU,EAAE,SAAS,MAAM,EAAE,EAC7B,aAAa,GAAE,oBAAyB,GACvC,OAAO,CAAC,WAAW,CAAC,CAStB"}

package/dist/src/editor-command-bar/editor-command-bar.d.ts

@@ -1,4 +1,3 @@
-import { CompilerOptions } from '@typespec/compiler';
 import { FunctionComponent, ReactNode } from 'react';
 import { BrowserHost, PlaygroundSample } from '../types.js';
 export interface EditorCommandBarProps {
@@ -10,8 +9,6 @@ export interface EditorCommandBarProps {
     host: BrowserHost;
     selectedEmitter: string;
     onSelectedEmitterChange: (emitter: string) => void;
-    compilerOptions: CompilerOptions;
-    onCompilerOptionsChange: (options: CompilerOptions) => void;
     samples?: Record<string, PlaygroundSample>;
     selectedSampleName: string;
     onSelectedSampleNameChange: (sampleName: string) => void;

package/dist/src/editor-command-bar/editor-command-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor-command-bar.d.ts","sourceRoot":"","sources":["../../../src/editor-command-bar/editor-command-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAW,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIxE,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAGjE,MAAM,WAAW,qBAAqB;IACpC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACrC,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACrC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,IAAI,EAAE,WAAW,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,uBAAuB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,eAAe,EAAE,eAAe,CAAC;IACjC,uBAAuB,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAE5D,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAC3C,kBAAkB,EAAE,MAAM,CAAC;IAC3B,0BAA0B,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1D;AACD,eAAO,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CA0ErE,CAAC"}
+{"version":3,"file":"editor-command-bar.d.ts","sourceRoot":"","sources":["../../../src/editor-command-bar/editor-command-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAW,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxE,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAGjE,MAAM,WAAW,qBAAqB;IACpC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACrC,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACrC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,IAAI,EAAE,WAAW,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,uBAAuB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnD,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAC3C,kBAAkB,EAAE,MAAM,CAAC;IAC3B,0BAA0B,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1D;AACD,eAAO,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CAmErE,CAAC"}

package/dist/src/react/editor-panel/config-panel.d.ts

@@ -0,0 +1,14 @@
+import { CompilerOptions } from '@typespec/compiler';
+import { FunctionComponent } from 'react';
+import { BrowserHost } from '../../types.js';
+import { PlaygroundEditorsOptions } from '../playground.js';
+export interface ConfigPanelProps {
+    host: BrowserHost;
+    selectedEmitter: string;
+    compilerOptions: CompilerOptions;
+    onCompilerOptionsChange: (options: CompilerOptions) => void;
+    onSelectedEmitterChange: (emitter: string) => void;
+    editorOptions?: PlaygroundEditorsOptions;
+}
+export declare const ConfigPanel: FunctionComponent<ConfigPanelProps>;
+//# sourceMappingURL=config-panel.d.ts.map

package/dist/src/react/editor-panel/config-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-panel.d.ts","sourceRoot":"","sources":["../../../../src/react/editor-panel/config-panel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,OAAO,EAAqD,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAClG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAKjE,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,WAAW,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,eAAe,CAAC;IACjC,uBAAuB,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5D,uBAAuB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,aAAa,CAAC,EAAE,wBAAwB,CAAC;CAC1C;AAID,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CA8F3D,CAAC"}

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

@@ -0,0 +1,22 @@
+import { CompilerOptions } from '@typespec/compiler';
+import { editor } from 'monaco-editor';
+import { FunctionComponent, ReactNode } from 'react';
+import { BrowserHost } from '../../types.js';
+import { OnMountData } from '../editor.js';
+import { PlaygroundEditorsOptions } from '../playground.js';
+export type EditorPanelTab = "tsp" | "cfg";
+export interface EditorPanelProps {
+    host: BrowserHost;
+    model: editor.IModel;
+    actions?: editor.IActionDescriptor[];
+    editorOptions?: PlaygroundEditorsOptions;
+    onMount?: (data: OnMountData) => void;
+    selectedEmitter: string;
+    compilerOptions: CompilerOptions;
+    onCompilerOptionsChange: (options: CompilerOptions) => void;
+    onSelectedEmitterChange: (emitter: string) => void;
+    /** Toolbar content rendered above the editor area */
+    commandBar?: ReactNode;
+}
+export declare const EditorPanel: FunctionComponent<EditorPanelProps>;
+//# sourceMappingURL=editor-panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"editor-panel.d.ts","sourceRoot":"","sources":["../../../../src/react/editor-panel/editor-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAyB,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACtF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAKjE,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,KAAK,CAAC;AAkB3C,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC,iBAAiB,EAAE,CAAC;IACrC,aAAa,CAAC,EAAE,wBAAwB,CAAC;IACzC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAEtC,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,eAAe,CAAC;IACjC,uBAAuB,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5D,uBAAuB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnD,qDAAqD;IACrD,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAwD3D,CAAC"}

package/dist/src/react/editor-panel/index.d.ts

@@ -0,0 +1,3 @@
+export { ConfigPanel, type ConfigPanelProps } from './config-panel.js';
+export { EditorPanel, type EditorPanelProps, type EditorPanelTab } from './editor-panel.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/react/editor-panel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/editor-panel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/src/react/editor-panel/tspconfig-utils.d.ts

@@ -0,0 +1,24 @@
+import { CompilerOptions, LinterRuleSet } from '@typespec/compiler';
+export interface TspConfig {
+    emit?: string[];
+    options?: Record<string, Record<string, unknown>>;
+    linter?: LinterRuleSet;
+    imports?: string[];
+    trace?: string | string[];
+    "warn-as-error"?: boolean;
+    "output-dir"?: string;
+}
+/**
+ * Serialize the current playground state (emitter + compiler options) to tspconfig.yaml content.
+ */
+export declare function compilerOptionsToTspConfig(selectedEmitter: string, compilerOptions: CompilerOptions): string;
+export interface ParsedTspConfig {
+    selectedEmitter?: string;
+    compilerOptions: CompilerOptions;
+}
+/**
+ * Parse tspconfig.yaml content back to playground state.
+ * Returns undefined if the YAML is invalid.
+ */
+export declare function parseTspConfigYaml(yamlContent: string): ParsedTspConfig | undefined;
+//# sourceMappingURL=tspconfig-utils.d.ts.map

package/dist/src/react/editor-panel/tspconfig-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tspconfig-utils.d.ts","sourceRoot":"","sources":["../../../../src/react/editor-panel/tspconfig-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGzE,MAAM,WAAW,SAAS;IACxB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,wBAAgB,0BAA0B,CACxC,eAAe,EAAE,MAAM,EACvB,eAAe,EAAE,eAAe,GAC/B,MAAM,CAgBR;AAED,MAAM,WAAW,eAAe;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,eAAe,CAAC;CAClC;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,MAAM,GAAG,eAAe,GAAG,SAAS,CAuBnF"}

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;AAQjE,OAAO,KAAK,EAAoB,gBAAgB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEpF,OAAO,EAAsB,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAGrF,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,uDAAuD;IACvD,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAE9B,uBAAuB;IACvB,KAAK,CAAC,EAAE,eAAe,CAAC;IAExB,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,MAAM,WAAW,eAAe;IAC9B,4BAA4B;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAqPzD,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,EAAoB,gBAAgB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AACpF,OAAO,EAAsB,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAGrF,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,uDAAuD;IACvD,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAE9B,uBAAuB;IACvB,KAAK,CAAC,EAAE,eAAe,CAAC;IAExB,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,MAAM,WAAW,eAAe;IAC9B,4BAA4B;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CA0PzD,CAAC"}

package/dist/src/react/settings/compiler-settings.d.ts

@@ -4,6 +4,7 @@ import { BrowserHost } from '../../types.js';
 export interface CompilerSettingsProps {
     readonly host: BrowserHost;
     readonly selectedEmitter: string;
+    readonly onSelectedEmitterChange: (emitter: string) => void;
     readonly options: CompilerOptions;
     readonly onOptionsChanged: (options: CompilerOptions) => void;
 }

package/dist/src/react/settings/compiler-settings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"compiler-settings.d.ts","sourceRoot":"","sources":["../../../../src/react/settings/compiler-settings.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAiB,MAAM,oBAAoB,CAAC;AACzE,OAAO,EAAe,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAKlD,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,eAAe,EAAE,MAAM,CAAC;IACjC,QAAQ,CAAC,OAAO,EAAE,eAAe,CAAC;IAClC,QAAQ,CAAC,gBAAgB,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;CAC/D;AAED,eAAO,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CA+CrE,CAAC"}
+{"version":3,"file":"compiler-settings.d.ts","sourceRoot":"","sources":["../../../../src/react/settings/compiler-settings.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAiB,MAAM,oBAAoB,CAAC;AACzE,OAAO,EAAwB,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAMlD,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,eAAe,EAAE,MAAM,CAAC;IACjC,QAAQ,CAAC,uBAAuB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,QAAQ,CAAC,OAAO,EAAE,eAAe,CAAC;IAClC,QAAQ,CAAC,gBAAgB,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;CAC/D;AAED,eAAO,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CAuFrE,CAAC"}

package/dist/src/react/settings/emitter-options-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"emitter-options-form.d.ts","sourceRoot":"","sources":["../../../../src/react/settings/emitter-options-form.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAkC,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,OAAO,EAAE,oBAAoB,CAAC;IACvC,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;IACjC,QAAQ,CAAC,cAAc,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;CAC5D;AAED,eAAO,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,uBAAuB,CAiDzE,CAAC"}
+{"version":3,"file":"emitter-options-form.d.ts","sourceRoot":"","sources":["../../../../src/react/settings/emitter-options-form.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAkC,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,OAAO,EAAE,oBAAoB,CAAC;IACvC,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;IACjC,QAAQ,CAAC,cAAc,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;CAC5D;AAED,eAAO,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,uBAAuB,CAiDzE,CAAC"}

package/dist/src/react/settings/linter-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"linter-form.d.ts","sourceRoot":"","sources":["../../../../src/react/settings/linter-form.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAW,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAe,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAE3D,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;IAChD,aAAa,EAAE,aAAa,CAAC;IAC7B,sBAAsB,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1D;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAsCzD,CAAC"}
+{"version":3,"file":"linter-form.d.ts","sourceRoot":"","sources":["../../../../src/react/settings/linter-form.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAW,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAe,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAE3D,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;IAChD,aAAa,EAAE,aAAa,CAAC;IAC7B,sBAAsB,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1D;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CA0CzD,CAAC"}

package/dist/style.css

@@ -251,31 +251,112 @@
   margin: 0;
   line-height: 1.4;
 }
-._form_sqeas_1 {
+._bar_15c2c_1 {
+  border-bottom: 1px solid var(--colorNeutralStroke1);
+}
+
+._divider_15c2c_5 {
+  flex: 1;
+}
+
+._spacer_15c2c_9 {
+  width: 10px;
+}
+._settings_1yvpj_1 {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 4px;
 }
 
-._item_sqeas_7 {
+._section_1yvpj_7 {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 12px;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--colorNeutralStroke2);
+}
+
+._section_1yvpj_7:last-child {
+  border-bottom: none;
+}
+
+._section-title_1yvpj_19 {
+  margin: 0;
 }
 
-._switch_sqeas_13 label {
+._field_1yvpj_23 {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+._section-subtitle_1yvpj_29 {
+  color: var(--colorNeutralForeground3);
+}
+
+._empty_1yvpj_33 {
+  color: var(--colorNeutralForeground3);
+  font-style: italic;
+}
+._form_w9o1o_1 {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+._item_w9o1o_7 {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+._description_w9o1o_13 {
+  color: var(--colorNeutralForeground3);
+}
+
+._switch_w9o1o_17 label {
   padding-left: 0;
 }
-._bar_15c2c_1 {
+._config-panel_cffut_1 {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+._config-toggle_cffut_8 {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
   border-bottom: 1px solid var(--colorNeutralStroke1);
+  gap: 8px;
+  flex-shrink: 0;
 }
 
-._divider_15c2c_5 {
+._config-content_cffut_17 {
   flex: 1;
+  min-height: 0;
+  overflow: auto;
 }
 
-._spacer_15c2c_9 {
-  width: 10px;
+._form-content_cffut_23 {
+  padding: 12px;
+}
+._editor-panel_k9ax7_1 {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+}
+
+._panel-tabs-container_k9ax7_7 {
+  background-color: var(--colorNeutralBackground3);
+}
+
+._panel-content_k9ax7_11 {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
 }
 ._file-output_jzw6j_1 {
   position: relative;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typespec/playground",
-  "version": "0.13.0-dev.2",
+  "version": "0.13.0-dev.4",
   "author": "Microsoft Corporation",
   "description": "TypeSpec playground UI components.",
   "homepage": "https://typespec.io",
@@ -62,11 +62,11 @@
     "@fluentui/react-components": "~9.73.1",
     "@fluentui/react-icons": "^2.0.292",
     "@typespec/bundler": "^0.5.0 || >= 0.5.1-dev.1",
-    "@typespec/compiler": "^1.9.0 || >= 1.10.0-dev.7",
+    "@typespec/compiler": "^1.9.0 || >= 1.10.0-dev.8",
     "@typespec/html-program-viewer": "^0.79.0 || >= 0.80.0-dev.2",
     "@typespec/http": "^1.9.1 || >= 1.10.0-dev.3",
-    "@typespec/openapi": "^1.9.0 || >= 1.10.0-dev.3",
-    "@typespec/openapi3": "^1.9.0 || >= 1.10.0-dev.5",
+    "@typespec/openapi": "^1.9.0 || >= 1.10.0-dev.4",
+    "@typespec/openapi3": "^1.9.0 || >= 1.10.0-dev.6",
     "@typespec/protobuf": "^0.79.0 || >= 0.80.0-dev.2",
     "@typespec/rest": "^0.79.0 || >= 0.80.0-dev.2",
     "@typespec/versioning": "^0.79.0 || >= 0.80.0-dev.2",
@@ -78,6 +78,7 @@
     "react-dom": "~19.2.3",
     "react-error-boundary": "^6.0.0",
     "swagger-ui-dist": "^5.20.1",
+    "yaml": "~2.8.2",
     "vscode-languageserver": "~9.0.1",
     "vscode-languageserver-textdocument": "~1.0.12"
   },

package/dist/src/react/settings/compiler-settings-dialog-button.d.ts

@@ -1,8 +0,0 @@
-import { CompilerOptions } from '@typespec/compiler';
-export interface CompilerSettingsDialogButtonProps {
-    selectedEmitter: string;
-    compilerOptions: CompilerOptions;
-    onCompilerOptionsChange: (options: CompilerOptions) => void;
-}
-export declare const CompilerSettingsDialogButton: ({ selectedEmitter, compilerOptions, onCompilerOptionsChange, }: CompilerSettingsDialogButtonProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=compiler-settings-dialog-button.d.ts.map

package/dist/src/react/settings/compiler-settings-dialog-button.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"compiler-settings-dialog-button.d.ts","sourceRoot":"","sources":["../../../../src/react/settings/compiler-settings-dialog-button.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAI1D,MAAM,WAAW,iCAAiC;IAChD,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,eAAe,CAAC;IACjC,uBAAuB,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;CAC7D;AAED,eAAO,MAAM,4BAA4B,GAAI,gEAI1C,iCAAiC,4CAuBnC,CAAC"}