@typespec/playground 0.11.0-dev.1 → 0.11.0

package/dist/react/index.js

@@ -1,7 +1,8 @@
-import require$$0, { createContext, useContext, useRef, useEffect, useMemo, memo, useCallback, useState, useId as useId$1 } from 'react';
+import require$$0, { createContext, useContext, memo, useCallback, useRef, useEffect, useMemo, useState, useId as useId$1 } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { editor, Uri, MarkerSeverity, KeyMod, KeyCode } from 'monaco-editor';
 import { mergeClasses, Popover, PopoverTrigger, PopoverSurface, Title3, Table, TableHeader, TableRow, TableHeaderCell, TableBody, TableCell, Select, useId, Label, Checkbox, RadioGroup, Radio, Input, Switch, Divider, Dialog, DialogTrigger, ToolbarButton, DialogSurface, DialogBody, DialogTitle, DialogContent, Toolbar, Tooltip, Link, TabList, Tab, Button, 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 { Settings24Regular, Save16Regular, Broom16Filled, Bug16Regular, FolderListRegular, DataLineRegular, ErrorCircle16Filled, Warning16Filled, ChevronDown16Regular } from '@fluentui/react-icons';
 import debounce from 'debounce';
@@ -10,7 +11,6 @@ import { a as resolveVirtualPath, p as printDebugInfo, d as debugGlobals, g as g
 import { ErrorBoundary } from 'react-error-boundary';
 import { TypeGraph } from '@typespec/html-program-viewer/react';
 import '@typespec/html-program-viewer/style.css';
-import { getSourceLocation } from '@typespec/compiler';
 import { createRoot } from 'react-dom/client';
 import { createUrlStateStorage } from '../state-storage.js';
 
@@ -24,6 +24,71 @@ function usePlaygroundContext() {
   return context;
 }
 
+const list = "_list_wrnwm_1";
+const item$1 = "_item_wrnwm_4";
+const style$a = {
+	list: list,
+	item: item$1,
+	"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
+}) => {
+  const handleItemSelected = useCallback(
+    (diagnostic) => {
+      onDiagnosticSelected?.(diagnostic);
+    },
+    [onDiagnosticSelected]
+  );
+  if (diagnostics.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: style$a["list"], children: "No errors" });
+  }
+  return /* @__PURE__ */ jsx("div", { className: style$a["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 /* @__PURE__ */ jsxs("div", { tabIndex: 0, className: style$a["item"], onClick: handleClick, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: mergeClasses(
+          (style$a[diagnostic.severity === "error" ? "item--error" : "item--warning"])
+        ),
+        children: diagnostic.severity
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: style$a["item-code"], children: diagnostic.code }),
+    /* @__PURE__ */ jsx("div", { className: style$a["item-message"], children: diagnostic.message }),
+    /* @__PURE__ */ jsx("div", { className: style$a["item-loc"], children: /* @__PURE__ */ jsx(DiagnosticTargetLink, { target: diagnostic.target }) })
+  ] });
+};
+const DiagnosticTargetLink = memo(({ target }) => {
+  if (target === void 0) {
+    return /* @__PURE__ */ jsx("span", { title: "Diagnostic didn't report a target. This is a bug on the emitter.", children: "No target" });
+  }
+  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
+  ] });
+});
+
 const Editor = ({ model, options, actions, onMount }) => {
   const editorContainerRef = useRef(null);
   const editorRef = useRef(null);
@@ -68,18 +133,18 @@ function useMonacoModel(uri, language) {
 }
 
 const footer = "_footer_e6dic_1";
-const style$a = {
+const style$9 = {
 	footer: footer,
 	"footer-item": "_footer-item_e6dic_9"
 };
 
 const FooterItem = ({ children, link, className }) => {
-  const resolvedClassName = mergeClasses(style$a["footer-item"], className);
+  const resolvedClassName = mergeClasses(style$9["footer-item"], className);
   return link ? /* @__PURE__ */ jsx("a", { className: resolvedClassName, href: link, target: "_blank", rel: "noopener noreferrer", children }) : /* @__PURE__ */ jsx("div", { className: resolvedClassName, children });
 };
 
 const button = "_button_1c15n_4";
-const style$9 = {
+const style$8 = {
 	"version-item": "_version-item_1c15n_1",
 	button: button
 };
@@ -88,8 +153,8 @@ const FooterVersionItem = memo(({ versionSelector }) => {
   const { host } = usePlaygroundContext();
   const latest = versionSelector?.latest;
   const selected = versionSelector?.selected ?? host.compiler.MANIFEST.version;
-  return /* @__PURE__ */ jsx(FooterItem, { className: style$9["version-item"], children: /* @__PURE__ */ jsxs(Popover, { children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsxs("div", { className: style$9["button"], children: [
+  return /* @__PURE__ */ jsx(FooterItem, { className: style$8["version-item"], children: /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsxs("div", { className: style$8["button"], children: [
       /* @__PURE__ */ jsx("span", { children: "Version " }),
       /* @__PURE__ */ jsx("span", { children: selected }),
       /* @__PURE__ */ jsx("span", { children: latest ? latest === selected ? " (latest)" : " (old)" : "" })
@@ -135,7 +200,7 @@ const VersionSelector = memo(({ versions, selected, latest, onChange }) => {
 });
 
 const Footer = ({ className, children }) => {
-  return /* @__PURE__ */ jsx("div", { className: mergeClasses(style$a.footer, className), children });
+  return /* @__PURE__ */ jsx("div", { className: mergeClasses(style$9.footer, className), children });
 };
 
 function useControllableValue(controlledValue, defaultUncontrolledValue, onChange) {
@@ -1896,10 +1961,10 @@ const SamplesDropdown = ({
 };
 
 const form = "_form_sqeas_1";
-const item$1 = "_item_sqeas_7";
-const style$8 = {
+const item = "_item_sqeas_7";
+const style$7 = {
 	form: form,
-	item: item$1,
+	item: item,
 	"switch": "_switch_sqeas_13"
 };
 
@@ -1925,8 +1990,8 @@ const EmitterOptionsForm = ({
     return /* @__PURE__ */ jsx(Fragment, { children: '"No options"' });
   }
   const entries = Object.entries(emitterOptionsSchema);
-  return /* @__PURE__ */ jsx("div", { className: style$8["form"], children: entries.map(([key, value]) => {
-    return /* @__PURE__ */ jsx("div", { className: style$8["form-item"], children: value.type === "array" ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: style$7["form"], children: entries.map(([key, value]) => {
+    return /* @__PURE__ */ jsx("div", { className: style$7["form-item"], children: value.type === "array" ? /* @__PURE__ */ jsx(
       JsonSchemaArrayPropertyInput,
       {
         emitterOptions: options[library.name] ?? {},
@@ -1977,7 +2042,7 @@ const JsonSchemaArrayPropertyInput = ({
     return JsonSchemaPropertyInput({ emitterOptions, name, prop: itemsSchema, onChange });
   }
   const itemsEnum = itemsSchema.enum;
-  return /* @__PURE__ */ jsxs("div", { className: style$8["item"], children: [
+  return /* @__PURE__ */ jsxs("div", { className: style$7["item"], children: [
     /* @__PURE__ */ jsx(Label, { htmlFor: inputId, title: name, children: prettyName }),
     itemsEnum.map((x) => /* @__PURE__ */ jsx(
       Checkbox,
@@ -2012,7 +2077,7 @@ const JsonSchemaPropertyInput = ({
       return /* @__PURE__ */ jsx(
         Switch,
         {
-          className: style$8["switch"],
+          className: style$7["switch"],
           label: prettyName,
           labelPosition: "above",
           checked: value,
@@ -2021,7 +2086,7 @@ const JsonSchemaPropertyInput = ({
       );
     case "string":
     default:
-      return /* @__PURE__ */ jsxs("div", { className: style$8["item"], children: [
+      return /* @__PURE__ */ jsxs("div", { className: style$7["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 })
       ] });
@@ -2149,7 +2214,7 @@ const CompilerSettingsDialogButton = ({
 const bar = "_bar_15c2c_1";
 const divider = "_divider_15c2c_5";
 const spacer = "_spacer_15c2c_9";
-const style$7 = {
+const style$6 = {
 	bar: bar,
 	divider: divider,
 	spacer: spacer
@@ -2176,7 +2241,7 @@ const EditorCommandBar = ({
     () => Object.values(host.libraries).filter((x) => x.isEmitter).map((x) => x.name),
     [host.libraries]
   );
-  return /* @__PURE__ */ jsx("div", { className: style$7["bar"], children: /* @__PURE__ */ jsxs(Toolbar, { children: [
+  return /* @__PURE__ */ jsx("div", { className: style$6["bar"], children: /* @__PURE__ */ jsxs(Toolbar, { children: [
     /* @__PURE__ */ jsx(Tooltip, { content: "Save", relationship: "description", withArrow: true, children: /* @__PURE__ */ jsx(ToolbarButton, { "aria-label": "Save", icon: /* @__PURE__ */ jsx(Save16Regular, {}), onClick: saveCode }) }),
     /* @__PURE__ */ jsx(Tooltip, { content: "Format", relationship: "description", withArrow: true, children: /* @__PURE__ */ jsx(ToolbarButton, { "aria-label": "Format", icon: /* @__PURE__ */ jsx(Broom16Filled, {}), onClick: formatCode }) }),
     samples && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -2188,7 +2253,7 @@ const EditorCommandBar = ({
           onSelectedSampleNameChange
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: style$7["spacer"] })
+      /* @__PURE__ */ jsx("div", { className: style$6["spacer"] })
     ] }),
     /* @__PURE__ */ jsx(
       EmitterDropdown,
@@ -2199,10 +2264,10 @@ const EditorCommandBar = ({
       }
     ),
     documentation && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: style$7["spacer"] }),
+      /* @__PURE__ */ jsx("div", { className: style$6["spacer"] }),
       documentation
     ] }),
-    /* @__PURE__ */ jsx("div", { className: style$7["divider"] }),
+    /* @__PURE__ */ jsx("div", { className: style$6["divider"] }),
     commandBarButtons,
     bugButton,
     /* @__PURE__ */ jsx(
@@ -2264,7 +2329,7 @@ const OutputEditor = ({ filename, value, editorOptions }) => {
   return /* @__PURE__ */ jsx(Editor, { model, options });
 };
 
-const style$6 = {
+const style$5 = {
 	"file-output": "_file-output_jzw6j_1",
 	"viewer-selector": "_viewer-selector_jzw6j_5"
 };
@@ -2290,8 +2355,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$5["file-output"], children: [
+    /* @__PURE__ */ jsx("div", { className: style$5["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 })
   ] });
 };
@@ -2303,7 +2368,7 @@ const RawFileViewer = {
 
 const tabs = "_tabs_1x6x2_1";
 const tab = "_tab_1x6x2_1";
-const style$5 = {
+const style$4 = {
 	tabs: tabs,
 	tab: tab,
 	"tab--selected": "_tab--selected_1x6x2_18"
@@ -2320,12 +2385,12 @@ const OutputTabs = ({
     },
     [onSelect]
   );
-  return /* @__PURE__ */ jsx(TabList, { selectedValue: selected, onTabSelect, className: style$5["tabs"], children: filenames.map((filename) => {
+  return /* @__PURE__ */ jsx(TabList, { selectedValue: selected, onTabSelect, className: style$4["tabs"], children: filenames.map((filename) => {
     return /* @__PURE__ */ jsx(
       Tab,
       {
         value: filename,
-        className: mergeClasses(style$5["tab"], filename === selected && style$5["tab--selected"]),
+        className: mergeClasses(style$4["tab"], filename === selected && style$4["tab--selected"]),
         children: filename
       },
       filename
@@ -2333,7 +2398,7 @@ const OutputTabs = ({
   }) });
 };
 
-const style$4 = {
+const style$3 = {
 	"output-view": "_output-view_omce4_1",
 	"file-viewer": "_file-viewer_omce4_6",
 	"output-content": "_output-content_omce4_12",
@@ -2377,9 +2442,9 @@ const FileViewerComponent = ({
   if (outputFiles.length === 0) {
     return /* @__PURE__ */ jsx(Fragment, { children: "No files emitted." });
   }
-  return /* @__PURE__ */ jsxs("div", { className: style$4["file-viewer"], children: [
+  return /* @__PURE__ */ jsxs("div", { className: style$3["file-viewer"], children: [
     /* @__PURE__ */ jsx(OutputTabs, { filenames: outputFiles, selected: filename, onSelect: handleTabSelection }),
-    /* @__PURE__ */ jsx("div", { className: style$4["file-viewer-content"], children: /* @__PURE__ */ jsx(FileOutput, { filename, content, viewers: fileViewers }) })
+    /* @__PURE__ */ jsx("div", { className: style$3["file-viewer-content"], children: /* @__PURE__ */ jsx(FileOutput, { filename, content, viewers: fileViewers }) })
   ] });
 };
 function createFileViewer(fileViewers) {
@@ -2409,7 +2474,7 @@ const TypeGraphViewerComponent = ({
     },
     [viewerState, onViewerStateChange]
   );
-  return /* @__PURE__ */ jsx("div", { className: style$4["type-graph-viewer"], children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: style$3["type-graph-viewer"], children: /* @__PURE__ */ jsx(
     TypeGraph,
     {
       program,
@@ -2491,8 +2556,8 @@ const OutputViewInternal = ({
   const viewer = useMemo(() => {
     return viewers.programViewers[selected];
   }, [viewers.programViewers, selected]);
-  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(
+  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(
       viewer.render,
       {
         program: compilationResult.program,
@@ -2501,23 +2566,23 @@ const OutputViewInternal = ({
         onViewerStateChange
       }
     ) }) }),
-    /* @__PURE__ */ jsx("div", { className: style$4["viewer-tabs-container"], children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: style$3["viewer-tabs-container"], children: /* @__PURE__ */ jsx(
       TabList,
       {
         vertical: true,
         size: "large",
         selectedValue: selected,
         onTabSelect,
-        className: style$4["viewer-tabs"],
+        className: style$3["viewer-tabs"],
         children: viewerList.map((viewer2) => {
-          return /* @__PURE__ */ jsx(Tab, { value: viewer2.key, className: style$4["viewer-tab"], children: /* @__PURE__ */ jsx("span", { title: viewer2.label, children: viewer2.icon }) }, viewer2.key);
+          return /* @__PURE__ */ jsx(Tab, { value: viewer2.key, className: style$3["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$4["viewer-error"], children: [
+  return /* @__PURE__ */ jsxs("div", { role: "alert", className: style$3["viewer-error"], children: [
     /* @__PURE__ */ jsx("h2", { children: "Something went wrong:" }),
     /* @__PURE__ */ jsx("div", { style: { color: "red" }, children: error.toString() }),
     /* @__PURE__ */ jsx(Button, { onClick: resetErrorBoundary, children: "Try again" })
@@ -2525,76 +2590,11 @@ function fallbackRender({ error, resetErrorBoundary }) {
 }
 
 const layout = "_layout_l03ni_1";
-const style$3 = {
+const style$2 = {
 	layout: layout,
 	"edit-pane": "_edit-pane_l03ni_9"
 };
 
-const list = "_list_wrnwm_1";
-const item = "_item_wrnwm_4";
-const style$2 = {
-	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
-}) => {
-  const handleItemSelected = useCallback(
-    (diagnostic) => {
-      onDiagnosticSelected?.(diagnostic);
-    },
-    [onDiagnosticSelected]
-  );
-  if (diagnostics.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: style$2["list"], children: "No errors" });
-  }
-  return /* @__PURE__ */ jsx("div", { className: style$2["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 /* @__PURE__ */ jsxs("div", { tabIndex: 0, className: style$2["item"], onClick: handleClick, children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: mergeClasses(
-          (style$2[diagnostic.severity === "error" ? "item--error" : "item--warning"])
-        ),
-        children: diagnostic.severity
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: style$2["item-code"], children: diagnostic.code }),
-    /* @__PURE__ */ jsx("div", { className: style$2["item-message"], children: diagnostic.message }),
-    /* @__PURE__ */ jsx("div", { className: style$2["item-loc"], children: /* @__PURE__ */ jsx(DiagnosticTargetLink, { target: diagnostic.target }) })
-  ] });
-};
-const DiagnosticTargetLink = memo(({ target }) => {
-  if (target === void 0) {
-    return /* @__PURE__ */ jsx("span", { title: "Diagnostic didn't report a target. This is a bug on the emitter.", children: "No target" });
-  }
-  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
-  ] });
-});
-
 const header = "_header_1qhql_1";
 const style$1 = {
 	header: header,
@@ -2961,10 +2961,10 @@ const Playground = (props) => {
       }
     };
   }, [host, typespecModel, onContentChange]);
-  return /* @__PURE__ */ jsx(PlaygroundContextProvider, { value: playgroundContext, children: /* @__PURE__ */ jsxs("div", { className: style$3["layout"], children: [
+  return /* @__PURE__ */ jsx(PlaygroundContextProvider, { value: playgroundContext, children: /* @__PURE__ */ jsxs("div", { className: style$2["layout"], children: [
     /* @__PURE__ */ jsxs(SplitPane, { sizes: verticalPaneSizes, onChange: onVerticalPaneSizeChange, split: "horizontal", children: [
       /* @__PURE__ */ jsx(Pane, { children: /* @__PURE__ */ jsxs(SplitPane, { initialSizes: ["50%", "50%"], children: [
-        /* @__PURE__ */ jsxs(Pane, { className: style$3["edit-pane"], children: [
+        /* @__PURE__ */ jsxs(Pane, { className: style$2["edit-pane"], children: [
           /* @__PURE__ */ jsx(
             EditorCommandBar,
             {
@@ -3209,4 +3209,4 @@ function createStandalonePlaygroundStateStorage() {
   };
 }
 
-export { Editor, Footer, FooterItem, FooterVersionItem, Playground, StandalonePlayground, createReactPlayground, createStandalonePlaygroundStateStorage, renderReactPlayground, useMonacoModel, usePlaygroundContext, usePlaygroundState };
+export { DiagnosticList, Editor, Footer, FooterItem, FooterVersionItem, Playground, StandalonePlayground, createReactPlayground, createStandalonePlaygroundStateStorage, renderReactPlayground, useMonacoModel, usePlaygroundContext, usePlaygroundState };

package/dist/src/react/index.d.ts

@@ -1,4 +1,6 @@
 export { usePlaygroundContext } from './context/index.js';
+export { DiagnosticList } from './diagnostic-list/diagnostic-list.js';
+export type { DiagnosticListProps } from './diagnostic-list/diagnostic-list.js';
 export { Editor, useMonacoModel, type EditorProps } from './editor.js';
 export { Footer, FooterItem, FooterVersionItem, type FooterItemProps, type FooterProps, type FooterVersionItemProps, type VersionSelectorProps, type VersionSelectorVersion, } from './footer/index.js';
 export { Playground } from './playground.js';

package/dist/src/react/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AACvE,OAAO,EACL,MAAM,EACN,UAAU,EACV,iBAAiB,EACjB,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,sBAAsB,EAC3B,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,GAC5B,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC3E,OAAO,EACL,oBAAoB,EACpB,qBAAqB,EACrB,sCAAsC,EACtC,qBAAqB,GACtB,MAAM,iBAAiB,CAAC;AACzB,mBAAmB,YAAY,CAAC;AAChC,OAAO,EAAE,kBAAkB,EAAE,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,YAAY,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAChF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AACvE,OAAO,EACL,MAAM,EACN,UAAU,EACV,iBAAiB,EACjB,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,sBAAsB,EAC3B,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,GAC5B,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC3E,OAAO,EACL,oBAAoB,EACpB,qBAAqB,EACrB,sCAAsC,EACtC,qBAAqB,GACtB,MAAM,iBAAiB,CAAC;AACzB,mBAAmB,YAAY,CAAC;AAChC,OAAO,EAAE,kBAAkB,EAAE,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/style.css

@@ -1,3 +1,32 @@
+._list_wrnwm_1 {
+}
+
+._item_wrnwm_4 {
+  cursor: pointer;
+  display: flex;
+  gap: 10px;
+  padding: 0 10px;
+}
+
+._item_wrnwm_4:hover {
+  background-color: var(--colorNeutralBackground3Hover);
+}
+
+._item--error_wrnwm_15 {
+  color: var(--colorStatusDangerForeground1);
+}
+
+._item--warning_wrnwm_19 {
+  color: var(--colorStatusWarningForeground1);
+}
+
+._item-code_wrnwm_23 {
+  color: var(--colorBrandForeground2);
+}
+
+._item-loc_wrnwm_27 {
+  color: var(--colorNeutralForeground3);
+}
 ._footer_e6dic_1 {
   grid-area: footer;
   display: flex;
@@ -246,35 +275,6 @@
   display: flex;
   flex-direction: column;
 }
-._list_wrnwm_1 {
-}
-
-._item_wrnwm_4 {
-  cursor: pointer;
-  display: flex;
-  gap: 10px;
-  padding: 0 10px;
-}
-
-._item_wrnwm_4:hover {
-  background-color: var(--colorNeutralBackground3Hover);
-}
-
-._item--error_wrnwm_15 {
-  color: var(--colorStatusDangerForeground1);
-}
-
-._item--warning_wrnwm_19 {
-  color: var(--colorStatusWarningForeground1);
-}
-
-._item-code_wrnwm_23 {
-  color: var(--colorBrandForeground2);
-}
-
-._item-loc_wrnwm_27 {
-  color: var(--colorNeutralForeground3);
-}
 ._header_1qhql_1 {
   padding: 5px;
   cursor: pointer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typespec/playground",
-  "version": "0.11.0-dev.1",
+  "version": "0.11.0",
   "author": "Microsoft Corporation",
   "description": "TypeSpec playground UI components.",
   "homepage": "https://typespec.io",
@@ -61,15 +61,6 @@
   "dependencies": {
     "@fluentui/react-components": "~9.69.0",
     "@fluentui/react-icons": "^2.0.292",
-    "@typespec/bundler": "^0.4.3 || >=0.5.0-dev <0.5.0",
-    "@typespec/compiler": "^1.3.0",
-    "@typespec/html-program-viewer": "^0.73.0 || >=0.74.0-dev <0.74.0",
-    "@typespec/http": "^1.3.0",
-    "@typespec/openapi": "^1.3.0",
-    "@typespec/openapi3": "^1.3.0",
-    "@typespec/protobuf": "^0.73.0 || >=0.74.0-dev <0.74.0",
-    "@typespec/rest": "^0.73.0 || >=0.74.0-dev <0.74.0",
-    "@typespec/versioning": "^0.73.0 || >=0.74.0-dev <0.74.0",
     "clsx": "^2.1.1",
     "debounce": "~2.2.0",
     "lzutf8": "0.6.3",
@@ -79,7 +70,16 @@
     "react-error-boundary": "^6.0.0",
     "swagger-ui-dist": "^5.20.1",
     "vscode-languageserver": "~9.0.1",
-    "vscode-languageserver-textdocument": "~1.0.12"
+    "vscode-languageserver-textdocument": "~1.0.12",
+    "@typespec/bundler": "^0.4.4",
+    "@typespec/compiler": "^1.4.0",
+    "@typespec/html-program-viewer": "^0.74.0",
+    "@typespec/http": "^1.4.0",
+    "@typespec/openapi": "^1.4.0",
+    "@typespec/openapi3": "^1.4.0",
+    "@typespec/protobuf": "^0.74.0",
+    "@typespec/versioning": "^0.74.0",
+    "@typespec/rest": "^0.74.0"
   },
   "devDependencies": {
     "@babel/core": "^7.26.10",
@@ -91,7 +91,6 @@
     "@types/react": "~18.3.11",
     "@types/react-dom": "~18.3.0",
     "@types/swagger-ui-dist": "~3.30.5",
-    "@typespec/bundler": "^0.4.3 || >=0.5.0-dev <0.5.0",
     "@vitejs/plugin-react": "~4.7.0",
     "c8": "^10.1.3",
     "cross-env": "~10.0.0",
@@ -102,9 +101,9 @@
     "vite": "^7.0.5",
     "vite-plugin-checker": "^0.10.1",
     "vite-plugin-dts": "4.5.4",
-    "@typespec/react-components": "^0.57.0"
+    "@typespec/react-components": "^0.57.0",
+    "@typespec/bundler": "^0.4.4"
   },
-  "peerDependencies": {},
   "scripts": {
     "clean": "rimraf ./dist ./dist-dev ./temp ./typespecContents.json",
     "build": "vite build",