@typespec/playground 0.14.0-dev.1 → 0.14.0-dev.3

package/dist/react/index.js

@@ -1,10 +1,10 @@
-import require$$0, { createContext, useContext, memo, useCallback, useRef, useEffect, useMemo, useState, useId } from 'react';
+import require$$0, { createContext, useContext, memo, useCallback, useRef, useEffect, useMemo, useState, useId, Fragment as Fragment$1 } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { mergeClasses, Popover, PopoverTrigger, PopoverSurface, Title3, Table, TableHeader, TableRow, TableHeaderCell, TableBody, TableCell, Select, tokens, Card, Text, Tooltip, ToolbarButton, OverlayDrawer, DrawerHeader, DrawerHeaderTitle, Button, DrawerBody, Toolbar, Link, useId as useId$1, Label, Checkbox, RadioGroup, Radio, Input, Switch, Subtitle2, TabList, Tab, useToastController, Toast, ToastTitle, ToastBody, Toaster, FluentProvider, webLightTheme } from '@fluentui/react-components';
+import { mergeClasses, Popover, PopoverTrigger, PopoverSurface, Title3, Table, TableHeader, TableRow, TableHeaderCell, TableBody, TableCell, Select, Toolbar, Menu, MenuTrigger, Tooltip, ToolbarButton, MenuPopover, MenuList, MenuDivider, MenuItem, tokens, Card, Text, OverlayDrawer, DrawerHeader, DrawerHeaderTitle, Button, DrawerBody, useId as useId$1, Label, Checkbox, RadioGroup, Radio, Input, Switch, Subtitle2, TabList, Tab, useToastController, Toast, ToastTitle, ToastBody, Toaster, FluentProvider, webLightTheme } from '@fluentui/react-components';
 import { getSourceLocation } from '@typespec/compiler';
 import { editor, Uri, MarkerSeverity, KeyMod, KeyCode } from 'monaco-editor';
 import { $ } from '@typespec/compiler/typekit';
-import { ChevronDownRegular, ChevronRightRegular, DocumentBulletList24Regular, Dismiss24Regular, Save16Regular, Broom16Filled, Bug16Regular, SettingsRegular, FolderRegular, DocumentRegular, FolderListRegular, DataLineRegular, ErrorCircle16Filled, Warning16Filled, ChevronDown16Regular } from '@fluentui/react-icons';
+import { ChevronDownRegular, ChevronRightRegular, MoreHorizontal24Filled, DocumentBulletList24Regular, Dismiss24Regular, Checkmark16Regular, Bug16Regular, Save16Regular, Broom16Filled, SettingsRegular, FolderRegular, DocumentRegular, FolderListRegular, DataLineRegular, ErrorCircle16Filled, Warning16Filled, ChevronDown16Regular } from '@fluentui/react-icons';
 import debounce from 'debounce';
 import { CompletionItemTag } from 'vscode-languageserver';
 import { a as resolveVirtualPath, p as printDebugInfo, d as debugGlobals, g as getMonacoRange, u as updateDiagnosticsForCodeFixes, c as createBrowserHost, r as registerMonacoLanguage } from '../services-Z619RuQS.js';
@@ -27,7 +27,7 @@ function usePlaygroundContext() {
 
 const list = "_list_wrnwm_1";
 const item$1 = "_item_wrnwm_4";
-const style$h = {
+const style$i = {
 	list: list,
 	item: item$1,
 	"item--error": "_item--error_wrnwm_15",
@@ -47,9 +47,9 @@ const DiagnosticList = ({
     [onDiagnosticSelected]
   );
   if (diagnostics.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: style$h["list"], children: "No errors" });
+    return /* @__PURE__ */ jsx("div", { className: style$i["list"], children: "No errors" });
   }
-  return /* @__PURE__ */ jsx("div", { className: style$h["list"], children: diagnostics.map((x, i) => {
+  return /* @__PURE__ */ jsx("div", { className: style$i["list"], children: diagnostics.map((x, i) => {
     return /* @__PURE__ */ jsx(DiagnosticItem, { diagnostic: x, onItemSelected: handleItemSelected }, i);
   }) });
 };
@@ -57,19 +57,19 @@ const DiagnosticItem = ({ diagnostic, onItemSelected }) => {
   const handleClick = useCallback(() => {
     onItemSelected(diagnostic);
   }, [diagnostic, onItemSelected]);
-  return /* @__PURE__ */ jsxs("div", { tabIndex: 0, className: style$h["item"], onClick: handleClick, children: [
+  return /* @__PURE__ */ jsxs("div", { tabIndex: 0, className: style$i["item"], onClick: handleClick, children: [
     /* @__PURE__ */ jsx(
       "div",
       {
         className: mergeClasses(
-          (style$h[diagnostic.severity === "error" ? "item--error" : "item--warning"])
+          (style$i[diagnostic.severity === "error" ? "item--error" : "item--warning"])
         ),
         children: diagnostic.severity
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: style$h["item-code"], children: diagnostic.code }),
-    /* @__PURE__ */ jsx("div", { className: style$h["item-message"], children: diagnostic.message }),
-    /* @__PURE__ */ jsx("div", { className: style$h["item-loc"], children: /* @__PURE__ */ jsx(DiagnosticTargetLink, { target: diagnostic.target }) })
+    /* @__PURE__ */ jsx("div", { className: style$i["item-code"], children: diagnostic.code }),
+    /* @__PURE__ */ jsx("div", { className: style$i["item-message"], children: diagnostic.message }),
+    /* @__PURE__ */ jsx("div", { className: style$i["item-loc"], children: /* @__PURE__ */ jsx(DiagnosticTargetLink, { target: diagnostic.target }) })
   ] });
 };
 const DiagnosticTargetLink = memo(({ target }) => {
@@ -134,18 +134,18 @@ function useMonacoModel(uri, language) {
 }
 
 const footer = "_footer_e6dic_1";
-const style$g = {
+const style$h = {
 	footer: footer,
 	"footer-item": "_footer-item_e6dic_9"
 };
 
 const FooterItem = ({ children, link, className }) => {
-  const resolvedClassName = mergeClasses(style$g["footer-item"], className);
+  const resolvedClassName = mergeClasses(style$h["footer-item"], className);
   return link ? /* @__PURE__ */ jsx("a", { className: resolvedClassName, href: link, target: "_blank", rel: "noopener noreferrer", children }) : /* @__PURE__ */ jsx("div", { className: resolvedClassName, children });
 };
 
 const button = "_button_1c15n_4";
-const style$f = {
+const style$g = {
 	"version-item": "_version-item_1c15n_1",
 	button: button
 };
@@ -154,8 +154,8 @@ const FooterVersionItem = memo(({ versionSelector }) => {
   const { host } = usePlaygroundContext();
   const latest = versionSelector?.latest;
   const selected = versionSelector?.selected ?? host.compiler.MANIFEST.version;
-  return /* @__PURE__ */ jsx(FooterItem, { className: style$f["version-item"], children: /* @__PURE__ */ jsxs(Popover, { children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsxs("div", { className: style$f["button"], children: [
+  return /* @__PURE__ */ jsx(FooterItem, { className: style$g["version-item"], children: /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsxs("div", { className: style$g["button"], children: [
       /* @__PURE__ */ jsx("span", { children: "Version " }),
       /* @__PURE__ */ jsx("span", { children: selected }),
       /* @__PURE__ */ jsx("span", { children: latest ? latest === selected ? " (latest)" : " (old)" : "" })
@@ -201,7 +201,7 @@ const VersionSelector = memo(({ versions, selected, latest, onChange }) => {
 });
 
 const Footer = ({ className, children }) => {
-  return /* @__PURE__ */ jsx("div", { className: mergeClasses(style$g.footer, className), children });
+  return /* @__PURE__ */ jsx("div", { className: mergeClasses(style$h.footer, className), children });
 };
 
 function useControllableValue(controlledValue, defaultUncontrolledValue, onChange) {
@@ -1008,7 +1008,7 @@ const focus = "_focus_16t0l_18";
 const active = "_active_16t0l_22";
 const caret = "_caret_16t0l_26";
 const icon = "_icon_16t0l_33";
-const style$e = {
+const style$f = {
 	tree: tree,
 	"tree-row": "_tree-row_16t0l_4",
 	focus: focus,
@@ -1027,9 +1027,9 @@ function TreeViewRow({ id, row, active, focussed, activate, icon: Icon }) {
       role: "treeitem",
       style: { paddingLeft },
       className: mergeClasses(
-        style$e["tree-row"],
-        active && style$e["active"],
-        focussed && style$e["focus"]
+        style$f["tree-row"],
+        active && style$f["active"],
+        focussed && style$f["focus"]
       ),
       "aria-selected": active,
       "aria-expanded": row.expanded,
@@ -1037,8 +1037,8 @@ function TreeViewRow({ id, row, active, focussed, activate, icon: Icon }) {
       "aria-level": row.depth,
       onClick,
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: style$e["caret"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(Caret, { row }) }),
-        Icon && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: style$e["icon"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { node: row.item }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: style$f["caret"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(Caret, { row }) }),
+        Icon && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: style$f["icon"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { node: row.item }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "label", title: row.item.name, children: row.item.name })
       ]
     }
@@ -1138,7 +1138,7 @@ function Tree({
     "div",
     {
       id,
-      className: style$e["tree"],
+      className: style$f["tree"],
       tabIndex: 0,
       role: "tree",
       onKeyDown: handleKeyDown,
@@ -1241,6 +1241,80 @@ const EmitterDropdown = ({
   );
 };
 
+const bar = "_bar_1gurd_1";
+const divider = "_divider_1gurd_5";
+const style$e = {
+	bar: bar,
+	divider: divider
+};
+
+const ResponsiveCommandBar = ({
+  items,
+  isMobile
+}) => {
+  const pinnedItems = items.filter((i) => i.pinned);
+  const overflowItems = items.filter((i) => !i.pinned);
+  const leftItems = items.filter((i) => (i.align ?? "left") === "left");
+  const rightItems = items.filter((i) => i.align === "right");
+  const leftOverflow = overflowItems.filter((i) => (i.align ?? "left") === "left");
+  const rightOverflow = overflowItems.filter((i) => i.align === "right");
+  return /* @__PURE__ */ jsxs("div", { className: style$e["bar"], children: [
+    /* @__PURE__ */ jsx(Toolbar, { children: isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      pinnedItems.map((item) => /* @__PURE__ */ jsx(ToolbarItemRenderer, { item }, item.id)),
+      overflowItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: style$e["divider"] }),
+        /* @__PURE__ */ jsxs(Menu, { children: [
+          /* @__PURE__ */ jsx(MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(Tooltip, { content: "More actions", relationship: "description", withArrow: true, children: /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              "aria-label": "More actions",
+              icon: /* @__PURE__ */ jsx(MoreHorizontal24Filled, {}),
+              appearance: "subtle"
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx(MenuPopover, { children: /* @__PURE__ */ jsxs(MenuList, { children: [
+            leftOverflow.map((item) => /* @__PURE__ */ jsx(MenuItemRenderer, { item }, item.id)),
+            leftOverflow.length > 0 && rightOverflow.length > 0 && /* @__PURE__ */ jsx(MenuDivider, {}),
+            rightOverflow.map((item) => /* @__PURE__ */ jsx(MenuItemRenderer, { item }, item.id))
+          ] }) })
+        ] })
+      ] })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      leftItems.map((item) => /* @__PURE__ */ jsx(ToolbarItemRenderer, { item }, item.id)),
+      rightItems.length > 0 && /* @__PURE__ */ jsx("div", { className: style$e["divider"] }),
+      rightItems.map((item) => /* @__PURE__ */ jsx(ToolbarItemRenderer, { item }, item.id))
+    ] }) }),
+    items.map((item) => item.content && /* @__PURE__ */ jsx(Fragment$1, { children: item.content }, item.id))
+  ] });
+};
+const ToolbarItemRenderer = ({ item }) => {
+  if (item.toolbarItem) return /* @__PURE__ */ jsx(Fragment, { children: item.toolbarItem });
+  if (item.children) {
+    return /* @__PURE__ */ jsxs(Menu, { children: [
+      /* @__PURE__ */ jsx(MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(Tooltip, { content: item.label, relationship: "description", withArrow: true, children: /* @__PURE__ */ jsx(ToolbarButton, { appearance: "subtle", "aria-label": item.label, icon: item.icon }) }) }),
+      /* @__PURE__ */ jsx(MenuPopover, { children: /* @__PURE__ */ jsx(MenuList, { children: item.children.map((child) => /* @__PURE__ */ jsx(MenuItem, { icon: child.icon, onClick: child.onClick, children: child.label }, child.id)) }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Tooltip, { content: item.label, relationship: "description", withArrow: true, children: /* @__PURE__ */ jsx(
+    ToolbarButton,
+    {
+      "aria-label": item.label,
+      icon: item.icon,
+      onClick: item.onClick
+    }
+  ) });
+};
+const MenuItemRenderer = ({ item }) => {
+  if (item.menuItem) return /* @__PURE__ */ jsx(Fragment, { children: item.menuItem });
+  if (item.children) {
+    return /* @__PURE__ */ jsxs(Menu, { openOnHover: false, children: [
+      /* @__PURE__ */ jsx(MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(MenuItem, { icon: item.icon, children: item.label }) }),
+      /* @__PURE__ */ jsx(MenuPopover, { children: /* @__PURE__ */ jsx(MenuList, { children: item.children.map((child) => /* @__PURE__ */ jsx(MenuItem, { icon: child.icon, onClick: child.onClick, children: child.label }, child.id)) }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(MenuItem, { icon: item.icon, onClick: item.onClick, children: item.label });
+};
+
 const style$d = {
 	"samples-grid": "_samples-grid_1dkte_1",
 	"sample-card": "_sample-card_1dkte_8",
@@ -1359,18 +1433,52 @@ const SampleCard = ({ name, sample, onSelect }) => {
   );
 };
 
-const SamplesDrawerTrigger = ({
+const SamplesDrawerOverlay = ({
   samples,
-  onSelectedSampleNameChange
+  onSelectedSampleNameChange,
+  open,
+  onOpenChange
 }) => {
-  const [isOpen, setIsOpen] = useState(false);
   const handleSampleSelect = useCallback(
     (sampleName) => {
       onSelectedSampleNameChange(sampleName);
-      setIsOpen(false);
+      onOpenChange(false);
     },
-    [onSelectedSampleNameChange]
+    [onSelectedSampleNameChange, onOpenChange]
   );
+  return /* @__PURE__ */ jsxs(
+    OverlayDrawer,
+    {
+      open,
+      onOpenChange: (_, data) => onOpenChange(data.open),
+      position: "end",
+      size: "large",
+      children: [
+        /* @__PURE__ */ jsx(DrawerHeader, { children: /* @__PURE__ */ jsx(
+          DrawerHeaderTitle,
+          {
+            action: /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "subtle",
+                "aria-label": "Close",
+                icon: /* @__PURE__ */ jsx(Dismiss24Regular, {}),
+                onClick: () => onOpenChange(false)
+              }
+            ),
+            children: "Sample Gallery"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(DrawerBody, { children: /* @__PURE__ */ jsx("div", { className: style$d["samples-grid"], children: Object.entries(samples).map(([name, sample]) => /* @__PURE__ */ jsx(SampleCard, { name, sample, onSelect: handleSampleSelect }, name)) }) })
+      ]
+    }
+  );
+};
+const SamplesDrawerTrigger = ({
+  samples,
+  onSelectedSampleNameChange
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Tooltip, { content: "Browse samples", relationship: "description", withArrow: true, children: /* @__PURE__ */ jsx(
       ToolbarButton,
@@ -1381,104 +1489,143 @@ const SamplesDrawerTrigger = ({
         children: "Samples"
       }
     ) }),
-    /* @__PURE__ */ jsxs(
-      OverlayDrawer,
+    /* @__PURE__ */ jsx(
+      SamplesDrawerOverlay,
       {
+        samples,
+        onSelectedSampleNameChange,
         open: isOpen,
-        onOpenChange: (_, data) => setIsOpen(data.open),
-        position: "end",
-        size: "large",
-        children: [
-          /* @__PURE__ */ jsx(DrawerHeader, { children: /* @__PURE__ */ jsx(
-            DrawerHeaderTitle,
-            {
-              action: /* @__PURE__ */ jsx(
-                Button,
-                {
-                  appearance: "subtle",
-                  "aria-label": "Close",
-                  icon: /* @__PURE__ */ jsx(Dismiss24Regular, {}),
-                  onClick: () => setIsOpen(false)
-                }
-              ),
-              children: "Sample Gallery"
-            }
-          ) }),
-          /* @__PURE__ */ jsx(DrawerBody, { children: /* @__PURE__ */ jsx("div", { className: style$d["samples-grid"], children: Object.entries(samples).map(([name, sample]) => /* @__PURE__ */ jsx(SampleCard, { name, sample, onSelect: handleSampleSelect }, name)) }) })
-        ]
+        onOpenChange: setIsOpen
       }
     )
   ] });
 };
 
-const bar = "_bar_15c2c_1";
-const divider = "_divider_15c2c_5";
-const spacer = "_spacer_15c2c_9";
-const style$c = {
-	bar: bar,
-	divider: divider,
-	spacer: spacer
-};
+const MobileBreakpoint = 768;
+function useIsMobile() {
+  const query = `(max-width: ${MobileBreakpoint}px)`;
+  const getMatch = useCallback(() => {
+    return typeof window !== "undefined" ? window.matchMedia(query).matches : false;
+  }, [query]);
+  const [isMobile, setIsMobile] = useState(getMatch);
+  useEffect(() => {
+    const mql = window.matchMedia(query);
+    const handler = (e) => setIsMobile(e.matches);
+    mql.addEventListener("change", handler);
+    setIsMobile(mql.matches);
+    return () => mql.removeEventListener("change", handler);
+  }, [query]);
+  return isMobile;
+}
 
-const EditorCommandBar = ({
-  documentationUrl,
-  saveCode,
-  formatCode,
-  fileBug,
-  host,
-  selectedEmitter,
-  onSelectedEmitterChange,
-  samples,
-  selectedSampleName,
-  onSelectedSampleNameChange,
-  commandBarButtons
-}) => {
-  const documentation = documentationUrl ? /* @__PURE__ */ jsx("label", { children: /* @__PURE__ */ jsx(Link, { href: documentationUrl, target: "_blank", children: "Docs" }) }) : void 0;
-  const bugButton = fileBug ? /* @__PURE__ */ jsx(FileBugButton, { onClick: fileBug }) : void 0;
+const EditorCommandBar = (props) => {
+  const {
+    saveCode,
+    formatCode,
+    fileBug,
+    host,
+    selectedEmitter,
+    onSelectedEmitterChange,
+    samples,
+    onSelectedSampleNameChange,
+    commandBarItems: externalItems
+  } = props;
+  const isMobile = useIsMobile();
+  const [samplesDrawerOpen, setSamplesDrawerOpen] = useState(false);
   const emitters = useMemo(
     () => Object.values(host.libraries).filter((x) => x.isEmitter).map((x) => x.name),
     [host.libraries]
   );
-  return /* @__PURE__ */ jsx("div", { className: style$c["bar"], children: /* @__PURE__ */ jsxs(Toolbar, { children: [
-    /* @__PURE__ */ jsx(Tooltip, { content: "Save", relationship: "description", withArrow: true, children: /* @__PURE__ */ jsx(ToolbarButton, { "aria-label": "Save", icon: /* @__PURE__ */ jsx(Save16Regular, {}), onClick: saveCode }) }),
-    /* @__PURE__ */ jsx(Tooltip, { content: "Format", relationship: "description", withArrow: true, children: /* @__PURE__ */ jsx(ToolbarButton, { "aria-label": "Format", icon: /* @__PURE__ */ jsx(Broom16Filled, {}), onClick: formatCode }) }),
-    samples && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        SamplesDrawerTrigger,
+  const handleFileBug = useCallback(() => {
+    if (fileBug) void fileBug();
+  }, [fileBug]);
+  const items = useMemo(() => {
+    const result = [
+      {
+        id: "save",
+        label: "Save",
+        icon: /* @__PURE__ */ jsx(Save16Regular, {}),
+        onClick: saveCode,
+        pinned: true
+      },
+      {
+        id: "format",
+        label: "Format",
+        icon: /* @__PURE__ */ jsx(Broom16Filled, {}),
+        onClick: formatCode,
+        pinned: true
+      }
+    ];
+    if (samples) {
+      result.push({
+        id: "samples",
+        label: "Browse Samples",
+        icon: /* @__PURE__ */ jsx(DocumentBulletList24Regular, {}),
+        onClick: () => setSamplesDrawerOpen(true),
+        toolbarItem: /* @__PURE__ */ jsx(
+          SamplesDrawerTrigger,
+          {
+            samples,
+            onSelectedSampleNameChange
+          }
+        )
+      });
+    }
+    result.push({
+      id: "emitter",
+      label: "Emitter",
+      toolbarItem: /* @__PURE__ */ jsx(
+        EmitterDropdown,
         {
-          samples,
-          onSelectedSampleNameChange
+          emitters,
+          selectedEmitter,
+          onSelectedEmitterChange
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: style$c["spacer"] })
-    ] }),
-    /* @__PURE__ */ jsx(
-      EmitterDropdown,
+      children: emitters.map((emitter) => ({
+        id: `emitter-${emitter}`,
+        label: emitter,
+        icon: emitter === selectedEmitter ? /* @__PURE__ */ jsx(Checkmark16Regular, {}) : void 0,
+        onClick: () => onSelectedEmitterChange(emitter)
+      }))
+    });
+    if (externalItems) {
+      result.push(...externalItems);
+    }
+    if (fileBug) {
+      result.push({
+        id: "file-bug",
+        label: "File Bug",
+        align: "right",
+        icon: /* @__PURE__ */ jsx(Bug16Regular, {}),
+        onClick: handleFileBug
+      });
+    }
+    return result;
+  }, [
+    saveCode,
+    formatCode,
+    samples,
+    onSelectedSampleNameChange,
+    emitters,
+    selectedEmitter,
+    onSelectedEmitterChange,
+    externalItems,
+    fileBug,
+    handleFileBug
+  ]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ResponsiveCommandBar, { items, isMobile }),
+    isMobile && samples && /* @__PURE__ */ jsx(
+      SamplesDrawerOverlay,
       {
-        emitters,
-        onSelectedEmitterChange,
-        selectedEmitter
+        samples,
+        onSelectedSampleNameChange,
+        open: samplesDrawerOpen,
+        onOpenChange: setSamplesDrawerOpen
       }
-    ),
-    documentation && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: style$c["spacer"] }),
-      documentation
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: style$c["divider"] }),
-    commandBarButtons,
-    bugButton
-  ] }) });
-};
-const FileBugButton = ({ onClick }) => {
-  return /* @__PURE__ */ jsx(Tooltip, { content: "File Bug Report", relationship: "description", withArrow: true, children: /* @__PURE__ */ jsx(
-    ToolbarButton,
-    {
-      appearance: "subtle",
-      "aria-label": "File Bug Report",
-      icon: /* @__PURE__ */ jsx(Bug16Regular, {}),
-      onClick
-    }
-  ) });
+    )
+  ] });
 };
 
 const DefaultFooter = () => {
@@ -1522,7 +1669,7 @@ const settings = "_settings_1yvpj_1";
 const section = "_section_1yvpj_7";
 const field = "_field_1yvpj_23";
 const empty = "_empty_1yvpj_33";
-const style$b = {
+const style$c = {
 	settings: settings,
 	section: section,
 	"section-title": "_section-title_1yvpj_19",
@@ -1533,7 +1680,7 @@ const style$b = {
 const form = "_form_w9o1o_1";
 const item = "_item_w9o1o_7";
 const description = "_description_w9o1o_13";
-const style$a = {
+const style$b = {
 	form: form,
 	item: item,
 	description: description,
@@ -1562,9 +1709,9 @@ const EmitterOptionsForm = ({
     return /* @__PURE__ */ jsx(Text, { size: 200, children: "No options available" });
   }
   const entries = Object.entries(emitterOptionsSchema);
-  return /* @__PURE__ */ jsx("div", { className: style$a["form"], children: entries.map(([key, value]) => {
+  return /* @__PURE__ */ jsx("div", { className: style$b["form"], children: entries.map(([key, value]) => {
     const resolved = value.oneOf ? resolveOneOfProperty(value) : value;
-    return /* @__PURE__ */ jsx("div", { className: style$a["form-item"], children: resolved.type === "array" ? /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { className: style$b["form-item"], children: resolved.type === "array" ? /* @__PURE__ */ jsx(
       JsonSchemaArrayPropertyInput,
       {
         emitterOptions: options[library.name] ?? {},
@@ -1626,7 +1773,7 @@ const JsonSchemaArrayPropertyInput = ({
     return JsonSchemaPropertyInput({ emitterOptions, name, prop: itemsSchema, onChange });
   }
   const itemsEnum = itemsSchema.enum;
-  return /* @__PURE__ */ jsxs("div", { className: style$a["item"], children: [
+  return /* @__PURE__ */ jsxs("div", { className: style$b["item"], children: [
     /* @__PURE__ */ jsx(Label, { htmlFor: inputId, title: name, children: prettyName }),
     itemsEnum.map((x) => /* @__PURE__ */ jsx(
       Checkbox,
@@ -1658,24 +1805,24 @@ const JsonSchemaPropertyInput = ({
   );
   switch (prop.type) {
     case "boolean":
-      return /* @__PURE__ */ jsxs("div", { className: style$a["item"], children: [
+      return /* @__PURE__ */ jsxs("div", { className: style$b["item"], children: [
         /* @__PURE__ */ jsx(
           Switch,
           {
-            className: style$a["switch"],
+            className: style$b["switch"],
             label: prettyName,
             labelPosition: "above",
             checked: value,
             onChange: handleChange
           }
         ),
-        prop.description && /* @__PURE__ */ jsx(Text, { size: 200, className: style$a["description"], children: prop.description })
+        prop.description && /* @__PURE__ */ jsx(Text, { size: 200, className: style$b["description"], children: prop.description })
       ] });
     case "string":
     default:
-      return /* @__PURE__ */ jsxs("div", { className: style$a["item"], children: [
+      return /* @__PURE__ */ jsxs("div", { className: style$b["item"], children: [
         /* @__PURE__ */ jsx(Label, { htmlFor: inputId, title: name, children: prettyName }),
-        prop.description && /* @__PURE__ */ jsx(Text, { size: 200, className: style$a["description"], children: prop.description }),
+        prop.description && /* @__PURE__ */ jsx(Text, { size: 200, className: style$b["description"], children: prop.description }),
         prop.enum ? /* @__PURE__ */ jsx(RadioGroup, { layout: "horizontal", id: inputId, value, onChange: handleChange, children: prop.enum.map((x) => /* @__PURE__ */ jsx(Radio, { value: x, label: x }, x)) }) : /* @__PURE__ */ jsx(Input, { id: inputId, value, onChange: handleChange })
       ] });
   }
@@ -1759,10 +1906,10 @@ const CompilerSettings = ({
     },
     [onSelectedEmitterChange]
   );
-  return /* @__PURE__ */ jsxs("div", { className: style$b["settings"], children: [
-    /* @__PURE__ */ jsxs("section", { className: style$b["section"], children: [
-      /* @__PURE__ */ jsx(Subtitle2, { className: style$b["section-title"], children: "Emitter" }),
-      /* @__PURE__ */ jsxs("div", { className: style$b["field"], children: [
+  return /* @__PURE__ */ jsxs("div", { className: style$c["settings"], children: [
+    /* @__PURE__ */ jsxs("section", { className: style$c["section"], children: [
+      /* @__PURE__ */ jsx(Subtitle2, { className: style$c["section-title"], children: "Emitter" }),
+      /* @__PURE__ */ jsxs("div", { className: style$c["field"], children: [
         /* @__PURE__ */ jsx(Label, { children: "Select emitter" }),
         /* @__PURE__ */ jsxs(
           Select,
@@ -1778,8 +1925,8 @@ const CompilerSettings = ({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("section", { className: style$b["section"], children: [
-      /* @__PURE__ */ jsx(Subtitle2, { className: style$b["section-title"], children: "Emitter options" }),
+    /* @__PURE__ */ jsxs("section", { className: style$c["section"], children: [
+      /* @__PURE__ */ jsx(Subtitle2, { className: style$c["section-title"], children: "Emitter options" }),
       library ? /* @__PURE__ */ jsx(
         EmitterOptionsForm,
         {
@@ -1787,10 +1934,10 @@ const CompilerSettings = ({
           options: options.options ?? {},
           optionsChanged: emitterOptionsChanged
         }
-      ) : /* @__PURE__ */ jsx(Text, { size: 200, className: style$b["empty"], children: "No emitter selected" })
+      ) : /* @__PURE__ */ jsx(Text, { size: 200, className: style$c["empty"], children: "No emitter selected" })
     ] }),
-    /* @__PURE__ */ jsxs("section", { className: style$b["section"], children: [
-      /* @__PURE__ */ jsx(Subtitle2, { className: style$b["section-title"], children: "Linter rules" }),
+    /* @__PURE__ */ jsxs("section", { className: style$c["section"], children: [
+      /* @__PURE__ */ jsx(Subtitle2, { className: style$c["section-title"], children: "Linter rules" }),
       /* @__PURE__ */ jsx(
         LinterForm,
         {
@@ -1803,7 +1950,7 @@ const CompilerSettings = ({
   ] });
 };
 
-const style$9 = {
+const style$a = {
 	"config-panel": "_config-panel_cffut_1",
 	"config-toggle": "_config-toggle_cffut_8",
 	"config-content": "_config-content_cffut_17",
@@ -1898,12 +2045,12 @@ const ConfigPanel = ({
     },
     [selectedEmitter, compilerOptions, yamlModel]
   );
-  return /* @__PURE__ */ jsxs("div", { className: style$9["config-panel"], children: [
-    /* @__PURE__ */ jsx("div", { className: style$9["config-toggle"], children: /* @__PURE__ */ jsxs(TabList, { size: "small", selectedValue: mode, onTabSelect: handleModeChange, children: [
+  return /* @__PURE__ */ jsxs("div", { className: style$a["config-panel"], children: [
+    /* @__PURE__ */ jsx("div", { className: style$a["config-toggle"], children: /* @__PURE__ */ jsxs(TabList, { size: "small", selectedValue: mode, onTabSelect: handleModeChange, children: [
       /* @__PURE__ */ jsx(Tab, { value: "form", children: "Visual" }),
       /* @__PURE__ */ jsx(Tab, { value: "yaml", children: "Yaml" })
     ] }) }),
-    /* @__PURE__ */ jsx("div", { className: style$9["config-content"], children: mode === "form" ? /* @__PURE__ */ jsx("div", { className: style$9["form-content"], children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: style$a["config-content"], children: mode === "form" ? /* @__PURE__ */ jsx("div", { className: style$a["form-content"], children: /* @__PURE__ */ jsx(
       CompilerSettings,
       {
         host,
@@ -1916,7 +2063,7 @@ const ConfigPanel = ({
   ] });
 };
 
-const style$8 = {
+const style$9 = {
 	"editor-panel": "_editor-panel_k9ax7_1",
 	"panel-tabs-container": "_panel-tabs-container_k9ax7_7",
 	"panel-content": "_panel-content_k9ax7_11"
@@ -1958,12 +2105,12 @@ const EditorPanel = ({
   const onTabSelect = useCallback((_, data) => {
     setSelectedTab(data.value);
   }, []);
-  return /* @__PURE__ */ jsxs("div", { className: style$8["editor-panel"], children: [
-    /* @__PURE__ */ jsx("div", { className: style$8["panel-tabs-container"], children: /* @__PURE__ */ jsxs(TabList, { vertical: true, size: "large", selectedValue: selectedTab, onTabSelect, children: [
+  return /* @__PURE__ */ jsxs("div", { className: style$9["editor-panel"], children: [
+    /* @__PURE__ */ jsx("div", { className: style$9["panel-tabs-container"], children: /* @__PURE__ */ jsxs(TabList, { vertical: true, size: "large", selectedValue: selectedTab, onTabSelect, children: [
       /* @__PURE__ */ jsx(Tab, { value: "tsp", children: /* @__PURE__ */ jsx("span", { title: "TypeSpec", children: /* @__PURE__ */ jsx(TypeSpecIcon, {}) }) }),
       /* @__PURE__ */ jsx(Tab, { value: "cfg", children: /* @__PURE__ */ jsx("span", { title: "Config", children: /* @__PURE__ */ jsx(SettingsRegular, {}) }) })
     ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: style$8["panel-content"], children: [
+    /* @__PURE__ */ jsxs("div", { className: style$9["panel-content"], children: [
       commandBar,
       selectedTab === "tsp" ? /* @__PURE__ */ jsx(
         TypeSpecEditor,
@@ -1992,7 +2139,7 @@ const breadcrumb = "_breadcrumb_15sw5_1";
 const segment = "_segment_15sw5_15";
 const separator = "_separator_15sw5_20";
 const current = "_current_15sw5_25";
-const style$7 = {
+const style$8 = {
 	breadcrumb: breadcrumb,
 	segment: segment,
 	separator: separator,
@@ -2004,13 +2151,13 @@ const FileBreadcrumb = ({ path }) => {
     return null;
   }
   const segments = path.split("/");
-  return /* @__PURE__ */ jsx("div", { className: style$7["breadcrumb"], children: segments.map((segment, index) => /* @__PURE__ */ jsxs("span", { className: style$7["segment"], children: [
-    index > 0 && /* @__PURE__ */ jsx("span", { className: style$7["separator"], children: "/" }),
-    /* @__PURE__ */ jsx("span", { className: index === segments.length - 1 ? style$7["current"] : void 0, children: segment })
+  return /* @__PURE__ */ jsx("div", { className: style$8["breadcrumb"], children: segments.map((segment, index) => /* @__PURE__ */ jsxs("span", { className: style$8["segment"], children: [
+    index > 0 && /* @__PURE__ */ jsx("span", { className: style$8["separator"], children: "/" }),
+    /* @__PURE__ */ jsx("span", { className: index === segments.length - 1 ? style$8["current"] : void 0, children: segment })
   ] }, index)) });
 };
 
-const style$6 = {
+const style$7 = {
 	"file-output": "_file-output_jzw6j_1",
 	"viewer-selector": "_viewer-selector_jzw6j_5"
 };
@@ -2036,8 +2183,8 @@ const FileOutput = ({ filename, content, viewers }) => {
   } else if (keys.length === 1) {
     return resolvedViewers[keys[0]].render({ filename, content });
   }
-  return /* @__PURE__ */ jsxs("div", { className: style$6["file-output"], children: [
-    /* @__PURE__ */ jsx("div", { className: style$6["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)) }) }),
+  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 })
   ] });
 };
@@ -2047,7 +2194,7 @@ const RawFileViewer = {
   render: ({ filename, content }) => /* @__PURE__ */ jsx(OutputEditor, { filename, value: content })
 };
 
-const style$5 = {
+const style$6 = {
 	"file-tree": "_file-tree_m3if7_1"
 };
 
@@ -2119,7 +2266,7 @@ const FileTreeExplorer = ({
   onSelect
 }) => {
   const tree = useMemo(() => buildTree(files), [files]);
-  return /* @__PURE__ */ jsx("div", { className: style$5["file-tree"], children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: style$6["file-tree"], children: /* @__PURE__ */ jsx(
     Tree,
     {
       tree,
@@ -2133,7 +2280,7 @@ const FileTreeExplorer = ({
 
 const tabs = "_tabs_1x6x2_1";
 const tab = "_tab_1x6x2_1";
-const style$4 = {
+const style$5 = {
 	tabs: tabs,
 	tab: tab,
 	"tab--selected": "_tab--selected_1x6x2_18"
@@ -2150,12 +2297,12 @@ const OutputTabs = ({
     },
     [onSelect]
   );
-  return /* @__PURE__ */ jsx(TabList, { selectedValue: selected, onTabSelect, className: style$4["tabs"], children: filenames.map((filename) => {
+  return /* @__PURE__ */ jsx(TabList, { selectedValue: selected, onTabSelect, className: style$5["tabs"], children: filenames.map((filename) => {
     return /* @__PURE__ */ jsx(
       Tab,
       {
         value: filename,
-        className: mergeClasses(style$4["tab"], filename === selected && style$4["tab--selected"]),
+        className: mergeClasses(style$5["tab"], filename === selected && style$5["tab--selected"]),
         children: filename
       },
       filename
@@ -2163,7 +2310,7 @@ const OutputTabs = ({
   }) });
 };
 
-const style$3 = {
+const style$4 = {
 	"output-view": "_output-view_eeqi3_1",
 	"file-viewer": "_file-viewer_eeqi3_6",
 	"output-content": "_output-content_eeqi3_12",
@@ -2215,7 +2362,7 @@ const FileViewerComponent = ({
     return /* @__PURE__ */ jsx(Fragment, { children: "No files emitted." });
   }
   if (showFileTree) {
-    return /* @__PURE__ */ jsx("div", { className: style$3["file-viewer"], children: /* @__PURE__ */ jsxs(SplitPane, { initialSizes: ["220px", void 0], children: [
+    return /* @__PURE__ */ jsx("div", { className: style$4["file-viewer"], children: /* @__PURE__ */ jsxs(SplitPane, { initialSizes: ["220px", void 0], children: [
       /* @__PURE__ */ jsx(Pane, { minSize: 120, maxSize: 400, children: /* @__PURE__ */ jsx(
         FileTreeExplorer,
         {
@@ -2224,15 +2371,15 @@ const FileViewerComponent = ({
           onSelect: handleFileSelection
         }
       ) }),
-      /* @__PURE__ */ jsx(Pane, { children: /* @__PURE__ */ jsxs("div", { className: style$3["file-viewer-content-with-breadcrumb"], children: [
+      /* @__PURE__ */ jsx(Pane, { children: /* @__PURE__ */ jsxs("div", { className: style$4["file-viewer-content-with-breadcrumb"], children: [
         /* @__PURE__ */ jsx(FileBreadcrumb, { path: filename }),
-        /* @__PURE__ */ jsx("div", { className: style$3["file-viewer-content"], children: /* @__PURE__ */ jsx(FileOutput, { filename, content, viewers: fileViewers }) })
+        /* @__PURE__ */ jsx("div", { className: style$4["file-viewer-content"], children: /* @__PURE__ */ jsx(FileOutput, { filename, content, viewers: fileViewers }) })
       ] }) })
     ] }) });
   }
-  return /* @__PURE__ */ jsxs("div", { className: style$3["file-viewer"], children: [
+  return /* @__PURE__ */ jsxs("div", { className: style$4["file-viewer"], children: [
     /* @__PURE__ */ jsx(OutputTabs, { filenames: outputFiles, selected: filename, onSelect: handleFileSelection }),
-    /* @__PURE__ */ jsx("div", { className: style$3["file-viewer-content"], children: /* @__PURE__ */ jsx(FileOutput, { filename, content, viewers: fileViewers }) })
+    /* @__PURE__ */ jsx("div", { className: style$4["file-viewer-content"], children: /* @__PURE__ */ jsx(FileOutput, { filename, content, viewers: fileViewers }) })
   ] });
 };
 function createFileViewer(fileViewers) {
@@ -2262,7 +2409,7 @@ const TypeGraphViewerComponent = ({
     },
     [viewerState, onViewerStateChange]
   );
-  return /* @__PURE__ */ jsx("div", { className: style$3["type-graph-viewer"], children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: style$4["type-graph-viewer"], children: /* @__PURE__ */ jsx(
     TypeGraph,
     {
       program,
@@ -2344,8 +2491,8 @@ const OutputViewInternal = ({
   const viewer = useMemo(() => {
     return viewers.programViewers[selected];
   }, [viewers.programViewers, selected]);
-  return /* @__PURE__ */ jsxs("div", { className: style$3["output-view"], children: [
-    /* @__PURE__ */ jsx("div", { className: style$3["output-content"], children: /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { className: style$4["output-view"], children: [
+    /* @__PURE__ */ jsx("div", { className: style$4["output-content"], children: /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender, children: /* @__PURE__ */ jsx(
       viewer.render,
       {
         program: compilationResult.program,
@@ -2354,37 +2501,38 @@ const OutputViewInternal = ({
         onViewerStateChange
       }
     ) }) }),
-    /* @__PURE__ */ jsx("div", { className: style$3["viewer-tabs-container"], children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: style$4["viewer-tabs-container"], children: /* @__PURE__ */ jsx(
       TabList,
       {
         vertical: true,
         size: "large",
         selectedValue: selected,
         onTabSelect,
-        className: style$3["viewer-tabs"],
+        className: style$4["viewer-tabs"],
         children: viewerList.map((viewer2) => {
-          return /* @__PURE__ */ jsx(Tab, { value: viewer2.key, className: style$3["viewer-tab"], children: /* @__PURE__ */ jsx("span", { title: viewer2.label, children: viewer2.icon }) }, viewer2.key);
+          return /* @__PURE__ */ jsx(Tab, { value: viewer2.key, className: style$4["viewer-tab"], children: /* @__PURE__ */ jsx("span", { title: viewer2.label, children: viewer2.icon }) }, viewer2.key);
         })
       }
     ) })
   ] });
 };
 function fallbackRender({ error, resetErrorBoundary }) {
-  return /* @__PURE__ */ jsxs("div", { role: "alert", className: style$3["viewer-error"], children: [
+  return /* @__PURE__ */ jsxs("div", { role: "alert", className: style$4["viewer-error"], children: [
     /* @__PURE__ */ jsx("h2", { children: "Something went wrong:" }),
     /* @__PURE__ */ jsx("div", { style: { color: "red" }, children: String(error) }),
     /* @__PURE__ */ jsx(Button, { onClick: resetErrorBoundary, children: "Try again" })
   ] });
 }
 
-const layout = "_layout_l03ni_1";
-const style$2 = {
+const layout = "_layout_63onh_1";
+const style$3 = {
 	layout: layout,
-	"edit-pane": "_edit-pane_l03ni_9"
+	"edit-pane": "_edit-pane_63onh_9",
+	"single-pane": "_single-pane_63onh_14"
 };
 
 const header = "_header_1qhql_1";
-const style$1 = {
+const style$2 = {
 	header: header,
 	"header--error": "_header--error_1qhql_12",
 	"error-icon": "_error-icon_1qhql_17",
@@ -2414,13 +2562,13 @@ const ProblemPaneHeader = memo(({ compilationState, ...props }) => {
   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$1["error-icon"] }),
+      /* @__PURE__ */ jsx(ErrorCircle16Filled, { className: style$2["error-icon"] }),
       " ",
       errors.length,
       " errors"
     ] }) : null,
     warnings.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Warning16Filled, { className: style$1["warning-icon"] }),
+      /* @__PURE__ */ jsx(Warning16Filled, { className: style$2["warning-icon"] }),
       " ",
       warnings.length,
       " warnings"
@@ -2434,21 +2582,21 @@ const Container = ({ children, className, status, onClick, collaped }) => {
       role: "button",
       tabIndex: onClick === void 0 ? void 0 : 0,
       className: mergeClasses(
-        style$1["header"],
-        status === "error" && style$1["header--error"],
-        status === "warning" && style$1["header--warning"],
+        style$2["header"],
+        status === "error" && style$2["header--error"],
+        status === "warning" && style$2["header--warning"],
         className
       ),
       onClick,
       onKeyDown: (evt) => (evt.code === "Enter" || evt.code === "Space") && onClick?.(evt),
       children: [
-        /* @__PURE__ */ jsx("div", { className: style$1["header-content"], children }),
+        /* @__PURE__ */ jsx("div", { className: style$2["header-content"], children }),
         /* @__PURE__ */ jsx(
           ChevronDown16Regular,
           {
             className: mergeClasses(
-              style$1["header-chevron"],
-              collaped && style$1["header-chevron--collapsed"]
+              style$2["header-chevron"],
+              collaped && style$2["header-chevron--collapsed"]
             )
           }
         )
@@ -2457,7 +2605,7 @@ const Container = ({ children, className, status, onClick, collaped }) => {
   );
 };
 
-const style = {
+const style$1 = {
 	"problem-pane": "_problem-pane_kxgwp_1",
 	"problem-content": "_problem-content_kxgwp_9",
 	"no-problems": "_no-problems_kxgwp_12",
@@ -2470,7 +2618,7 @@ const ProblemPane = ({
   onHeaderClick,
   onDiagnosticSelected
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: style["problem-pane"], children: [
+  return /* @__PURE__ */ jsxs("div", { className: style$1["problem-pane"], children: [
     /* @__PURE__ */ jsx(
       ProblemPaneHeader,
       {
@@ -2479,7 +2627,7 @@ const ProblemPane = ({
         collaped: collapsed
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: style["problem-content"], "aria-hidden": collapsed, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: style$1["problem-content"], "aria-hidden": collapsed, children: /* @__PURE__ */ jsx(
       ProblemPaneContent,
       {
         compilationState,
@@ -2496,10 +2644,10 @@ const ProblemPaneContent = ({
     return /* @__PURE__ */ jsx(Fragment, {});
   }
   if ("internalCompilerError" in compilationState) {
-    return /* @__PURE__ */ jsx("pre", { className: style["internal-compiler-error"], children: String(compilationState.internalCompilerError) });
+    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["no-problems"], children: " No problems" }) : /* @__PURE__ */ jsx(DiagnosticList, { diagnostics, onDiagnosticSelected });
+  return diagnostics.length === 0 ? /* @__PURE__ */ jsx("div", { className: style$1["no-problems"], children: " No problems" }) : /* @__PURE__ */ jsx(DiagnosticList, { diagnostics, onDiagnosticSelected });
 };
 
 function usePlaygroundState({
@@ -2599,6 +2747,42 @@ function usePlaygroundState({
   };
 }
 
+const style = {
+	"view-toggle-bar": "_view-toggle-bar_1yl8k_1",
+	"view-toggle-tabs": "_view-toggle-tabs_1yl8k_10",
+	"view-toggle-actions": "_view-toggle-actions_1yl8k_14"
+};
+
+const ViewToggle = ({
+  viewMode,
+  onViewModeChange,
+  actions
+}) => {
+  const onTabSelect = useCallback(
+    (_, data) => {
+      onViewModeChange(data.value);
+    },
+    [onViewModeChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: style["view-toggle-bar"], children: [
+    /* @__PURE__ */ jsxs(
+      TabList,
+      {
+        size: "small",
+        selectedValue: viewMode,
+        onTabSelect,
+        className: style["view-toggle-tabs"],
+        children: [
+          /* @__PURE__ */ jsx(Tab, { value: "editor", className: style["view-toggle-tab"], children: "TSP" }),
+          /* @__PURE__ */ jsx(Tab, { value: "both", className: style["view-toggle-tab"], children: "Both" }),
+          /* @__PURE__ */ jsx(Tab, { value: "output", className: style["view-toggle-tab"], children: "Output" })
+        ]
+      }
+    ),
+    actions && /* @__PURE__ */ jsx("div", { className: style["view-toggle-actions"], children: actions })
+  ] });
+};
+
 const Playground = (props) => {
   const { host, onSave } = props;
   const editorRef = useRef(void 0);
@@ -2753,53 +2937,66 @@ const Playground = (props) => {
       }
     };
   }, [host, typespecModel, onContentChange]);
-  return /* @__PURE__ */ jsx(PlaygroundContextProvider, { value: playgroundContext, children: /* @__PURE__ */ jsxs("div", { className: style$2["layout"], children: [
+  const isMobile = useIsMobile();
+  const [viewMode, setViewMode] = useState("editor");
+  useEffect(() => {
+    if (!isMobile) {
+      setViewMode("both");
+    } else {
+      setViewMode("editor");
+    }
+  }, [isMobile]);
+  const commandBar = /* @__PURE__ */ jsx(
+    EditorCommandBar,
+    {
+      host,
+      selectedEmitter,
+      onSelectedEmitterChange,
+      samples: props.samples,
+      selectedSampleName,
+      onSelectedSampleNameChange,
+      saveCode,
+      formatCode,
+      fileBug: props.onFileBug ? fileBug : void 0,
+      commandBarItems: props.commandBarItems
+    }
+  );
+  const editorPanel = /* @__PURE__ */ jsx(
+    EditorPanel,
+    {
+      host,
+      model: typespecModel,
+      actions: typespecEditorActions,
+      editorOptions: props.editorOptions,
+      onMount: onTypeSpecEditorMount,
+      selectedEmitter,
+      compilerOptions,
+      onCompilerOptionsChange,
+      onSelectedEmitterChange,
+      commandBar: isMobile ? void 0 : commandBar
+    }
+  );
+  const outputPanel = /* @__PURE__ */ jsx(
+    OutputView,
+    {
+      compilationState,
+      editorOptions: props.editorOptions,
+      viewers: props.viewers,
+      fileViewers: selectedEmitter ? props.emitterViewers?.[selectedEmitter] : void 0,
+      selectedViewer,
+      onViewerChange: onSelectedViewerChange,
+      viewerState,
+      onViewerStateChange
+    }
+  );
+  const mainContent = viewMode === "both" ? /* @__PURE__ */ jsxs(SplitPane, { initialSizes: ["50%", "50%"], children: [
+    /* @__PURE__ */ jsx(Pane, { className: style$3["edit-pane"], children: editorPanel }),
+    /* @__PURE__ */ jsx(Pane, { children: outputPanel })
+  ] }) : viewMode === "editor" ? /* @__PURE__ */ jsx("div", { className: style$3["single-pane"], children: editorPanel }) : /* @__PURE__ */ jsx("div", { className: style$3["single-pane"], children: outputPanel });
+  return /* @__PURE__ */ jsx(PlaygroundContextProvider, { value: playgroundContext, children: /* @__PURE__ */ jsxs("div", { className: style$3["layout"], children: [
+    isMobile && /* @__PURE__ */ jsx(ViewToggle, { viewMode, onViewModeChange: setViewMode, actions: commandBar }),
     /* @__PURE__ */ jsxs(SplitPane, { sizes: verticalPaneSizes, onChange: onVerticalPaneSizeChange, split: "horizontal", children: [
-      /* @__PURE__ */ jsx(Pane, { children: /* @__PURE__ */ jsxs(SplitPane, { initialSizes: ["50%", "50%"], children: [
-        /* @__PURE__ */ jsx(Pane, { className: style$2["edit-pane"], children: /* @__PURE__ */ jsx(
-          EditorPanel,
-          {
-            host,
-            model: typespecModel,
-            actions: typespecEditorActions,
-            editorOptions: props.editorOptions,
-            onMount: onTypeSpecEditorMount,
-            selectedEmitter,
-            compilerOptions,
-            onCompilerOptionsChange,
-            onSelectedEmitterChange,
-            commandBar: /* @__PURE__ */ jsx(
-              EditorCommandBar,
-              {
-                host,
-                selectedEmitter,
-                onSelectedEmitterChange,
-                samples: props.samples,
-                selectedSampleName,
-                onSelectedSampleNameChange,
-                saveCode,
-                formatCode,
-                fileBug: props.onFileBug ? fileBug : void 0,
-                commandBarButtons: props.commandBarButtons,
-                documentationUrl: props.links?.documentationUrl
-              }
-            )
-          }
-        ) }),
-        /* @__PURE__ */ jsx(Pane, { children: /* @__PURE__ */ jsx(
-          OutputView,
-          {
-            compilationState,
-            editorOptions: props.editorOptions,
-            viewers: props.viewers,
-            fileViewers: selectedEmitter ? props.emitterViewers?.[selectedEmitter] : void 0,
-            selectedViewer,
-            onViewerChange: onSelectedViewerChange,
-            viewerState,
-            onViewerStateChange
-          }
-        ) })
-      ] }) }),
+      /* @__PURE__ */ jsx(Pane, { children: mainContent }),
       /* @__PURE__ */ jsx(Pane, { minSize: 30, children: /* @__PURE__ */ jsx(
         ProblemPane,
         {