@typespec/playground 0.3.0-dev.0 → 0.3.0-dev.10

package/dist/react/index.js

@@ -1,943 +1,1566 @@
 import { createContext, useContext, memo, useCallback, useMemo, useRef, useEffect, 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, useId, Label, RadioGroup, Radio, Input, Switch, Checkbox, Divider, Dialog, DialogTrigger, ToolbarButton, DialogSurface, DialogBody, DialogTitle, DialogContent, Link, Toolbar, Tooltip, TabList, Tab, tokens, useToastController, Toast, ToastTitle, ToastBody, Toaster, FluentProvider, webLightTheme } from '@fluentui/react-components';
+import { mergeClasses, Popover, PopoverTrigger, PopoverSurface, Title3, Table, TableHeader, TableRow, TableHeaderCell, TableBody, TableCell, Select, useId, Label, RadioGroup, Radio, Input, Switch, Checkbox, Divider, Dialog, DialogTrigger, ToolbarButton, DialogSurface, DialogBody, DialogTitle, DialogContent, Toolbar, Tooltip, Link, TabList, Tab, tokens, useToastController, Toast, ToastTitle, ToastBody, Toaster, FluentProvider, webLightTheme } from '@fluentui/react-components';
 import debounce from 'debounce';
-import { editor, Uri, MarkerSeverity, KeyMod, KeyCode } from 'monaco-editor';
+import { Uri, editor, 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-O7CGHf8F.js';
+import { Settings24Regular, Save16Regular, Broom16Filled, Bug16Regular, FolderListRegular, DataLineRegular, ErrorCircle16Filled, Warning16Filled, ChevronDown16Regular } from '@fluentui/react-icons';
+import { g as getMonacoRange, a as createUrlStateStorage, c as createBrowserHost, r as registerMonacoLanguage } from '../state-storage-Bj5MQoKS.js';
 import { ColorProvider, TypeSpecProgramViewer } from '@typespec/html-program-viewer';
 import { getSourceLocation } from '@typespec/compiler';
 import { createRoot } from 'react-dom/client';
-import 'vscode-languageserver-textdocument';
-import 'lzutf8';
 
-const PlaygroundContext = createContext(undefined);
+const PlaygroundContext = createContext(void 0);
 const PlaygroundContextProvider = PlaygroundContext.Provider;
 function usePlaygroundContext() {
-    const context = useContext(PlaygroundContext);
-    if (context === undefined) {
-        throw new Error("usePlaygroundContext must be used within a PlaygroundContextProvider");
-    }
-    return context;
+  const context = useContext(PlaygroundContext);
+  if (context === void 0) {
+    throw new Error("usePlaygroundContext must be used within a PlaygroundContextProvider");
+  }
+  return context;
 }
 
-var style$b = {"footer":"footer-module_footer__QqUEE","footer-item":"footer-module_footer-item__7rhbZ"};
+const footer = "_footer_cn8nf_1";
+const style$b = {
+	footer: footer,
+	"footer-item": "_footer-item_cn8nf_9"
+};
 
 const FooterItem = ({ children, link, className }) => {
-    const resolvedClassName = mergeClasses(style$b["footer-item"], className);
-    return link ? (jsx("a", { className: resolvedClassName, href: link, target: "_blank", rel: "noopener noreferrer", children: children })) : (jsx("div", { className: resolvedClassName, children: children }));
+  const resolvedClassName = mergeClasses(style$b["footer-item"], className);
+  return link ? /* @__PURE__ */ jsx("a", { className: resolvedClassName, href: link, target: "_blank", rel: "noopener noreferrer", children }) : /* @__PURE__ */ jsx("div", { className: resolvedClassName, children });
 };
 
-var style$a = {"version-item":"footer-version-item-module_version-item__pjuvV","button":"footer-version-item-module_button__70iqf"};
+const button = "_button_1c15n_4";
+const style$a = {
+	"version-item": "_version-item_1c15n_1",
+	button: button
+};
 
 const FooterVersionItem = memo(({ versionSelector }) => {
-    var _a;
-    const { host } = usePlaygroundContext();
-    const latest = versionSelector === null || versionSelector === void 0 ? void 0 : versionSelector.latest;
-    const selected = (_a = versionSelector === null || versionSelector === void 0 ? void 0 : versionSelector.selected) !== null && _a !== void 0 ? _a : host.compiler.MANIFEST.version;
-    return (jsx(FooterItem, { className: style$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 { host } = usePlaygroundContext();
+  const latest = versionSelector?.latest;
+  const selected = versionSelector?.selected ?? host.compiler.MANIFEST.version;
+  return /* @__PURE__ */ jsx(FooterItem, { className: style$a["version-item"], children: /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsxs("div", { className: style$a["button"], children: [
+      /* @__PURE__ */ jsx("span", { children: "Version " }),
+      /* @__PURE__ */ jsx("span", { children: selected }),
+      /* @__PURE__ */ jsx("span", { children: latest ? latest === selected ? " (latest)" : " (old)" : "" })
+    ] }) }),
+    /* @__PURE__ */ jsx(PopoverSurface, { children: /* @__PURE__ */ jsx(VersionsPopup, { versionSelector }) })
+  ] }) });
 });
 const VersionsPopup = memo(({ versionSelector }) => {
-    const { host } = usePlaygroundContext();
-    return (jsxs("div", { style: { maxWidth: "400px" }, children: [versionSelector && jsx(VersionSelector, { ...versionSelector }), jsxs("div", { children: [jsx(Title3, { children: "Loaded libraries" }), jsxs(Table, { size: "small", children: [jsx(TableHeader, { children: jsx(TableRow, { children: columns.map((column) => (jsx(TableHeaderCell, { children: column.label }, column.columnKey))) }) }), jsx(TableBody, { children: Object.values(host.libraries).map((item) => (jsxs(TableRow, { children: [jsx(TableCell, { children: item.name }), jsx(TableCell, { children: item.packageJson.version })] }, item.name))) })] })] })] }));
+  const { host } = usePlaygroundContext();
+  return /* @__PURE__ */ jsxs("div", { style: { maxWidth: "400px" }, children: [
+    versionSelector && /* @__PURE__ */ jsx(VersionSelector, { ...versionSelector }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Title3, { children: "Loaded libraries" }),
+      /* @__PURE__ */ jsxs(Table, { size: "small", children: [
+        /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx(TableHeaderCell, { children: column.label }, column.columnKey)) }) }),
+        /* @__PURE__ */ jsx(TableBody, { children: Object.values(host.libraries).map((item) => /* @__PURE__ */ jsxs(TableRow, { children: [
+          /* @__PURE__ */ jsx(TableCell, { children: item.name }),
+          /* @__PURE__ */ jsx(TableCell, { children: item.packageJson.version })
+        ] }, item.name)) })
+      ] })
+    ] })
+  ] });
 });
 const columns = [
-    { columnKey: "name", label: "Library" },
-    { columnKey: "version", label: "Version" },
+  { columnKey: "name", label: "Library" },
+  { columnKey: "version", label: "Version" }
 ];
 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))) })] }));
+  const changeVersion = useCallback(
+    (ev, data) => {
+      onChange(versions.find((x) => x.name === data.value));
+    },
+    [versions, onChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(Title3, { children: "Select release" }),
+    /* @__PURE__ */ jsx(Select, { value: selected, onChange: changeVersion, "aria-label": "Select version", children: versions.map((version) => /* @__PURE__ */ jsxs("option", { value: version.name, children: [
+      version.label,
+      " ",
+      version.name === latest ? "(latest)" : ""
+    ] }, version.name)) })
+  ] });
 });
 
 const Footer = ({ className, children }) => {
-    return jsx("div", { className: mergeClasses(style$b.footer, className), children: children });
+  return /* @__PURE__ */ jsx("div", { className: mergeClasses(style$b.footer, className), children });
 };
 
-const EmitterDropdown = ({ emitters, onSelectedEmitterChange, selectedEmitter, }) => {
-    const options = emitters.map((emitterName) => {
-        return jsx("option", { children: emitterName }, emitterName);
-    });
-    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] }));
+const EmitterDropdown = ({
+  emitters,
+  onSelectedEmitterChange,
+  selectedEmitter
+}) => {
+  const options = emitters.map((emitterName) => {
+    return /* @__PURE__ */ jsx("option", { children: emitterName }, emitterName);
+  });
+  const handleSelected = useCallback(
+    (evt) => {
+      onSelectedEmitterChange(evt.target.value);
+    },
+    [onSelectedEmitterChange]
+  );
+  return /* @__PURE__ */ jsxs(
+    Select,
+    {
+      className: "sample-dropdown",
+      onChange: handleSelected,
+      value: selectedEmitter,
+      "aria-label": "Select an emitter",
+      children: [
+        /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select emitter..." }),
+        options
+      ]
+    }
+  );
 };
 
-const SamplesDropdown = ({ samples, selectedSampleName, onSelectedSampleNameChange, }) => {
-    const options = Object.keys(samples).map((sample) => {
-        return jsx("option", { children: sample }, sample);
-    });
-    const handleSelected = useCallback((evt) => {
-        if (samples[evt.target.value]) {
-            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] }));
+const SamplesDropdown = ({
+  samples,
+  selectedSampleName,
+  onSelectedSampleNameChange
+}) => {
+  const options = Object.keys(samples).map((sample) => {
+    return /* @__PURE__ */ jsx("option", { children: sample }, sample);
+  });
+  const handleSelected = useCallback(
+    (evt) => {
+      if (samples[evt.target.value]) {
+        onSelectedSampleNameChange(evt.target.value);
+      }
+    },
+    [onSelectedSampleNameChange]
+  );
+  return /* @__PURE__ */ jsxs(
+    Select,
+    {
+      className: "sample-dropdown",
+      onChange: handleSelected,
+      value: selectedSampleName ?? "",
+      "aria-label": "Select a sample",
+      children: [
+        /* @__PURE__ */ 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 form = "_form_sqeas_1";
+const item$1 = "_item_sqeas_7";
+const style$9 = {
+	form: form,
+	item: item$1,
+	"switch": "_switch_sqeas_13"
+};
 
-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;
-    if (emitterOptionsSchema === undefined) {
-        return jsx(Fragment, { children: "\"No options\"" });
-    }
-    const entries = Object.entries(emitterOptionsSchema);
-    const handleChange = useCallback(({ name, value }) => {
-        optionsChanged({
-            ...options,
-            [library.name]: {
-                ...options[library.name],
-                [name]: value,
-            },
-        });
-    }, [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));
-        }) }));
-};
-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 handleChange = useCallback((_, data) => onChange({ name, value: "value" in data ? data.value : data.checked }), [onChange]);
-    switch (prop.type) {
-        case "boolean":
-            return (jsx(Switch, { className: style$9["switch"], label: prettyName, labelPosition: "above", checked: value, onChange: handleChange }));
-        case "string":
-        default:
-            return (jsxs("div", { className: style$9["item"], children: [jsx(Label, { htmlFor: inputId, title: name, children: prettyName }), prop.enum ? (jsx(RadioGroup, { layout: "horizontal", id: inputId, value: value, onChange: handleChange, children: prop.enum.map((x) => (jsx(Radio, { value: x, label: x }, x))) })) : (jsx(Input, { id: inputId, value: value, onChange: handleChange }))] }));
-    }
+const EmitterOptionsForm = ({
+  library,
+  options,
+  optionsChanged
+}) => {
+  const emitterOptionsSchema = library.definition?.emitter?.options?.properties;
+  if (emitterOptionsSchema === void 0) {
+    return /* @__PURE__ */ jsx(Fragment, { children: '"No options"' });
+  }
+  const entries = Object.entries(emitterOptionsSchema);
+  const handleChange = useCallback(
+    ({ name, value }) => {
+      optionsChanged({
+        ...options,
+        [library.name]: {
+          ...options[library.name],
+          [name]: value
+        }
+      });
+    },
+    [options, optionsChanged]
+  );
+  return /* @__PURE__ */ jsx("div", { className: style$9["form"], children: entries.map(([key, value]) => {
+    return /* @__PURE__ */ jsx("div", { className: style$9["form-item"], children: /* @__PURE__ */ jsx(
+      JsonSchemaPropertyInput,
+      {
+        emitterOptions: options[library.name] ?? {},
+        name: key,
+        prop: value,
+        onChange: handleChange
+      }
+    ) }, key);
+  }) });
+};
+const JsonSchemaPropertyInput = ({
+  emitterOptions,
+  name,
+  prop,
+  onChange
+}) => {
+  const prettyName = useMemo(
+    () => name[0].toUpperCase() + name.slice(1).replace(/-/g, " "),
+    [name]
+  );
+  const inputId = useId("input");
+  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":
+      return /* @__PURE__ */ jsx(
+        Switch,
+        {
+          className: style$9["switch"],
+          label: prettyName,
+          labelPosition: "above",
+          checked: value,
+          onChange: handleChange
+        }
+      );
+    case "string":
+    default:
+      return /* @__PURE__ */ jsxs("div", { className: style$9["item"], children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: inputId, title: name, children: prettyName }),
+        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 })
+      ] });
+  }
 };
 
-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 LinterForm = ({
+  libraries,
+  linterRuleSet,
+  onLinterRuleSetChanged
+}) => {
+  const rulesets = Object.values(libraries).flatMap((lib) => {
+    const linter = lib.linter ?? lib.definition?.linter;
+    return Object.keys(linter?.ruleSets ?? {}).map((x) => `${lib.name}/${x}`);
+  });
+  if (rulesets.length === 0) {
+    return /* @__PURE__ */ jsx(Fragment, { children: "No ruleset available" });
+  }
+  const handleChange = (ruleSet, checked) => {
+    const ruleSets = linterRuleSet.extends ?? [];
+    const updatedRuleSets = checked ? [...ruleSets, ruleSet] : ruleSets.filter((x) => x !== ruleSet);
+    onLinterRuleSetChanged({
+      extends: updatedRuleSets
     });
-    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 updatedRuleSets = checked
-            ? [...ruleSets, ruleSet]
-            : ruleSets.filter((x) => x !== ruleSet);
-        onLinterRuleSetChanged({
-            extends: updatedRuleSets,
-        });
-    };
-    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 /* @__PURE__ */ jsx(Fragment, { children: rulesets.map((ruleSet) => {
+    return /* @__PURE__ */ jsx(
+      RuleSetCheckbox,
+      {
+        ruleSet,
+        checked: linterRuleSet.extends?.includes(ruleSet),
+        onChange: handleChange
+      },
+      ruleSet
+    );
+  }) });
 };
 const RuleSetCheckbox = ({ ruleSet, checked, onChange }) => {
-    const handleChange = useCallback((_, data) => {
-        onChange(ruleSet, !!data.checked);
-    }, [ruleSet, checked, onChange]);
-    return jsx(Checkbox, { label: ruleSet, checked: checked, onChange: handleChange });
-};
-
-const CompilerSettings = ({ selectedEmitter, host, options, onOptionsChanged, }) => {
-    var _a, _b;
-    const emitterOptionsChanged = useCallback((emitterOptions) => {
-        onOptionsChanged({
-            ...options,
-            options: emitterOptions,
-        });
-    }, [options]);
-    const library = host.libraries[selectedEmitter];
-    const linterRuleSet = (_a = options.linterRuleSet) !== null && _a !== void 0 ? _a : {};
-    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 })] }));
+  const handleChange = useCallback(
+    (_, data) => {
+      onChange(ruleSet, !!data.checked);
+    },
+    [ruleSet, checked, onChange]
+  );
+  return /* @__PURE__ */ jsx(Checkbox, { label: ruleSet, checked, onChange: handleChange });
 };
 
-const CompilerSettingsDialogButton = ({ selectedEmitter, compilerOptions, onCompilerOptionsChange, }) => {
-    const { host } = usePlaygroundContext();
-    return (jsxs(Dialog, { children: [jsx(DialogTrigger, { children: jsx(ToolbarButton, { icon: jsx(Settings24Regular, {}) }) }), jsx(DialogSurface, { children: jsxs(DialogBody, { children: [jsx(DialogTitle, { children: "Settings" }), jsx(DialogContent, { children: jsx(CompilerSettings, { host: host, selectedEmitter: selectedEmitter, options: compilerOptions, onOptionsChanged: onCompilerOptionsChange }) })] }) })] }));
+const CompilerSettings = ({
+  selectedEmitter,
+  host,
+  options,
+  onOptionsChanged
+}) => {
+  const emitterOptionsChanged = useCallback(
+    (emitterOptions) => {
+      onOptionsChanged({
+        ...options,
+        options: emitterOptions
+      });
+    },
+    [options]
+  );
+  const library = host.libraries[selectedEmitter];
+  const linterRuleSet = options.linterRuleSet ?? {};
+  const linterRuleSetChanged = useCallback(
+    (linterRuleSet2) => {
+      onOptionsChanged({
+        ...options,
+        linterRuleSet: linterRuleSet2
+      });
+    },
+    [options]
+  );
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      "Emitter: ",
+      selectedEmitter
+    ] }),
+    /* @__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
+      }
+    )
+  ] });
 };
 
-var style$8 = {"bar":"editor-command-bar-module_bar__5q4D5","divider":"editor-command-bar-module_divider__iDahk","spacer":"editor-command-bar-module_spacer__hlHE9"};
+const 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,
+        {
+          host,
+          selectedEmitter,
+          options: compilerOptions,
+          onOptionsChanged: onCompilerOptionsChange
+        }
+      ) })
+    ] }) })
+  ] });
+};
 
-const EditorCommandBar = ({ documentationUrl, saveCode, formatCode, fileBug, host, selectedEmitter, onSelectedEmitterChange, compilerOptions, onCompilerOptionsChange, samples, selectedSampleName, onSelectedSampleNameChange, }) => {
-    const documentation = documentationUrl ? (jsx("label", { children: jsx(Link, { href: documentationUrl, target: "_blank", children: "Docs" }) })) : undefined;
-    const bugButton = fileBug ? jsx(FileBugButton, { onClick: fileBug }) : undefined;
-    const emitters = useMemo(() => Object.values(host.libraries)
-        .filter((x) => x.isEmitter)
-        .map((x) => x.name), [host.libraries]);
-    return (jsx("div", { className: style$8["bar"], children: jsxs(Toolbar, { children: [jsx(Tooltip, { content: "Save", relationship: "description", withArrow: true, children: jsx(ToolbarButton, { "aria-label": "Save", icon: jsx(Save16Regular, {}), onClick: saveCode }) }), jsx(Tooltip, { content: "Format", relationship: "description", withArrow: true, children: jsx(ToolbarButton, { "aria-label": "Format", icon: jsx(Broom16Filled, {}), onClick: formatCode }) }), samples && (jsxs(Fragment, { children: [jsx(SamplesDropdown, { samples: samples, selectedSampleName: selectedSampleName, onSelectedSampleNameChange: onSelectedSampleNameChange }), jsx("div", { className: style$8["spacer"] })] })), jsx(EmitterDropdown, { emitters: emitters, onSelectedEmitterChange: onSelectedEmitterChange, selectedEmitter: selectedEmitter }), documentation && (jsxs(Fragment, { children: [jsx("div", { className: style$8["spacer"] }), documentation] })), jsx("div", { className: style$8["divider"] }), bugButton, jsx(CompilerSettingsDialogButton, { compilerOptions: compilerOptions, onCompilerOptionsChange: onCompilerOptionsChange, selectedEmitter: selectedEmitter })] }) }));
+const bar = "_bar_15c2c_1";
+const divider = "_divider_15c2c_5";
+const spacer = "_spacer_15c2c_9";
+const style$8 = {
+	bar: bar,
+	divider: divider,
+	spacer: spacer
+};
+
+const EditorCommandBar = ({
+  documentationUrl,
+  saveCode,
+  formatCode,
+  fileBug,
+  host,
+  selectedEmitter,
+  onSelectedEmitterChange,
+  compilerOptions,
+  onCompilerOptionsChange,
+  samples,
+  selectedSampleName,
+  onSelectedSampleNameChange
+}) => {
+  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$8["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(
+        SamplesDropdown,
+        {
+          samples,
+          selectedSampleName,
+          onSelectedSampleNameChange
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: style$8["spacer"] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      EmitterDropdown,
+      {
+        emitters,
+        onSelectedEmitterChange,
+        selectedEmitter
+      }
+    ),
+    documentation && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: style$8["spacer"] }),
+      documentation
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: style$8["divider"] }),
+    bugButton,
+    /* @__PURE__ */ jsx(
+      CompilerSettingsDialogButton,
+      {
+        compilerOptions,
+        onCompilerOptionsChange,
+        selectedEmitter
+      }
+    )
+  ] }) });
 };
 const FileBugButton = ({ onClick }) => {
-    return (jsx(Tooltip, { content: "File Bug Report", relationship: "description", withArrow: true, children: jsx(ToolbarButton, { appearance: "subtle", "aria-label": "File Bug Report", icon: jsx(Bug16Regular, {}), onClick: onClick }) }));
+  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 (jsx(Footer, { children: jsx(FooterVersionItem, {}) }));
+  return /* @__PURE__ */ jsx(Footer, { children: /* @__PURE__ */ jsx(FooterVersionItem, {}) });
 };
 
 const Editor = ({ model, options, actions, onMount }) => {
-    const editorContainerRef = useRef(null);
-    const editorRef = useRef(null);
-    useEffect(() => {
-        editorRef.current = editor.create(editorContainerRef.current, {
-            model,
-            automaticLayout: true,
-            ...options,
-        });
-        onMount === null || onMount === void 0 ? void 0 : onMount({ editor: editorRef.current });
-    }, []);
-    useEffect(() => {
-        var _a;
-        editor.setTheme((_a = options.theme) !== null && _a !== void 0 ? _a : "typespec");
-    }, [options.theme]);
-    useEffect(() => {
-        const disposables = [];
-        for (const command of actions !== null && actions !== void 0 ? actions : []) {
-            disposables.push(editorRef.current.addAction(command));
-        }
-        return () => {
-            disposables.forEach((x) => x.dispose());
-        };
-    }, [actions]);
-    useEffect(() => {
-        if (editorRef.current) {
-            editorRef.current.setModel(model);
-        }
-    }, [model]);
-    return (jsx("div", { className: "monaco-editor-container", style: { width: "100%", height: "100%", overflow: "hidden" }, ref: editorContainerRef, "data-tabster": '{"uncontrolled": {}}' // https://github.com/microsoft/tabster/issues/316
-     }));
+  const editorContainerRef = useRef(null);
+  const editorRef = useRef(null);
+  useEffect(() => {
+    editorRef.current = editor.create(editorContainerRef.current, {
+      model,
+      automaticLayout: true,
+      ...options
+    });
+    onMount?.({ editor: editorRef.current });
+  }, []);
+  useEffect(() => {
+    editor.setTheme(options.theme ?? "typespec");
+  }, [options.theme]);
+  useEffect(() => {
+    const disposables = [];
+    for (const command of actions ?? []) {
+      disposables.push(editorRef.current.addAction(command));
+    }
+    return () => {
+      disposables.forEach((x) => x.dispose());
+    };
+  }, [actions]);
+  useEffect(() => {
+    if (editorRef.current) {
+      editorRef.current.setModel(model);
+    }
+  }, [model]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "monaco-editor-container",
+      style: { width: "100%", height: "100%" },
+      ref: editorContainerRef,
+      "data-tabster": '{"uncontrolled": {}}'
+    }
+  );
 };
 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);
-    }, [uri, language]);
+  return useMemo(() => {
+    const monacoUri = Uri.parse(uri);
+    return editor.getModel(monacoUri) ?? editor.createModel("", language, monacoUri);
+  }, [uri, language]);
 }
 
-/**
- * Hook to manage a value that could be either controlled or uncontrolled, such as a checked state or
- * text box string.
- * @param controlledValue - The controlled value passed in the props. This value will always be used if provided,
- * and the internal state will be updated to reflect it.
- * @param defaultUncontrolledValue - Initial value for the internal state in the uncontrolled case.
- * @returns An array of the current value and an updater callback. Like `React.useState`, the updater
- * callback always has the same identity, and it can take either a new value, or a function which
- * is passed the previous value and returns the new value.
- * @see https://reactjs.org/docs/uncontrolled-components.html
- */
 function useControllableValue(controlledValue, defaultUncontrolledValue, onChange) {
-    const [value, setValue] = useState(defaultUncontrolledValue);
-    const isControlled = useMemo(() => controlledValue !== undefined, []);
-    const currentValue = isControlled ? controlledValue : value;
-    // Duplicate the current value and onChange in refs so they're accessible from
-    // setValueOrCallOnChange without creating a new callback every time
-    const valueRef = useRef(currentValue);
-    const onChangeRef = useRef(onChange);
-    useEffect(() => {
-        valueRef.current = currentValue;
-        onChangeRef.current = onChange;
-    });
-    // To match the behavior of the setter returned by React.useState, this callback's identity
-    // should never change. This means it MUST NOT directly reference variables that can change.
-    const setValueOrCallOnChange = useMemo(() => (update) => {
-        // Assuming here that TValue is not a function, because a controllable value will typically
-        // be something a user can enter as input
-        const newValue = typeof update === "function" ? update(valueRef.current) : update;
-        if (onChangeRef.current) {
-            onChangeRef.current(newValue);
-        }
-        if (!isControlled) {
-            setValue(newValue);
-        }
-    }, []);
-    return [currentValue, setValueOrCallOnChange];
-}
-function useAsyncMemo(callback, defaultValue, deps) {
-    const [value, setValue] = useState(defaultValue);
-    useEffect(() => {
-        callback()
-            .then(setValue)
-            // eslint-disable-next-line no-console
-            .catch(() => console.error("Failed to load async memo"));
-    }, deps);
-    return value;
+  const [value, setValue] = useState(defaultUncontrolledValue);
+  const isControlled = useMemo(() => controlledValue !== void 0, []);
+  const currentValue = isControlled ? controlledValue : value;
+  const valueRef = useRef(currentValue);
+  const onChangeRef = useRef(onChange);
+  useEffect(() => {
+    valueRef.current = currentValue;
+    onChangeRef.current = onChange;
+  });
+  const setValueOrCallOnChange = useMemo(
+    () => (update) => {
+      const newValue = typeof update === "function" ? update(valueRef.current) : update;
+      if (onChangeRef.current) {
+        onChangeRef.current(newValue);
+      }
+      if (!isControlled) {
+        setValue(newValue);
+      }
+    },
+    []
+  );
+  return [currentValue, setValueOrCallOnChange];
 }
 
-var style$7 = {"file-output":"file-output-module_file-output__YBaE7","viewer-selector":"file-output-module_viewer-selector__fNWoo"};
+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 }) => {
+  if (filename === "") {
+    return null;
+  }
+  const options = {
+    ...editorOptions,
+    readOnly: true,
+    automaticLayout: true,
+    minimap: {
+      enabled: false
+    }
+  };
+  const model = useMonacoModel(filename);
+  model.setValue(value);
+  return /* @__PURE__ */ jsx(Editor, { model, options });
+};
+
+const style$7 = {
+	"file-output": "_file-output_jzw6j_1",
+	"viewer-selector": "_viewer-selector_jzw6j_5"
+};
 
-/**
- * Display a file output using different viewers.
- */
 const FileOutput = ({ filename, content, viewers }) => {
-    if (viewers.length === 0) {
-        return jsx(Fragment, { children: "No viewers" });
-    }
-    else if (viewers.length === 1) {
-        return viewers[0].render({ filename, content });
-    }
-    const [selected, setSelected] = useState(viewers[0].key);
-    const handleSelected = useCallback((_, data) => {
-        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;
-    }, [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 })] }));
-};
-
-var style$6 = {"tabs":"output-tabs-module_tabs__MFCRl","tab-divider":"output-tabs-module_tab-divider__9Fv--","tab":"output-tabs-module_tab__FJ78k","tab--selected":"output-tabs-module_tab--selected__GjCZY"};
-
-const OutputTabs = ({ tabs, selected, onSelect }) => {
-    const [leftTabs, rightTabs] = chunk(tabs, (x) => x.align === "left");
-    const onTabSelect = useCallback((event, data) => {
-        onSelect(data.value);
-    }, [onSelect]);
-    return (jsxs(TabList, { selectedValue: selected, onTabSelect: onTabSelect, className: style$6["tabs"], children: [leftTabs.map((tab) => {
-                return (jsx(OutputTabEl, { value: tab.id, className: tab.id === selected && style$6["tab--selected"], children: tab.name }, tab.id));
-            }), jsx("div", { className: style$6["tab-divider"] }), rightTabs.map((tab) => {
-                return (jsx(OutputTabEl, { value: tab.id, className: tab.id === selected && style$6["tab--selected"], children: tab.name }, tab.id));
-            })] }));
-};
-const OutputTabEl = (props) => {
-    return jsx(Tab, { ...props, className: mergeClasses(style$6["tab"], props.className) });
-};
-function chunk(items, condition) {
-    const match = [];
-    const unMatch = [];
-    for (const item of items) {
-        if (condition(item)) {
-            match.push(item);
-        }
-        else {
-            unMatch.push(item);
-        }
-    }
-    return [match, unMatch];
-}
+  const resolvedViewers = useMemo(
+    () => ({
+      [RawFileViewer.key]: RawFileViewer,
+      ...viewers
+    }),
+    [viewers]
+  );
+  const keys = Object.keys(resolvedViewers);
+  if (keys.length === 0) {
+    return /* @__PURE__ */ jsx(Fragment, { children: "No viewers" });
+  } else if (keys.length === 1) {
+    return resolvedViewers[keys[0]].render({ filename, content });
+  }
+  const [selected, setSelected] = useState(keys[0]);
+  const handleSelected = useCallback(
+    (_, data) => {
+      setSelected(data.value);
+    },
+    [selected]
+  );
+  const selectedRender = useMemo(() => {
+    return resolvedViewers[selected].render;
+  }, [selected, resolvedViewers]);
+  return /* @__PURE__ */ jsxs("div", { className: style$7["file-output"], children: [
+    /* @__PURE__ */ jsx("div", { className: style$7["viewer-selector"], children: /* @__PURE__ */ jsx(Select, { value: selected, onChange: handleSelected, "aria-label": "Select viewer", children: Object.values(resolvedViewers).map(({ key, label }) => /* @__PURE__ */ jsx("option", { value: key, children: label }, key)) }) }),
+    selectedRender && selectedRender({ filename, content })
+  ] });
+};
+const RawFileViewer = {
+  key: "raw",
+  label: "File",
+  render: ({ filename, content }) => /* @__PURE__ */ jsx(OutputEditor, { filename, value: content })
+};
 
-const TypeSpecEditor = ({ actions, options, ...other }) => {
-    const resolvedOptions = {
-        "semanticHighlighting.enabled": true,
-        automaticLayout: true,
-        tabSize: 2,
-        minimap: {
-            enabled: false,
-        },
-        ...options,
-    };
-    return jsx(Editor, { actions: actions, options: resolvedOptions, ...other });
+const tabs = "_tabs_1x6x2_1";
+const tab = "_tab_1x6x2_1";
+const style$6 = {
+	tabs: tabs,
+	"tab-divider": "_tab-divider_1x6x2_7",
+	tab: tab,
+	"tab--selected": "_tab--selected_1x6x2_18"
 };
-const OutputEditor = ({ filename, value, editorOptions }) => {
-    if (filename === "") {
-        return null;
-    }
-    const options = {
-        ...editorOptions,
-        readOnly: true,
-        automaticLayout: true,
-        minimap: {
-            enabled: false,
-        },
-    };
-    const model = useMonacoModel(filename);
-    model.setValue(value);
-    return jsx(Editor, { model: model, options: options });
+
+const OutputTabs = ({
+  filenames,
+  selected,
+  onSelect
+}) => {
+  const onTabSelect = useCallback(
+    (event, data) => {
+      onSelect(data.value);
+    },
+    [onSelect]
+  );
+  return /* @__PURE__ */ jsx(TabList, { selectedValue: selected, onTabSelect, className: style$6["tabs"], children: filenames.map((filename) => {
+    return /* @__PURE__ */ jsx(
+      Tab,
+      {
+        value: filename,
+        className: mergeClasses(style$6["tab"], filename === selected && style$6["tab--selected"]),
+        children: filename
+      },
+      filename
+    );
+  }) });
 };
 
-var style$5 = {"output-view":"output-view-module_output-view__uT5Ae","output-content":"output-view-module_output-content__Lis-G","type-graph-viewer":"output-view-module_type-graph-viewer__tUDEV"};
+const style$5 = {
+	"output-view": "_output-view_18pnu_1",
+	"file-viewer": "_file-viewer_18pnu_6",
+	"output-content": "_output-content_18pnu_12",
+	"file-viewer-content": "_file-viewer-content_18pnu_16",
+	"type-graph-viewer": "_type-graph-viewer_18pnu_21",
+	"viewer-tabs-container": "_viewer-tabs-container_18pnu_26"
+};
 
-const OutputView = ({ compilationState, viewers, editorOptions, }) => {
-    if (compilationState === undefined) {
-        return jsx(Fragment, {});
-    }
-    if ("internalCompilerError" in compilationState) {
-        return jsx(Fragment, {});
+const FileViewerComponent = ({
+  program,
+  outputFiles,
+  fileViewers
+}) => {
+  const [filename, setFilename] = useState("");
+  const [content, setContent] = useState("");
+  useEffect(() => {
+    if (outputFiles.length > 0) {
+      const fileStillThere = outputFiles.find((x) => x === filename);
+      const newFilename = fileStillThere ?? outputFiles[0];
+      setFilename(newFilename);
+      void loadOutputFile(fileStillThere ?? outputFiles[0]);
+    } else {
+      setFilename("");
     }
-    return (jsx(OutputViewInternal, { compilationResult: compilationState, viewers: viewers, editorOptions: editorOptions }));
+  }, [program, outputFiles]);
+  async function loadOutputFile(path) {
+    const contents = await program.host.readFile("./tsp-output/" + path);
+    setContent(contents.text);
+  }
+  const handleTabSelection = useCallback(
+    (newFilename) => {
+      setFilename(newFilename);
+      void loadOutputFile(newFilename);
+    },
+    [setFilename]
+  );
+  if (outputFiles.length === 0) {
+    return /* @__PURE__ */ jsx(Fragment, { children: "No files emitted." });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: style$5["file-viewer"], children: [
+    /* @__PURE__ */ jsx(OutputTabs, { filenames: outputFiles, selected: filename, onSelect: handleTabSelection }),
+    /* @__PURE__ */ jsx("div", { className: style$5["file-viewer-content"], children: /* @__PURE__ */ jsx(FileOutput, { filename, content, viewers: fileViewers }) })
+  ] });
 };
-const OutputViewInternal = ({ compilationResult, viewers, editorOptions }) => {
-    const { program, outputFiles } = compilationResult;
-    const [viewSelection, setViewSelection] = useState({
-        type: "file",
-        filename: "",
-        content: "",
-    });
-    useEffect(() => {
-        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]);
-            }
-            else {
-                setViewSelection({ type: "file", filename: viewSelection.filename, content: "" });
-            }
-        }
-    }, [program, outputFiles]);
-    async function loadOutputFile(path) {
-        const contents = await program.host.readFile("./tsp-output/" + path);
-        setViewSelection({ type: "file", filename: path, content: contents.text });
+function createFileViewer(fileViewers) {
+  const viewerMap = Object.fromEntries(fileViewers.map((x) => [x.key, x]));
+  return {
+    key: "file-output",
+    label: "Output explorer",
+    icon: /* @__PURE__ */ jsx(FolderListRegular, {}),
+    render: (props) => {
+      return /* @__PURE__ */ jsx(FileViewerComponent, { ...props, fileViewers: viewerMap });
     }
-    const diagnostics = program.diagnostics;
-    const tabs = useMemo(() => {
-        return [
-            ...outputFiles.map((x) => ({
-                align: "left",
-                name: x,
-                id: x,
-            })),
-            { id: "type-graph", name: "Type Graph", align: "right" },
-        ];
-    }, [outputFiles, diagnostics]);
-    const handleTabSelection = useCallback((tabId) => {
-        if (tabId === "type-graph") {
-            setViewSelection({ type: "type-graph" });
-        }
-        else {
-            void loadOutputFile(tabId);
-        }
-    }, []);
-    return (jsxs("div", { className: style$5["output-view"], children: [jsx(OutputTabs, { tabs: tabs, selected: viewSelection.type === "file" ? viewSelection.filename : viewSelection.type, onSelect: handleTabSelection }), jsx("div", { className: style$5["output-content"], children: jsx(OutputContent, { viewSelection: viewSelection, editorOptions: editorOptions, program: program, viewers: viewers }) })] }));
-};
-function getRawFileViewer(editorOptions) {
-    return {
-        key: "raw",
-        label: "File",
-        render: ({ filename, content }) => (jsx(OutputEditor, { editorOptions: editorOptions, filename: filename, value: content })),
-    };
+  };
 }
-const OutputContent = ({ viewSelection, program, viewers, editorOptions, }) => {
-    const resolvedViewers = useMemo(() => [getRawFileViewer(editorOptions), ...(viewers !== null && viewers !== void 0 ? viewers : [])], [viewers]);
-    switch (viewSelection.type) {
-        case "file":
-            return (jsx(FileOutput, { filename: viewSelection.filename, content: viewSelection.content, viewers: resolvedViewers }));
-        default:
-            return program && jsx(TypeGraphViewer, { program: program });
-    }
-};
-const TypeGraphViewer = ({ program }) => {
-    return (jsx("div", { className: style$5["type-graph-viewer"], children: jsx(ColorProvider, { colors: TypeGraphColors, children: jsx(TypeSpecProgramViewer, { program: program }) }) }));
+
+const TypeGraphViewerComponent = ({ program }) => {
+  return /* @__PURE__ */ jsx("div", { className: style$5["type-graph-viewer"], children: /* @__PURE__ */ jsx(ColorProvider, { colors: TypeGraphColors, children: /* @__PURE__ */ jsx(TypeSpecProgramViewer, { program }) }) });
 };
 const TypeGraphColors = {
-    background: tokens.colorNeutralBackground1,
-    typeKind: tokens.colorPaletteBerryForeground2,
-    typeName: tokens.colorNeutralForeground2,
-    dataKey: tokens.colorNeutralForeground2,
-    ref: tokens.colorBrandForeground1,
-    literal: tokens.colorPaletteLightGreenForeground2,
-    indentationGuide: tokens.colorNeutralForeground4,
-    property: tokens.colorPaletteMarigoldForeground2,
+  background: tokens.colorNeutralBackground1,
+  typeKind: tokens.colorPaletteBerryForeground2,
+  typeName: tokens.colorNeutralForeground2,
+  dataKey: tokens.colorNeutralForeground2,
+  ref: tokens.colorBrandForeground1,
+  literal: tokens.colorPaletteLightGreenForeground2,
+  indentationGuide: tokens.colorNeutralForeground4,
+  property: tokens.colorPaletteMarigoldForeground2
+};
+const TypeGraphViewer = {
+  key: "type-graph",
+  label: "Type graph",
+  icon: /* @__PURE__ */ jsx(DataLineRegular, {}),
+  render: TypeGraphViewerComponent
 };
 
-var style$4 = {"layout":"playground-module_layout__SCPgt"};
+const OutputView = ({
+  compilationState,
+  viewers,
+  fileViewers,
+  editorOptions
+}) => {
+  if (compilationState === void 0) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
+  if ("internalCompilerError" in compilationState) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
+  const resolvedViewers = useMemo(() => resolveViewers(viewers, fileViewers), [viewers]);
+  return /* @__PURE__ */ jsx(
+    OutputViewInternal,
+    {
+      compilationResult: compilationState,
+      viewers: resolvedViewers,
+      editorOptions
+    }
+  );
+};
+function resolveViewers(viewers, fileViewers) {
+  const fileViewer = createFileViewer(fileViewers ?? []);
+  const output = {
+    programViewers: {
+      [fileViewer.key]: fileViewer,
+      [TypeGraphViewer.key]: TypeGraphViewer
+    }
+  };
+  for (const item of viewers ?? []) {
+    output.programViewers[item.key] = item;
+  }
+  return output;
+}
+const OutputViewInternal = ({ compilationResult, viewers, editorOptions }) => {
+  const viewerList = Object.values(viewers.programViewers);
+  const [selected, setSelected] = useState(viewerList[0].key);
+  const onTabSelect = useCallback(
+    (_, data) => setSelected(data.value),
+    [setSelected]
+  );
+  const viewer = useMemo(() => {
+    return viewers.programViewers[selected];
+  }, [viewers.programViewers, selected]);
+  return /* @__PURE__ */ jsxs("div", { className: style$5["output-view"], children: [
+    /* @__PURE__ */ jsx("div", { className: style$5["output-content"], children: /* @__PURE__ */ jsx(
+      viewer.render,
+      {
+        program: compilationResult.program,
+        outputFiles: compilationResult.outputFiles
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: style$5["viewer-tabs-container"], children: /* @__PURE__ */ jsx(
+      TabList,
+      {
+        vertical: true,
+        size: "large",
+        selectedValue: selected,
+        onTabSelect,
+        className: style$5["viewer-tabs"],
+        children: viewerList.map((viewer2) => {
+          return /* @__PURE__ */ jsx(Tab, { value: viewer2.key, className: style$5["viewer-tab"], children: /* @__PURE__ */ jsx("span", { title: viewer2.label, children: viewer2.icon }) }, viewer2.key);
+        })
+      }
+    ) })
+  ] });
+};
 
-var style$3 = {"list":"diagnostic-list-module_list__6tVpz","item":"diagnostic-list-module_item__BE8Fr","item--error":"diagnostic-list-module_item--error__tnhWA","item--warning":"diagnostic-list-module_item--warning__J7vIN","item-code":"diagnostic-list-module_item-code__AgVjZ","item-loc":"diagnostic-list-module_item-loc__IeYnW"};
+const layout = "_layout_l03ni_1";
+const style$4 = {
+	layout: layout,
+	"edit-pane": "_edit-pane_l03ni_9"
+};
 
-const DiagnosticList = ({ diagnostics, onDiagnosticSelected, }) => {
-    if (diagnostics.length === 0) {
-        return jsx("div", { className: style$3["list"], children: "No errors" });
-    }
-    const handleItemSelected = useCallback((diagnostic) => {
-        onDiagnosticSelected === null || onDiagnosticSelected === void 0 ? void 0 : onDiagnosticSelected(diagnostic);
-    }, [onDiagnosticSelected]);
-    return (jsx("div", { className: style$3["list"], children: diagnostics.map((x, i) => {
-            return jsx(DiagnosticItem, { diagnostic: x, onItemSelected: handleItemSelected }, i);
-        }) }));
+const list = "_list_wrnwm_1";
+const item = "_item_wrnwm_4";
+const style$3 = {
+	list: list,
+	item: item,
+	"item--error": "_item--error_wrnwm_15",
+	"item--warning": "_item--warning_wrnwm_19",
+	"item-code": "_item-code_wrnwm_23",
+	"item-loc": "_item-loc_wrnwm_27"
+};
+
+const DiagnosticList = ({
+  diagnostics,
+  onDiagnosticSelected
+}) => {
+  if (diagnostics.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: style$3["list"], children: "No errors" });
+  }
+  const handleItemSelected = useCallback(
+    (diagnostic) => {
+      onDiagnosticSelected?.(diagnostic);
+    },
+    [onDiagnosticSelected]
+  );
+  return /* @__PURE__ */ jsx("div", { className: style$3["list"], children: diagnostics.map((x, i) => {
+    return /* @__PURE__ */ jsx(DiagnosticItem, { diagnostic: x, onItemSelected: handleItemSelected }, i);
+  }) });
 };
 const DiagnosticItem = ({ diagnostic, onItemSelected }) => {
-    const handleClick = useCallback(() => {
-        onItemSelected(diagnostic);
-    }, [diagnostic, onItemSelected]);
-    return (jsxs("div", { tabIndex: 0, className: style$3["item"], onClick: handleClick, children: [jsx("div", { className: mergeClasses((style$3["item-severity"],
-                    style$3[diagnostic.severity === "error" ? "item--error" : "item--warning"])), children: diagnostic.severity }), jsx("div", { className: style$3["item-code"], children: diagnostic.code }), jsx("div", { className: style$3["item-message"], children: diagnostic.message }), jsx("div", { className: style$3["item-loc"], children: jsx(DiagnosticTargetLink, { target: diagnostic.target }) })] }));
+  const handleClick = useCallback(() => {
+    onItemSelected(diagnostic);
+  }, [diagnostic, onItemSelected]);
+  return /* @__PURE__ */ jsxs("div", { tabIndex: 0, className: style$3["item"], onClick: handleClick, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: mergeClasses(
+          (style$3[diagnostic.severity === "error" ? "item--error" : "item--warning"])
+        ),
+        children: diagnostic.severity
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: style$3["item-code"], children: diagnostic.code }),
+    /* @__PURE__ */ jsx("div", { className: style$3["item-message"], children: diagnostic.message }),
+    /* @__PURE__ */ jsx("div", { className: style$3["item-loc"], children: /* @__PURE__ */ jsx(DiagnosticTargetLink, { target: diagnostic.target }) })
+  ] });
 };
 const DiagnosticTargetLink = memo(({ target }) => {
-    if (typeof target === "symbol") {
-        return jsx("span", {});
-    }
-    const location = getSourceLocation(target);
-    const file = location.file.path === "/test/main.tsp" ? "" : `${location.file.path}:`;
-    const { line, character } = location.file.getLineAndCharacterOfPosition(location.pos);
-    return (jsxs("span", { children: [file, line + 1, ":", character + 1] }));
+  if (typeof target === "symbol") {
+    return /* @__PURE__ */ jsx("span", {});
+  }
+  const location = getSourceLocation(target);
+  const file = location.file.path === "/test/main.tsp" ? "" : `${location.file.path}:`;
+  const { line, character } = location.file.getLineAndCharacterOfPosition(location.pos);
+  return /* @__PURE__ */ jsxs("span", { children: [
+    file,
+    line + 1,
+    ":",
+    character + 1
+  ] });
 });
 
-var style$2 = {"header":"header-module_header__LyUNg","header--error":"header-module_header--error__8MKzf","error-icon":"header-module_error-icon__gb-oB","header--warning":"header-module_header--warning__QPFEE","warning-icon":"header-module_warning-icon__u14P3","header-content":"header-module_header-content__Uc4HJ","header-chevron":"header-module_header-chevron__HXm6b","header-chevron--collapsed":"header-module_header-chevron--collapsed__wKyHV"};
+const header = "_header_1qhql_1";
+const style$2 = {
+	header: header,
+	"header--error": "_header--error_1qhql_12",
+	"error-icon": "_error-icon_1qhql_17",
+	"header--warning": "_header--warning_1qhql_21",
+	"warning-icon": "_warning-icon_1qhql_26",
+	"header-content": "_header-content_1qhql_30",
+	"header-chevron": "_header-chevron_1qhql_36",
+	"header-chevron--collapsed": "_header-chevron--collapsed_1qhql_39"
+};
 
 const ProblemPaneHeader = memo(({ compilationState, ...props }) => {
-    const noProblem = (jsx(Container, { status: "none", ...props, children: "No problems" }));
-    if (compilationState === undefined) {
-        return noProblem;
-    }
-    if ("internalCompilerError" in compilationState) {
-        return (jsxs(Container, { status: "error", ...props, children: [jsx(ErrorCircle16Filled, {}), " Internal Compiler Error"] }));
-    }
-    const diagnostics = compilationState.program.diagnostics;
-    if (diagnostics.length === 0) {
-        return noProblem;
-    }
-    const errors = diagnostics.filter((x) => x.severity === "error");
-    const warnings = diagnostics.filter((x) => x.severity === "warning");
-    return (jsxs(Container, { status: errors.length > 0 ? "error" : "warning", ...props, children: [errors.length > 0 ? (jsxs(Fragment, { children: [jsx(ErrorCircle16Filled, { className: style$2["error-icon"] }), " ", errors.length, " errors"] })) : null, warnings.length > 0 ? (jsxs(Fragment, { children: [jsx(Warning16Filled, { className: style$2["warning-icon"] }), " ", warnings.length, " warnings"] })) : null] }));
+  const noProblem = /* @__PURE__ */ jsx(Container, { status: "none", ...props, children: "No problems" });
+  if (compilationState === void 0) {
+    return noProblem;
+  }
+  if ("internalCompilerError" in compilationState) {
+    return /* @__PURE__ */ jsxs(Container, { status: "error", ...props, children: [
+      /* @__PURE__ */ jsx(ErrorCircle16Filled, {}),
+      " Internal Compiler Error"
+    ] });
+  }
+  const diagnostics = compilationState.program.diagnostics;
+  if (diagnostics.length === 0) {
+    return noProblem;
+  }
+  const errors = diagnostics.filter((x) => x.severity === "error");
+  const warnings = diagnostics.filter((x) => x.severity === "warning");
+  return /* @__PURE__ */ jsxs(Container, { status: errors.length > 0 ? "error" : "warning", ...props, children: [
+    errors.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ErrorCircle16Filled, { className: style$2["error-icon"] }),
+      " ",
+      errors.length,
+      " errors"
+    ] }) : null,
+    warnings.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Warning16Filled, { className: style$2["warning-icon"] }),
+      " ",
+      warnings.length,
+      " warnings"
+    ] }) : null
+  ] });
 });
 const Container = ({ children, className, status, onClick, collaped }) => {
-    return (jsxs("div", { tabIndex: onClick === undefined ? undefined : 0, className: mergeClasses(style$2["header"], status === "error" && style$2["header--error"], status === "warning" && style$2["header--warning"], className), onClick: onClick, children: [jsx("div", { className: style$2["header-content"], children: children }), jsx(ChevronDown16Regular, { className: mergeClasses(style$2["header-chevron"], collaped && style$2["header-chevron--collapsed"]) })] }));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      tabIndex: onClick === void 0 ? void 0 : 0,
+      className: mergeClasses(
+        style$2["header"],
+        status === "error" && style$2["header--error"],
+        status === "warning" && style$2["header--warning"],
+        className
+      ),
+      onClick,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: style$2["header-content"], children }),
+        /* @__PURE__ */ jsx(
+          ChevronDown16Regular,
+          {
+            className: mergeClasses(
+              style$2["header-chevron"],
+              collaped && style$2["header-chevron--collapsed"]
+            )
+          }
+        )
+      ]
+    }
+  );
 };
 
-var style$1 = {"problem-pane":"problem-pane-module_problem-pane__GJKF4","problem-content":"problem-pane-module_problem-content__rYzbh","no-problems":"problem-pane-module_no-problems__Ub8R-","internal-compiler-error":"problem-pane-module_internal-compiler-error__laE4f"};
+const style$1 = {
+	"problem-pane": "_problem-pane_kxgwp_1",
+	"problem-content": "_problem-content_kxgwp_9",
+	"no-problems": "_no-problems_kxgwp_12",
+	"internal-compiler-error": "_internal-compiler-error_kxgwp_16"
+};
 
-const ProblemPane = ({ collapsed, compilationState, onHeaderClick, onDiagnosticSelected, }) => {
-    return (jsxs("div", { className: style$1["problem-pane"], children: [jsx(ProblemPaneHeader, { compilationState: compilationState, onClick: onHeaderClick, collaped: collapsed }), jsx("div", { className: style$1["problem-content"], children: jsx(ProblemPaneContent, { compilationState: compilationState, onDiagnosticSelected: onDiagnosticSelected }) })] }));
+const ProblemPane = ({
+  collapsed,
+  compilationState,
+  onHeaderClick,
+  onDiagnosticSelected
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: style$1["problem-pane"], children: [
+    /* @__PURE__ */ jsx(
+      ProblemPaneHeader,
+      {
+        compilationState,
+        onClick: onHeaderClick,
+        collaped: collapsed
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: style$1["problem-content"], "aria-hidden": collapsed, children: /* @__PURE__ */ jsx(
+      ProblemPaneContent,
+      {
+        compilationState,
+        onDiagnosticSelected
+      }
+    ) })
+  ] });
 };
-const ProblemPaneContent = ({ compilationState, onDiagnosticSelected, }) => {
-    if (compilationState === undefined) {
-        return jsx(Fragment, {});
-    }
-    if ("internalCompilerError" in compilationState) {
-        return (jsx("pre", { className: style$1["internal-compiler-error"], children: String(compilationState.internalCompilerError) }));
-    }
-    const diagnostics = compilationState.program.diagnostics;
-    return diagnostics.length === 0 ? (jsx("div", { className: style$1["no-problems"], children: " No problems" })) : (jsx(DiagnosticList, { diagnostics: diagnostics, onDiagnosticSelected: onDiagnosticSelected }));
+const ProblemPaneContent = ({
+  compilationState,
+  onDiagnosticSelected
+}) => {
+  if (compilationState === void 0) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
+  if ("internalCompilerError" in compilationState) {
+    return /* @__PURE__ */ jsx("pre", { className: style$1["internal-compiler-error"], children: String(compilationState.internalCompilerError) });
+  }
+  const diagnostics = compilationState.program.diagnostics;
+  return diagnostics.length === 0 ? /* @__PURE__ */ jsx("div", { className: style$1["no-problems"], children: " No problems" }) : /* @__PURE__ */ jsx(DiagnosticList, { diagnostics, onDiagnosticSelected });
 };
 
-function Pane({ children, ...props }) {
-    return jsx("div", { ...props, children: children });
+function Pane({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { ...props, children });
 }
 
-var style = {"split-pane":"split-pane-module_split-pane__XCqR8","split-disabled":"split-pane-module_split-disabled__fZ0Sg","split-pane-dragging":"split-pane-module_split-pane-dragging__mQJnZ","react-split-vertical":"split-pane-module_react-split-vertical__WTUQ1","react-split-horizontal":"split-pane-module_react-split-horizontal__Fpls-","sash":"split-pane-module_sash__hNWH6","sash-disabled":"split-pane-module_sash-disabled__z6uCV","sash-vertical":"split-pane-module_sash-vertical__S8HbH","sash-horizontal":"split-pane-module_sash-horizontal__BTUaN","sash-content":"split-pane-module_sash-content__DLAt4","sash-content-dragging":"split-pane-module_sash-content-dragging__NkKQP","pane":"split-pane-module_pane__m1zQB"};
+const sash = "_sash_v2eo6_20";
+const pane = "_pane_v2eo6_70";
+const style = {
+	"split-pane": "_split-pane_v2eo6_1",
+	"split-disabled": "_split-disabled_v2eo6_8",
+	"split-pane-dragging": "_split-pane-dragging_v2eo6_12",
+	"react-split-vertical": "_react-split-vertical_v2eo6_12",
+	"react-split-horizontal": "_react-split-horizontal_v2eo6_16",
+	sash: sash,
+	"sash-disabled": "_sash-disabled_v2eo6_29",
+	"sash-vertical": "_sash-vertical_v2eo6_33",
+	"sash-horizontal": "_sash-horizontal_v2eo6_37",
+	"sash-content": "_sash-content_v2eo6_41",
+	"sash-content-dragging": "_sash-content-dragging_v2eo6_47",
+	pane: pane
+};
+
+const SashContent = ({
+  className,
+  children,
+  dragging,
+  ...others
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: mergeClasses(
+        style["sash-content"],
+        dragging && style["sash-content-dragging"],
+        className
+      ),
+      ...others,
+      children
+    }
+  );
+};
 
-const SashContent = ({ className, children, dragging, ...others }) => {
-    return (jsx("div", { className: mergeClasses(style["sash-content"], dragging && style["sash-content-dragging"], className), ...others, children: children }));
+const Sash = ({
+  className,
+  render,
+  onDragStart,
+  onDragging,
+  onDragEnd,
+  onReset,
+  ...others
+}) => {
+  const [draging, setDrag] = useState(false);
+  const handleMouseMove = (e) => {
+    onDragging(e);
+  };
+  const handleMouseUp = (e) => {
+    setDrag(false);
+    onDragEnd(e);
+    window.removeEventListener("mousemove", handleMouseMove);
+    window.removeEventListener("mouseup", handleMouseUp);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: mergeClasses(style["sash"], className),
+      onMouseDown: (e) => {
+        setDrag(true);
+        onDragStart(e);
+        window.addEventListener("mousemove", handleMouseMove);
+        window.addEventListener("mouseup", handleMouseUp);
+      },
+      onDoubleClick: onReset,
+      ...others,
+      children: render(draging)
+    }
+  );
 };
 
-const Sash = ({ className, render, onDragStart, onDragging, onDragEnd, onReset, ...others }) => {
-    const [draging, setDrag] = useState(false);
-    const handleMouseMove = (e) => {
-        onDragging(e);
-    };
-    const handleMouseUp = (e) => {
-        setDrag(false);
-        onDragEnd(e);
-        window.removeEventListener("mousemove", handleMouseMove);
-        window.removeEventListener("mouseup", handleMouseUp);
+const SplitPane = ({
+  children,
+  sizes: propSizes,
+  initialSizes: defaultSizes,
+  allowResize = true,
+  split = "vertical",
+  className: wrapClassName,
+  sashRender = (_, active) => /* @__PURE__ */ jsx(SashContent, { dragging: active }),
+  resizerSize = 4,
+  performanceMode = false,
+  onChange = () => null,
+  onDragStart = () => null,
+  onDragEnd = () => null,
+  ...others
+}) => {
+  const [resolvedPropSize, updateSizes] = useControllableValue(
+    propSizes,
+    defaultSizes,
+    onChange
+  );
+  const axis = useRef({ x: 0, y: 0 });
+  const wrapper = useRef(null);
+  const cacheSizes = useRef({ sizes: [], sashPosSizes: [] });
+  const [wrapperRect, setWrapperRect] = useState({});
+  const [isDragging, setDragging] = useState(false);
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      setWrapperRect(wrapper?.current?.getBoundingClientRect() ?? {});
+    });
+    resizeObserver.observe(wrapper.current);
+    return () => {
+      resizeObserver.disconnect();
     };
-    return (jsx("div", { className: mergeClasses(style["sash"], className), onMouseDown: (e) => {
-            setDrag(true);
-            onDragStart(e);
-            window.addEventListener("mousemove", handleMouseMove);
-            window.addEventListener("mouseup", handleMouseUp);
-        }, onDoubleClick: onReset, ...others, children: render(draging) }));
-};
-
-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);
-    const cacheSizes = useRef({ sizes: [], sashPosSizes: [] });
-    const [wrapperRect, setWrapperRect] = useState({});
-    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 : {});
+  }, []);
+  const { sizeName, splitPos, splitAxis } = useMemo(
+    () => ({
+      sizeName: split === "vertical" ? "width" : "height",
+      splitPos: split === "vertical" ? "left" : "top",
+      splitAxis: split === "vertical" ? "x" : "y"
+    }),
+    [split]
+  );
+  const wrapSize = wrapperRect[sizeName] ?? 0;
+  const paneLimitSizes = useMemo(
+    () => children.map((childNode) => {
+      const limits = [0, Infinity];
+      if (childNode?.type === Pane) {
+        const { minSize, maxSize } = childNode.props;
+        limits[0] = assertsSize(minSize, wrapSize, 0);
+        limits[1] = assertsSize(maxSize, wrapSize);
+      }
+      return limits;
+    }),
+    [children, wrapSize]
+  );
+  const sizes = useMemo(
+    function() {
+      let count = 0;
+      let curSum = 0;
+      const res = children.map((_, index) => {
+        const size = assertsSize(resolvedPropSize[index], wrapSize);
+        size === Infinity ? count++ : curSum += size;
+        return size;
+      });
+      if (curSum > wrapSize || !count && curSum < wrapSize) {
+        const cacheNum = (curSum - wrapSize) / curSum;
+        return res.map((size) => {
+          return size === Infinity ? 0 : size - size * cacheNum;
         });
-        resizeObserver.observe(wrapper.current);
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, []);
-    const { sizeName, splitPos, splitAxis } = useMemo(() => ({
-        sizeName: split === "vertical" ? "width" : "height",
-        splitPos: split === "vertical" ? "left" : "top",
-        splitAxis: split === "vertical" ? "x" : "y",
-    }), [split]);
-    const wrapSize = (_a = wrapperRect[sizeName]) !== null && _a !== void 0 ? _a : 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) {
-            const { minSize, maxSize } = childNode.props;
-            limits[0] = assertsSize(minSize, wrapSize, 0);
-            limits[1] = assertsSize(maxSize, wrapSize);
-        }
-        return limits;
-    }), [children, wrapSize]);
-    const sizes = useMemo(function () {
-        let count = 0;
-        let curSum = 0;
-        const res = children.map((_, index) => {
-            const size = assertsSize(resolvedPropSize[index], wrapSize);
-            size === Infinity ? count++ : (curSum += size);
-            return size;
+      }
+      if (count > 0) {
+        const average = (wrapSize - curSum) / count;
+        return res.map((size) => {
+          return size === Infinity ? average : size;
         });
-        // resize or illegal size input,recalculate pane sizes
-        if (curSum > wrapSize || (!count && curSum < wrapSize)) {
-            const cacheNum = (curSum - wrapSize) / curSum;
-            return res.map((size) => {
-                return size === Infinity ? 0 : size - size * cacheNum;
-            });
-        }
-        if (count > 0) {
-            const average = (wrapSize - curSum) / count;
-            return res.map((size) => {
-                return size === Infinity ? average : size;
-            });
-        }
-        return res;
-    }, [...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"]);
-        axis.current = { x: e.pageX, y: e.pageY };
-        cacheSizes.current = { sizes, sashPosSizes };
-        setDragging(true);
-        onDragStart(e);
-    }, [onDragStart, sizes, sashPosSizes]);
-    const resetPosition = useCallback(() => {
-        if (defaultSizes) {
-            updateSizes(defaultSizes);
-        }
-    }, [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"]);
-        axis.current = { x: e.pageX, y: e.pageY };
-        cacheSizes.current = { sizes, sashPosSizes };
-        setDragging(false);
-        onDragEnd(e);
-    }, [onDragEnd, sizes, sashPosSizes]);
-    const onDragging = useCallback(function (e, i) {
-        const curAxis = { x: e.pageX, y: e.pageY };
-        let distanceX = curAxis[splitAxis] - axis.current[splitAxis];
-        const leftBorder = -Math.min(sizes[i] - paneLimitSizes[i][0], paneLimitSizes[i + 1][1] - sizes[i + 1]);
-        const rightBorder = Math.min(sizes[i + 1] - paneLimitSizes[i + 1][0], paneLimitSizes[i][1] - sizes[i]);
-        if (distanceX < leftBorder) {
-            distanceX = leftBorder;
-        }
-        if (distanceX > rightBorder) {
-            distanceX = rightBorder;
-        }
-        const nextSizes = [...sizes];
-        nextSizes[i] += distanceX;
-        nextSizes[i + 1] -= distanceX;
-        updateSizes(nextSizes);
-    }, [paneLimitSizes, onChange]);
-    const paneFollow = !(performanceMode && isDragging);
-    const paneSizes = paneFollow ? sizes : cacheSizes.current.sizes;
-    const panePoses = paneFollow ? sashPosSizes : cacheSizes.current.sashPosSizes;
-    return (jsxs("div", { className: mergeClasses(style["split-pane"], split === "vertical" && style["split-pane-vertical"], split === "horizontal" && style["split-pane-horizontal"], isDragging && style["split-pane-dragging"], wrapClassName), ref: wrapper, ...others, children: [children.map((childNode, childIndex) => {
-                const isPane = childNode.type === Pane;
-                const paneProps = isPane ? childNode.props : {};
-                return (jsx(Pane, { className: mergeClasses(style["pane"], paneProps.className), style: {
-                        ...paneProps.style,
-                        [sizeName]: paneSizes[childIndex],
-                        [splitPos]: panePoses[childIndex],
-                    }, children: isPane ? paneProps.children : childNode }, childIndex));
-            }), sashPosSizes.slice(1, -1).map((posSize, index) => (jsx(Sash, { className: mergeClasses(!allowResize && style["sash-disabled"], split === "vertical" ? style["sash-vertical"] : style["sash-horizontal"]), style: {
-                    [sizeName]: resizerSize,
-                    [splitPos]: posSize - resizerSize / 2,
-                }, render: sashRender.bind(null, index), onReset: resetPosition, onDragStart: dragStart, onDragging: (e) => onDragging(e, index), onDragEnd: dragEnd }, index)))] }));
-};
-/**
- * Convert size to absolute number or Infinity
- * SplitPane allows sizes in string and number, but the state sizes only support number,
- * so convert string and number to number in here
- * 'auto' -> divide the remaining space equally
- * 'xxx px' -> xxx
- * 'xxx%' -> wrapper.size * xxx/100
- *  xxx -> xxx
- */
+      }
+      return res;
+    },
+    [...resolvedPropSize, children.length, wrapSize]
+  );
+  const sashPosSizes = useMemo(
+    () => sizes.reduce((a, b) => [...a, a[a.length - 1] + b], [0]),
+    [...sizes]
+  );
+  const dragStart = useCallback(
+    (e) => {
+      document?.body?.classList?.add(style["split-disabled"]);
+      axis.current = { x: e.pageX, y: e.pageY };
+      cacheSizes.current = { sizes, sashPosSizes };
+      setDragging(true);
+      onDragStart(e);
+    },
+    [onDragStart, sizes, sashPosSizes]
+  );
+  const resetPosition = useCallback(() => {
+    if (defaultSizes) {
+      updateSizes(defaultSizes);
+    }
+  }, [defaultSizes, updateSizes]);
+  const dragEnd = useCallback(
+    (e) => {
+      document?.body?.classList?.remove(style["split-disabled"]);
+      axis.current = { x: e.pageX, y: e.pageY };
+      cacheSizes.current = { sizes, sashPosSizes };
+      setDragging(false);
+      onDragEnd(e);
+    },
+    [onDragEnd, sizes, sashPosSizes]
+  );
+  const onDragging = useCallback(
+    function(e, i) {
+      const curAxis = { x: e.pageX, y: e.pageY };
+      let distanceX = curAxis[splitAxis] - axis.current[splitAxis];
+      const leftBorder = -Math.min(
+        sizes[i] - paneLimitSizes[i][0],
+        paneLimitSizes[i + 1][1] - sizes[i + 1]
+      );
+      const rightBorder = Math.min(
+        sizes[i + 1] - paneLimitSizes[i + 1][0],
+        paneLimitSizes[i][1] - sizes[i]
+      );
+      if (distanceX < leftBorder) {
+        distanceX = leftBorder;
+      }
+      if (distanceX > rightBorder) {
+        distanceX = rightBorder;
+      }
+      const nextSizes = [...sizes];
+      nextSizes[i] += distanceX;
+      nextSizes[i + 1] -= distanceX;
+      updateSizes(nextSizes);
+    },
+    [paneLimitSizes, onChange]
+  );
+  const paneFollow = !(performanceMode && isDragging);
+  const paneSizes = paneFollow ? sizes : cacheSizes.current.sizes;
+  const panePoses = paneFollow ? sashPosSizes : cacheSizes.current.sashPosSizes;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: mergeClasses(
+        style["split-pane"],
+        split === "vertical" && style["split-pane-vertical"],
+        split === "horizontal" && style["split-pane-horizontal"],
+        isDragging && style["split-pane-dragging"],
+        wrapClassName
+      ),
+      ref: wrapper,
+      ...others,
+      children: [
+        children.map((childNode, childIndex) => {
+          const isPane = childNode.type === Pane;
+          const paneProps = isPane ? childNode.props : {};
+          return /* @__PURE__ */ jsx(
+            Pane,
+            {
+              className: mergeClasses(style["pane"], paneProps.className),
+              style: {
+                ...paneProps.style,
+                [sizeName]: paneSizes[childIndex],
+                [splitPos]: panePoses[childIndex]
+              },
+              children: isPane ? paneProps.children : childNode
+            },
+            childIndex
+          );
+        }),
+        sashPosSizes.slice(1, -1).map((posSize, index) => /* @__PURE__ */ jsx(
+          Sash,
+          {
+            className: mergeClasses(
+              !allowResize && style["sash-disabled"],
+              split === "vertical" ? style["sash-vertical"] : style["sash-horizontal"]
+            ),
+            style: {
+              [sizeName]: resizerSize,
+              [splitPos]: posSize - resizerSize / 2
+            },
+            render: sashRender.bind(null, index),
+            onReset: resetPosition,
+            onDragStart: dragStart,
+            onDragging: (e) => onDragging(e, index),
+            onDragEnd: dragEnd
+          },
+          index
+        ))
+      ]
+    }
+  );
+};
 function assertsSize(size, sum, defaultValue = Infinity) {
-    if (typeof size === "undefined")
-        return defaultValue;
-    if (typeof size === "number")
-        return size;
-    if (size.endsWith("%"))
-        return sum * (+size.replace("%", "") / 100);
-    if (size.endsWith("px"))
-        return +size.replace("px", "");
+  if (typeof size === "undefined")
     return defaultValue;
+  if (typeof size === "number")
+    return size;
+  if (size.endsWith("%"))
+    return sum * (+size.replace("%", "") / 100);
+  if (size.endsWith("px"))
+    return +size.replace("px", "");
+  return defaultValue;
 }
 
 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 [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));
-    }, [content, selectedSampleName, props.samples]);
-    const typespecModel = useMonacoModel("inmemory://test/main.tsp", "typespec");
-    const [compilationState, setCompilationState] = useState(undefined);
-    const doCompile = useCallback(async () => {
-        const content = typespecModel.getValue();
-        setContent(content);
-        const typespecCompiler = host.compiler;
-        const state = await compile(host, content, selectedEmitter, compilerOptions);
-        setCompilationState(state);
-        if ("program" in state) {
-            const markers = state.program.diagnostics.map((diag) => ({
-                ...getMonacoRange(typespecCompiler, diag.target),
-                message: diag.message,
-                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 : []);
-        }
-        else {
-            editor.setModelMarkers(typespecModel, "owner", []);
+  const { host, onSave } = props;
+  const editorRef = useRef(void 0);
+  const [selectedEmitter, onSelectedEmitterChange] = useControllableValue(
+    props.emitter,
+    props.defaultEmitter,
+    props.onEmitterChange
+  );
+  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(() => {
+    return Boolean(selectedSampleName && content === props.samples?.[selectedSampleName]?.content);
+  }, [content, selectedSampleName, props.samples]);
+  const typespecModel = useMonacoModel("inmemory://test/main.tsp", "typespec");
+  const [compilationState, setCompilationState] = useState(void 0);
+  const doCompile = useCallback(async () => {
+    const content2 = typespecModel.getValue();
+    setContent(content2);
+    const typespecCompiler = host.compiler;
+    const state = await compile(host, content2, selectedEmitter, compilerOptions);
+    setCompilationState(state);
+    if ("program" in state) {
+      const markers = state.program.diagnostics.map((diag) => ({
+        ...getMonacoRange(typespecCompiler, diag.target),
+        message: diag.message,
+        severity: diag.severity === "error" ? MarkerSeverity.Error : MarkerSeverity.Warning,
+        tags: diag.code === "deprecated" ? [CompletionItemTag.Deprecated] : void 0
+      }));
+      editor.setModelMarkers(typespecModel, "owner", markers ?? []);
+    } else {
+      editor.setModelMarkers(typespecModel, "owner", []);
+    }
+  }, [host, selectedEmitter, compilerOptions, typespecModel, setContent]);
+  const updateTypeSpec = useCallback(
+    (value) => {
+      if (typespecModel.getValue() !== value) {
+        typespecModel.setValue(value);
+      }
+    },
+    [typespecModel]
+  );
+  useEffect(() => {
+    updateTypeSpec(props.defaultContent ?? "");
+  }, []);
+  useEffect(() => {
+    if (selectedSampleName && props.samples) {
+      const config = props.samples[selectedSampleName];
+      if (config.content) {
+        updateTypeSpec(config.content);
+        if (config.preferredEmitter) {
+          onSelectedEmitterChange(config.preferredEmitter);
         }
-    }, [host, selectedEmitter, compilerOptions, typespecModel, setContent]);
-    const updateTypeSpec = useCallback((value) => {
-        if (typespecModel.getValue() !== value) {
-            typespecModel.setValue(value);
+        if (config.compilerOptions) {
+          onCompilerOptionsChange(config.compilerOptions);
         }
-    }, [typespecModel]);
-    useEffect(() => {
-        var _a;
-        updateTypeSpec((_a = props.defaultContent) !== null && _a !== void 0 ? _a : "");
-    }, []);
-    useEffect(() => {
-        if (selectedSampleName && props.samples) {
-            const config = props.samples[selectedSampleName];
-            if (config.content) {
-                updateTypeSpec(config.content);
-                if (config.preferredEmitter) {
-                    onSelectedEmitterChange(config.preferredEmitter);
-                }
-                if (config.compilerOptions) {
-                    onCompilerOptionsChange(config.compilerOptions);
-                }
+      }
+    }
+  }, [updateTypeSpec, selectedSampleName]);
+  useEffect(() => {
+    const debouncer = debounce(() => doCompile(), 200);
+    const disposable = typespecModel.onDidChangeContent(debouncer);
+    return () => {
+      debouncer.clear();
+      disposable.dispose();
+    };
+  }, [typespecModel, doCompile]);
+  useEffect(() => {
+    void doCompile();
+  }, [doCompile]);
+  const saveCode = useCallback(() => {
+    if (onSave) {
+      onSave({
+        content: typespecModel.getValue(),
+        emitter: selectedEmitter,
+        options: compilerOptions,
+        sampleName: isSampleUntouched ? selectedSampleName : void 0
+      });
+    }
+  }, [
+    typespecModel,
+    onSave,
+    selectedEmitter,
+    compilerOptions,
+    selectedSampleName,
+    isSampleUntouched
+  ]);
+  const formatCode = useCallback(() => {
+    void editorRef.current?.getAction("editor.action.formatDocument")?.run();
+  }, [typespecModel]);
+  const fileBug = useCallback(async () => {
+    if (props.onFileBug) {
+      saveCode();
+      props.onFileBug();
+    }
+  }, [saveCode, typespecModel, props.onFileBug]);
+  const typespecEditorActions = useMemo(
+    () => [
+      // ctrl/cmd+S => save
+      { id: "save", label: "Save", keybindings: [KeyMod.CtrlCmd | KeyCode.KeyS], run: saveCode }
+    ],
+    [saveCode]
+  );
+  const onTypeSpecEditorMount = useCallback(({ editor: editor2 }) => {
+    editorRef.current = editor2;
+  }, []);
+  const [verticalPaneSizes, setVerticalPaneSizes] = useState(
+    verticalPaneSizesConst.collapsed
+  );
+  const toggleProblemPane = useCallback(() => {
+    setVerticalPaneSizes((value) => {
+      return value === verticalPaneSizesConst.collapsed ? verticalPaneSizesConst.expanded : verticalPaneSizesConst.collapsed;
+    });
+  }, [setVerticalPaneSizes]);
+  const onVerticalPaneSizeChange = useCallback(
+    (sizes) => {
+      setVerticalPaneSizes(sizes);
+    },
+    [setVerticalPaneSizes]
+  );
+  const handleDiagnosticSelected = useCallback(
+    (diagnostic) => {
+      editorRef.current?.setSelection(getMonacoRange(host.compiler, diagnostic.target));
+    },
+    [setVerticalPaneSizes]
+  );
+  return /* @__PURE__ */ jsx(PlaygroundContextProvider, { value: { host }, children: /* @__PURE__ */ jsxs("div", { className: style$4["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$4["edit-pane"], children: [
+          /* @__PURE__ */ jsx(
+            EditorCommandBar,
+            {
+              host,
+              selectedEmitter,
+              onSelectedEmitterChange,
+              compilerOptions,
+              onCompilerOptionsChange,
+              samples: props.samples,
+              selectedSampleName,
+              onSelectedSampleNameChange,
+              saveCode,
+              formatCode,
+              fileBug: props.onFileBug ? fileBug : void 0,
+              documentationUrl: props.links?.documentationUrl
             }
+          ),
+          /* @__PURE__ */ jsx(
+            TypeSpecEditor,
+            {
+              model: typespecModel,
+              actions: typespecEditorActions,
+              options: props.editorOptions,
+              onMount: onTypeSpecEditorMount
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Pane, { children: /* @__PURE__ */ jsx(
+          OutputView,
+          {
+            compilationState,
+            editorOptions: props.editorOptions,
+            viewers: props.viewers,
+            fileViewers: props.emitterViewers?.[selectedEmitter]
+          }
+        ) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Pane, { minSize: 30, children: /* @__PURE__ */ jsx(
+        ProblemPane,
+        {
+          collapsed: verticalPaneSizes[1] === verticalPaneSizesConst.collapsed[1],
+          compilationState,
+          onHeaderClick: toggleProblemPane,
+          onDiagnosticSelected: handleDiagnosticSelected
         }
-    }, [updateTypeSpec, selectedSampleName]);
-    useEffect(() => {
-        const debouncer = debounce(() => doCompile(), 200);
-        const disposable = typespecModel.onDidChangeContent(debouncer);
-        return () => {
-            debouncer.clear();
-            disposable.dispose();
-        };
-    }, [typespecModel, doCompile]);
-    useEffect(() => {
-        void doCompile();
-    }, [doCompile]);
-    const saveCode = useCallback(() => {
-        if (onSave) {
-            onSave({
-                content: typespecModel.getValue(),
-                emitter: selectedEmitter,
-                options: compilerOptions,
-                sampleName: isSampleUntouched ? selectedSampleName : undefined,
-            });
-        }
-    }, [
-        typespecModel,
-        onSave,
-        selectedEmitter,
-        compilerOptions,
-        selectedSampleName,
-        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());
-    }, [typespecModel]);
-    const fileBug = useCallback(async () => {
-        if (props.onFileBug) {
-            saveCode();
-            props.onFileBug();
-        }
-    }, [saveCode, typespecModel, props.onFileBug]);
-    const typespecEditorActions = useMemo(() => [
-        // ctrl/cmd+S => save
-        { id: "save", label: "Save", keybindings: [KeyMod.CtrlCmd | KeyCode.KeyS], run: saveCode },
-    ], [saveCode]);
-    const onTypeSpecEditorMount = useCallback(({ editor }) => {
-        editorRef.current = editor;
-    }, []);
-    const [verticalPaneSizes, setVerticalPaneSizes] = useState(verticalPaneSizesConst.collapsed);
-    const toggleProblemPane = useCallback(() => {
-        setVerticalPaneSizes((value) => {
-            return value === verticalPaneSizesConst.collapsed
-                ? verticalPaneSizesConst.expanded
-                : verticalPaneSizesConst.collapsed;
-        });
-    }, [setVerticalPaneSizes]);
-    const onVerticalPaneSizeChange = useCallback((sizes) => {
-        setVerticalPaneSizes(sizes);
-    }, [setVerticalPaneSizes]);
-    const handleDiagnosticSelected = useCallback((diagnostic) => {
-        var _a;
-        (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.setSelection(getMonacoRange(host.compiler, diagnostic.target));
-    }, [setVerticalPaneSizes]);
-    return (jsx(PlaygroundContextProvider, { value: { host }, children: jsxs("div", { className: style$4["layout"], children: [jsxs(SplitPane, { sizes: verticalPaneSizes, onChange: onVerticalPaneSizeChange, split: "horizontal", children: [jsx(Pane, { children: jsxs(SplitPane, { initialSizes: ["50%", "50%"], children: [jsxs(Pane, { children: [jsx(EditorCommandBar, { host: host, selectedEmitter: selectedEmitter, onSelectedEmitterChange: onSelectedEmitterChange, compilerOptions: compilerOptions, onCompilerOptionsChange: onCompilerOptionsChange, samples: props.samples, selectedSampleName: selectedSampleName, onSelectedSampleNameChange: onSelectedSampleNameChange, saveCode: saveCode, formatCode: formatCode, 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, {})] }) }));
+      ) })
+    ] }),
+    props.footer ?? /* @__PURE__ */ jsx(DefaultFooter, {})
+  ] }) });
 };
 const verticalPaneSizesConst = {
-    collapsed: [undefined, 30],
-    expanded: [undefined, 200],
+  collapsed: [void 0, 30],
+  expanded: [void 0, 200]
 };
 const outputDir = "./tsp-output";
 async function compile(host, content, selectedEmitter, options) {
-    var _a;
-    await host.writeFile("main.tsp", content);
-    await emptyOutputDir(host);
-    try {
-        const typespecCompiler = host.compiler;
-        const program = await typespecCompiler.compile(host, "main.tsp", {
-            ...options,
-            options: {
-                ...options.options,
-                [selectedEmitter]: {
-                    ...(_a = options.options) === null || _a === void 0 ? void 0 : _a[selectedEmitter],
-                    "emitter-output-dir": "tsp-output",
-                },
-            },
-            outputDir: "tsp-output",
-            emit: [selectedEmitter],
-        });
-        const outputFiles = await findOutputFiles(host);
-        return { program, outputFiles };
-    }
-    catch (error) {
-        // eslint-disable-next-line no-console
-        console.error("Internal compiler error", error);
-        return { internalCompilerError: error };
-    }
+  await host.writeFile("main.tsp", content);
+  await emptyOutputDir(host);
+  try {
+    const typespecCompiler = host.compiler;
+    const program = await typespecCompiler.compile(host, "main.tsp", {
+      ...options,
+      options: {
+        ...options.options,
+        [selectedEmitter]: {
+          ...options.options?.[selectedEmitter],
+          "emitter-output-dir": "tsp-output"
+        }
+      },
+      outputDir: "tsp-output",
+      emit: selectedEmitter ? [selectedEmitter] : []
+    });
+    const outputFiles = await findOutputFiles(host);
+    return { program, outputFiles };
+  } catch (error) {
+    console.error("Internal compiler error", error);
+    return { internalCompilerError: error };
+  }
 }
 async function findOutputFiles(host) {
-    const files = [];
-    async function addFiles(dir) {
-        const items = await host.readDir(outputDir + dir);
-        for (const item of items) {
-            const itemPath = `${dir}/${item}`;
-            if ((await host.stat(outputDir + itemPath)).isDirectory()) {
-                await addFiles(itemPath);
-            }
-            else {
-                files.push(dir === "" ? item : `${dir}/${item}`);
-            }
-        }
+  const files = [];
+  async function addFiles(dir) {
+    const items = await host.readDir(outputDir + dir);
+    for (const item of items) {
+      const itemPath = `${dir}/${item}`;
+      if ((await host.stat(outputDir + itemPath)).isDirectory()) {
+        await addFiles(itemPath);
+      } else {
+        files.push(dir === "" ? item : `${dir}/${item}`);
+      }
     }
-    await addFiles("");
-    return files;
+  }
+  await addFiles("");
+  return files;
 }
 async function emptyOutputDir(host) {
-    // empty output directory
-    const dirs = await host.readDir("./tsp-output");
-    for (const file of dirs) {
-        const path = "./tsp-output/" + file;
-        const uri = Uri.parse(host.pathToFileURL(path));
-        const model = editor.getModel(uri);
-        if (model) {
-            model.dispose();
-        }
-        await host.rm(path, { recursive: true });
+  const dirs = await host.readDir("./tsp-output");
+  for (const file of dirs) {
+    const path = "./tsp-output/" + file;
+    const uri = Uri.parse(host.pathToFileURL(path));
+    const model = editor.getModel(uri);
+    if (model) {
+      model.dispose();
     }
+    await host.rm(path, { recursive: true });
+  }
 }
 
 function useStandalonePlaygroundContext(config) {
-    const [context, setContext] = useState();
-    useEffect(() => {
-        const load = async () => {
-            const host = await createBrowserHost(config.libraries, config.importConfig);
-            await registerMonacoLanguage(host);
-            const stateStorage = createStandalonePlaygroundStateStorage();
-            const initialState = stateStorage.load();
-            setContext({ host, initialState, stateStorage });
-        };
-        void load();
-    }, []);
-    return context;
+  const [context, setContext] = useState();
+  useEffect(() => {
+    const load = async () => {
+      const host = await createBrowserHost(config.libraries, config.importConfig);
+      await registerMonacoLanguage(host);
+      const stateStorage = createStandalonePlaygroundStateStorage();
+      const initialState = stateStorage.load();
+      setContext({ host, initialState, stateStorage });
+    };
+    void load();
+  }, []);
+  return context;
 }
 const StandalonePlayground = (config) => {
-    const context = useStandalonePlaygroundContext(config);
-    const toasterId = useId$1();
-    const { dispatchToast } = useToastController(toasterId);
-    const onSave = useCallback((value) => {
-        if (!context) {
-            return;
-        }
-        context.stateStorage.save(value);
-        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,
-        };
-    }, [context]);
-    if (context === undefined || fixedOptions === undefined) {
-        return config.fallback;
-    }
-    const options = {
-        ...config,
-        ...fixedOptions,
-        onSave,
-    };
-    return (jsxs(Fragment, { children: [jsx(Toaster, { toasterId: toasterId }), options && jsx(Playground, { ...options })] }));
+  const context = useStandalonePlaygroundContext(config);
+  const toasterId = useId$1();
+  const { dispatchToast } = useToastController(toasterId);
+  const onSave = useCallback(
+    (value) => {
+      if (!context) {
+        return;
+      }
+      context.stateStorage.save(value);
+      void navigator.clipboard.writeText(window.location.toString());
+      dispatchToast(
+        /* @__PURE__ */ jsxs(Toast, { children: [
+          /* @__PURE__ */ jsx(ToastTitle, { children: "Saved!" }),
+          /* @__PURE__ */ jsx(ToastBody, { children: "Playground link has been copied to the clipboard." })
+        ] }),
+        { intent: "success" }
+      );
+    },
+    [dispatchToast, context]
+  );
+  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 === void 0 || fixedOptions === void 0) {
+    return config.fallback;
+  }
+  const options = {
+    ...config,
+    ...fixedOptions,
+    onSave
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Toaster, { toasterId }),
+    options && /* @__PURE__ */ jsx(Playground, { ...options })
+  ] });
 };
 async function createReactPlayground(config) {
-    return jsx(StandalonePlayground, { ...config });
+  return /* @__PURE__ */ jsx(StandalonePlayground, { ...config });
 }
 async function renderReactPlayground(config) {
-    const app = await createReactPlayground(config);
-    const root = createRoot(document.getElementById("root"));
-    root.render(jsx(FluentProvider, { theme: webLightTheme, style: { height: "100vh" }, children: app }));
+  const app = await createReactPlayground(config);
+  const root = createRoot(document.getElementById("root"));
+  root.render(
+    /* @__PURE__ */ jsx(FluentProvider, { theme: webLightTheme, style: { height: "100vh" }, children: app })
+  );
 }
 function createStandalonePlaygroundStateStorage() {
-    const stateStorage = createUrlStateStorage({
-        content: {
-            queryParam: "c",
-            compress: "lz-base64",
-        },
-        emitter: {
-            queryParam: "e",
-        },
-        options: {
-            type: "object",
-            queryParam: "options",
-        },
-        sampleName: {
-            queryParam: "sample",
-        },
-    });
-    return {
-        load: stateStorage.load,
-        resolveSearchParams: stateStorage.resolveSearchParams,
-        save(data) {
-            stateStorage.save(data.sampleName ? { sampleName: data.sampleName, options: data.options } : data);
-        },
-    };
+  const stateStorage = createUrlStateStorage({
+    content: {
+      queryParam: "c",
+      compress: "lz-base64"
+    },
+    emitter: {
+      queryParam: "e"
+    },
+    options: {
+      type: "object",
+      queryParam: "options"
+    },
+    sampleName: {
+      queryParam: "sample"
+    }
+  });
+  return {
+    load: stateStorage.load,
+    resolveSearchParams: stateStorage.resolveSearchParams,
+    save(data) {
+      stateStorage.save(
+        data.sampleName ? { sampleName: data.sampleName, options: data.options } : data
+      );
+    }
+  };
 }
 
 export { Footer, FooterItem, FooterVersionItem, Playground, StandalonePlayground, createReactPlayground, createStandalonePlaygroundStateStorage, renderReactPlayground, usePlaygroundContext };
-//# sourceMappingURL=index.js.map