@typespec/playground 0.13.1-dev.0 → 0.14.0-dev.2

package/dist/react/index.js

@@ -1,10 +1,10 @@
-import require$$0, { createContext, useContext, memo, useCallback, useRef, useEffect, useMemo, useState, useId as useId$1 } from 'react';
+import require$$0, { createContext, useContext, memo, useCallback, useRef, useEffect, useMemo, useState, useId } 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, 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, 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 { getSourceLocation } from '@typespec/compiler';
 import { editor, Uri, MarkerSeverity, KeyMod, KeyCode } from 'monaco-editor';
 import { $ } from '@typespec/compiler/typekit';
-import { DocumentBulletList24Regular, Dismiss24Regular, Save16Regular, Broom16Filled, Bug16Regular, SettingsRegular, FolderListRegular, DataLineRegular, ErrorCircle16Filled, Warning16Filled, ChevronDown16Regular } from '@fluentui/react-icons';
+import { ChevronDownRegular, ChevronRightRegular, DocumentBulletList24Regular, Dismiss24Regular, Save16Regular, Broom16Filled, Bug16Regular, 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$e = {
+const style$h = {
 	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$e["list"], children: "No errors" });
+    return /* @__PURE__ */ jsx("div", { className: style$h["list"], children: "No errors" });
   }
-  return /* @__PURE__ */ jsx("div", { className: style$e["list"], children: diagnostics.map((x, i) => {
+  return /* @__PURE__ */ jsx("div", { className: style$h["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$e["item"], onClick: handleClick, children: [
+  return /* @__PURE__ */ jsxs("div", { tabIndex: 0, className: style$h["item"], onClick: handleClick, children: [
     /* @__PURE__ */ jsx(
       "div",
       {
         className: mergeClasses(
-          (style$e[diagnostic.severity === "error" ? "item--error" : "item--warning"])
+          (style$h[diagnostic.severity === "error" ? "item--error" : "item--warning"])
         ),
         children: diagnostic.severity
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: style$e["item-code"], children: diagnostic.code }),
-    /* @__PURE__ */ jsx("div", { className: style$e["item-message"], children: diagnostic.message }),
-    /* @__PURE__ */ jsx("div", { className: style$e["item-loc"], children: /* @__PURE__ */ jsx(DiagnosticTargetLink, { target: diagnostic.target }) })
+    /* @__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 }) })
   ] });
 };
 const DiagnosticTargetLink = memo(({ target }) => {
@@ -134,18 +134,18 @@ function useMonacoModel(uri, language) {
 }
 
 const footer = "_footer_e6dic_1";
-const style$d = {
+const style$g = {
 	footer: footer,
 	"footer-item": "_footer-item_e6dic_9"
 };
 
 const FooterItem = ({ children, link, className }) => {
-  const resolvedClassName = mergeClasses(style$d["footer-item"], className);
+  const resolvedClassName = mergeClasses(style$g["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$c = {
+const style$f = {
 	"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$c["version-item"], children: /* @__PURE__ */ jsxs(Popover, { children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsxs("div", { className: style$c["button"], children: [
+  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: [
       /* @__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$d.footer, className), children });
+  return /* @__PURE__ */ jsx("div", { className: mergeClasses(style$g.footer, className), children });
 };
 
 function useControllableValue(controlledValue, defaultUncontrolledValue, onChange) {
@@ -960,6 +960,258 @@ function assertsSize(size, sum, defaultValue = Infinity) {
   return defaultValue;
 }
 
+function useTreeControls({ onSetExpanded }) {
+  const expanded = useRef(/* @__PURE__ */ new Set()).current;
+  const [rerender, setRerender] = useState(0);
+  const toggleExpand = useCallback(
+    (key) => {
+      if (expanded.has(key)) {
+        expanded.delete(key);
+      } else {
+        expanded.add(key);
+      }
+      onSetExpanded?.(expanded);
+      setRerender((x) => x + 1);
+    },
+    [expanded]
+  );
+  const expand = useCallback(
+    (key) => {
+      if (expanded.has(key)) {
+        return;
+      }
+      expanded.add(key);
+      onSetExpanded?.(expanded);
+      setRerender((x) => x + 1);
+    },
+    [expanded]
+  );
+  const collapse = useCallback(
+    (key) => {
+      if (!expanded.has(key)) {
+        return;
+      }
+      expanded.delete(key);
+      onSetExpanded?.(expanded);
+      setRerender((x) => x + 1);
+    },
+    [expanded]
+  );
+  return useMemo(
+    () => ({ expanded: new Set(expanded), toggleExpand, expand, collapse }),
+    [expanded, toggleExpand, expand, collapse, expanded, rerender]
+  );
+}
+
+const tree = "_tree_16t0l_1";
+const focus = "_focus_16t0l_18";
+const active = "_active_16t0l_22";
+const caret = "_caret_16t0l_26";
+const icon = "_icon_16t0l_33";
+const style$e = {
+	tree: tree,
+	"tree-row": "_tree-row_16t0l_4",
+	focus: focus,
+	active: active,
+	caret: caret,
+	icon: icon};
+
+const INDENT_SIZE = 8;
+function TreeViewRow({ id, row, active, focussed, activate, icon: Icon }) {
+  const paddingLeft = row.depth * INDENT_SIZE;
+  const onClick = useCallback(() => activate(row), [activate, row]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      id,
+      role: "treeitem",
+      style: { paddingLeft },
+      className: mergeClasses(
+        style$e["tree-row"],
+        active && style$e["active"],
+        focussed && style$e["focus"]
+      ),
+      "aria-selected": active,
+      "aria-expanded": row.expanded,
+      "aria-posinset": row.localIndex,
+      "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: "label", title: row.item.name, children: row.item.name })
+      ]
+    }
+  );
+}
+const Caret = ({ row }) => {
+  const toggleExpand = useCallback(
+    (evt) => {
+      evt.stopPropagation();
+      row.toggleExpand();
+    },
+    [row]
+  );
+  if (row.hasChildren) {
+    return row.expanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDownRegular, { onClick: toggleExpand }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRightRegular, { onClick: toggleExpand });
+  } else {
+    return null;
+  }
+};
+
+function Tree({
+  tree,
+  selected,
+  onSelect,
+  onSetExpanded,
+  nodeIcon,
+  selectionMode = "none"
+}) {
+  const id = useId();
+  const { expanded, toggleExpand, expand, collapse } = useTreeControls({
+    onSetExpanded
+  });
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const [selectedKey, setSelectedKey] = useControllableValue(selected, void 0, onSelect);
+  const rows = useMemo(
+    () => getTreeRowsForNode(expanded, toggleExpand, tree),
+    [expanded, toggleExpand, tree]
+  );
+  const parentMap = useMemo(() => computeParent(tree), [tree]);
+  useEffect(() => {
+    expand(selectedKey);
+    let current = parentMap.get(selectedKey);
+    while (current) {
+      expand(current);
+      current = parentMap.get(current);
+    }
+  }, [expand, selectedKey, parentMap]);
+  const activateRow = useCallback(
+    (row) => {
+      setFocusedIndex(row.index);
+      if (row.hasChildren) {
+        toggleExpand(row.id);
+        if (selectionMode === "single") {
+          setSelectedKey(row.id);
+        }
+      } else if (selectionMode === "none" || selectedKey === row.id) {
+        toggleExpand(row.id);
+      } else {
+        expand(row.id);
+        if (selectionMode === "single") {
+          setSelectedKey(row.id);
+        }
+      }
+    },
+    [selectionMode, selectedKey, toggleExpand, expand, setSelectedKey]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      const curTreeRow = rows[focusedIndex];
+      switch (event.code) {
+        case "ArrowDown":
+          setFocusedIndex((focusedIndex + 1) % rows.length);
+          event.preventDefault();
+          break;
+        case "ArrowUp":
+          setFocusedIndex((focusedIndex - 1) % rows.length);
+          event.preventDefault();
+          break;
+        case "ArrowRight":
+          expand(curTreeRow.id);
+          event.preventDefault();
+          break;
+        case "ArrowLeft":
+          collapse(curTreeRow.id);
+          event.preventDefault();
+          break;
+        case "Space":
+        case "Enter":
+          activateRow(curTreeRow);
+          event.preventDefault();
+          return;
+      }
+    },
+    [setFocusedIndex, focusedIndex, rows, activateRow, expand, collapse]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      id,
+      className: style$e["tree"],
+      tabIndex: 0,
+      role: "tree",
+      onKeyDown: handleKeyDown,
+      onFocus: () => {
+        const row = rows.findIndex((row2) => row2.id === selectedKey);
+        setFocusedIndex(row === -1 ? 0 : row);
+      },
+      onBlur: () => setFocusedIndex(-1),
+      "aria-activedescendant": `${id}-${focusedIndex}`,
+      children: rows.map((row) => {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          TreeViewRow,
+          {
+            id: `${id}-${row.index}`,
+            icon: nodeIcon,
+            focussed: focusedIndex === row.index,
+            row,
+            active: selectionMode === "single" && row.id === selectedKey,
+            activate: activateRow
+          },
+          row.id
+        );
+      })
+    }
+  );
+}
+function getTreeRowsForNode(expandedItems, toggleExpand, node, depth = 0) {
+  const rows = [];
+  if (!node.children) {
+    return [];
+  }
+  for (const [index, child] of node.children.entries()) {
+    const hasChildren = child.hasMore || Boolean(child.children && child.children.length > 0);
+    const id = child.id;
+    const expanded = expandedItems.has(id);
+    rows.push({
+      id,
+      index: -1,
+      item: child,
+      expanded,
+      depth,
+      hasChildren,
+      localIndex: index,
+      toggleExpand: () => {
+        toggleExpand(id);
+      }
+    });
+    if (hasChildren && expanded) {
+      for (const row of getTreeRowsForNode(expandedItems, toggleExpand, child, depth + 1)) {
+        rows.push(row);
+      }
+    }
+    for (let i = 0; i < rows.length; i++) {
+      rows[i].index = i;
+    }
+  }
+  return rows;
+}
+function computeParent(node) {
+  const map = /* @__PURE__ */ new Map();
+  const queue = [node];
+  let current;
+  while (current = queue.pop()) {
+    if (current.children) {
+      for (const child of current.children) {
+        map.set(child.id, current.id);
+        queue.push(child);
+      }
+    }
+  }
+  return map;
+}
+
 const EmitterDropdown = ({
   emitters,
   onSelectedEmitterChange,
@@ -989,7 +1241,7 @@ const EmitterDropdown = ({
   );
 };
 
-const style$b = {
+const style$d = {
 	"samples-grid": "_samples-grid_1dkte_1",
 	"sample-card": "_sample-card_1dkte_8",
 	"sample-card-content": "_sample-card-content_1dkte_26",
@@ -1076,9 +1328,9 @@ const SampleIcon = ({ name }) => {
         );
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: style$b["sample-icon"], style: { backgroundColor: colors.bg }, "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx("svg", { width: "48", height: "48", viewBox: "0 0 48 48", className: style$b["sample-icon-pattern"], children: renderPattern() }),
-    /* @__PURE__ */ jsx("span", { className: style$b["sample-icon-initials"], style: { color: colors.fg }, children: initials })
+  return /* @__PURE__ */ jsxs("div", { className: style$d["sample-icon"], style: { backgroundColor: colors.bg }, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("svg", { width: "48", height: "48", viewBox: "0 0 48 48", className: style$d["sample-icon-pattern"], children: renderPattern() }),
+    /* @__PURE__ */ jsx("span", { className: style$d["sample-icon-initials"], style: { color: colors.fg }, children: initials })
   ] });
 };
 
@@ -1086,7 +1338,7 @@ const SampleCard = ({ name, sample, onSelect }) => {
   return /* @__PURE__ */ jsx(
     Card,
     {
-      className: style$b["sample-card"],
+      className: style$d["sample-card"],
       onClick: () => onSelect(name),
       role: "button",
       tabIndex: 0,
@@ -1096,11 +1348,11 @@ const SampleCard = ({ name, sample, onSelect }) => {
           onSelect(name);
         }
       },
-      children: /* @__PURE__ */ jsxs("div", { className: style$b["sample-card-content"], children: [
+      children: /* @__PURE__ */ jsxs("div", { className: style$d["sample-card-content"], children: [
         /* @__PURE__ */ jsx(SampleIcon, { name }),
-        /* @__PURE__ */ jsxs("div", { className: style$b["sample-card-text"], children: [
-          /* @__PURE__ */ jsx(Text, { as: "h3", weight: "semibold", className: style$b["sample-title"], children: name }),
-          sample.description && /* @__PURE__ */ jsx(Text, { as: "p", className: style$b["sample-description"], children: sample.description })
+        /* @__PURE__ */ jsxs("div", { className: style$d["sample-card-text"], children: [
+          /* @__PURE__ */ jsx(Text, { as: "h3", weight: "semibold", className: style$d["sample-title"], children: name }),
+          sample.description && /* @__PURE__ */ jsx(Text, { as: "p", className: style$d["sample-description"], children: sample.description })
         ] })
       ] })
     }
@@ -1152,7 +1404,7 @@ const SamplesDrawerTrigger = ({
               children: "Sample Gallery"
             }
           ) }),
-          /* @__PURE__ */ jsx(DrawerBody, { children: /* @__PURE__ */ jsx("div", { className: style$b["samples-grid"], children: Object.entries(samples).map(([name, sample]) => /* @__PURE__ */ jsx(SampleCard, { name, sample, onSelect: handleSampleSelect }, name)) }) })
+          /* @__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)) }) })
         ]
       }
     )
@@ -1162,7 +1414,7 @@ const SamplesDrawerTrigger = ({
 const bar = "_bar_15c2c_1";
 const divider = "_divider_15c2c_5";
 const spacer = "_spacer_15c2c_9";
-const style$a = {
+const style$c = {
 	bar: bar,
 	divider: divider,
 	spacer: spacer
@@ -1187,7 +1439,7 @@ const EditorCommandBar = ({
     () => Object.values(host.libraries).filter((x) => x.isEmitter).map((x) => x.name),
     [host.libraries]
   );
-  return /* @__PURE__ */ jsx("div", { className: style$a["bar"], children: /* @__PURE__ */ jsxs(Toolbar, { children: [
+  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: [
@@ -1198,7 +1450,7 @@ const EditorCommandBar = ({
           onSelectedSampleNameChange
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: style$a["spacer"] })
+      /* @__PURE__ */ jsx("div", { className: style$c["spacer"] })
     ] }),
     /* @__PURE__ */ jsx(
       EmitterDropdown,
@@ -1209,10 +1461,10 @@ const EditorCommandBar = ({
       }
     ),
     documentation && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: style$a["spacer"] }),
+      /* @__PURE__ */ jsx("div", { className: style$c["spacer"] }),
       documentation
     ] }),
-    /* @__PURE__ */ jsx("div", { className: style$a["divider"] }),
+    /* @__PURE__ */ jsx("div", { className: style$c["divider"] }),
     commandBarButtons,
     bugButton
   ] }) });
@@ -1270,7 +1522,7 @@ const settings = "_settings_1yvpj_1";
 const section = "_section_1yvpj_7";
 const field = "_field_1yvpj_23";
 const empty = "_empty_1yvpj_33";
-const style$9 = {
+const style$b = {
 	settings: settings,
 	section: section,
 	"section-title": "_section-title_1yvpj_19",
@@ -1281,7 +1533,7 @@ const style$9 = {
 const form = "_form_w9o1o_1";
 const item = "_item_w9o1o_7";
 const description = "_description_w9o1o_13";
-const style$8 = {
+const style$a = {
 	form: form,
 	item: item,
 	description: description,
@@ -1310,9 +1562,9 @@ const EmitterOptionsForm = ({
     return /* @__PURE__ */ jsx(Text, { size: 200, children: "No options available" });
   }
   const entries = Object.entries(emitterOptionsSchema);
-  return /* @__PURE__ */ jsx("div", { className: style$8["form"], children: entries.map(([key, value]) => {
+  return /* @__PURE__ */ jsx("div", { className: style$a["form"], children: entries.map(([key, value]) => {
     const resolved = value.oneOf ? resolveOneOfProperty(value) : value;
-    return /* @__PURE__ */ jsx("div", { className: style$8["form-item"], children: resolved.type === "array" ? /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { className: style$a["form-item"], children: resolved.type === "array" ? /* @__PURE__ */ jsx(
       JsonSchemaArrayPropertyInput,
       {
         emitterOptions: options[library.name] ?? {},
@@ -1354,7 +1606,7 @@ const JsonSchemaArrayPropertyInput = ({
     () => name[0].toUpperCase() + name.slice(1).replace(/-/g, " "),
     [name]
   );
-  const inputId = useId("input");
+  const inputId = useId$1("input");
   const [selectedValues, setSelectedValues] = useState(new Set(value));
   const handleChange = useCallback(
     (_, data, value2) => {
@@ -1374,7 +1626,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$a["item"], children: [
     /* @__PURE__ */ jsx(Label, { htmlFor: inputId, title: name, children: prettyName }),
     itemsEnum.map((x) => /* @__PURE__ */ jsx(
       Checkbox,
@@ -1398,7 +1650,7 @@ const JsonSchemaPropertyInput = ({
     () => name[0].toUpperCase() + name.slice(1).replace(/-/g, " "),
     [name]
   );
-  const inputId = useId("input");
+  const inputId = useId$1("input");
   const value = emitterOptions[name] ?? prop.default;
   const handleChange = useCallback(
     (_, data) => onChange({ name, value: "value" in data ? data.value : data.checked }),
@@ -1406,24 +1658,24 @@ const JsonSchemaPropertyInput = ({
   );
   switch (prop.type) {
     case "boolean":
-      return /* @__PURE__ */ jsxs("div", { className: style$8["item"], children: [
+      return /* @__PURE__ */ jsxs("div", { className: style$a["item"], children: [
         /* @__PURE__ */ jsx(
           Switch,
           {
-            className: style$8["switch"],
+            className: style$a["switch"],
             label: prettyName,
             labelPosition: "above",
             checked: value,
             onChange: handleChange
           }
         ),
-        prop.description && /* @__PURE__ */ jsx(Text, { size: 200, className: style$8["description"], children: prop.description })
+        prop.description && /* @__PURE__ */ jsx(Text, { size: 200, className: style$a["description"], children: prop.description })
       ] });
     case "string":
     default:
-      return /* @__PURE__ */ jsxs("div", { className: style$8["item"], children: [
+      return /* @__PURE__ */ jsxs("div", { className: style$a["item"], children: [
         /* @__PURE__ */ jsx(Label, { htmlFor: inputId, title: name, children: prettyName }),
-        prop.description && /* @__PURE__ */ jsx(Text, { size: 200, className: style$8["description"], children: prop.description }),
+        prop.description && /* @__PURE__ */ jsx(Text, { size: 200, className: style$a["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 })
       ] });
   }
@@ -1507,10 +1759,10 @@ const CompilerSettings = ({
     },
     [onSelectedEmitterChange]
   );
-  return /* @__PURE__ */ jsxs("div", { className: style$9["settings"], children: [
-    /* @__PURE__ */ jsxs("section", { className: style$9["section"], children: [
-      /* @__PURE__ */ jsx(Subtitle2, { className: style$9["section-title"], children: "Emitter" }),
-      /* @__PURE__ */ jsxs("div", { className: style$9["field"], children: [
+  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: [
         /* @__PURE__ */ jsx(Label, { children: "Select emitter" }),
         /* @__PURE__ */ jsxs(
           Select,
@@ -1526,8 +1778,8 @@ const CompilerSettings = ({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("section", { className: style$9["section"], children: [
-      /* @__PURE__ */ jsx(Subtitle2, { className: style$9["section-title"], children: "Emitter options" }),
+    /* @__PURE__ */ jsxs("section", { className: style$b["section"], children: [
+      /* @__PURE__ */ jsx(Subtitle2, { className: style$b["section-title"], children: "Emitter options" }),
       library ? /* @__PURE__ */ jsx(
         EmitterOptionsForm,
         {
@@ -1535,10 +1787,10 @@ const CompilerSettings = ({
           options: options.options ?? {},
           optionsChanged: emitterOptionsChanged
         }
-      ) : /* @__PURE__ */ jsx(Text, { size: 200, className: style$9["empty"], children: "No emitter selected" })
+      ) : /* @__PURE__ */ jsx(Text, { size: 200, className: style$b["empty"], children: "No emitter selected" })
     ] }),
-    /* @__PURE__ */ jsxs("section", { className: style$9["section"], children: [
-      /* @__PURE__ */ jsx(Subtitle2, { className: style$9["section-title"], children: "Linter rules" }),
+    /* @__PURE__ */ jsxs("section", { className: style$b["section"], children: [
+      /* @__PURE__ */ jsx(Subtitle2, { className: style$b["section-title"], children: "Linter rules" }),
       /* @__PURE__ */ jsx(
         LinterForm,
         {
@@ -1551,7 +1803,7 @@ const CompilerSettings = ({
   ] });
 };
 
-const style$7 = {
+const style$9 = {
 	"config-panel": "_config-panel_cffut_1",
 	"config-toggle": "_config-toggle_cffut_8",
 	"config-content": "_config-content_cffut_17",
@@ -1646,12 +1898,12 @@ const ConfigPanel = ({
     },
     [selectedEmitter, compilerOptions, yamlModel]
   );
-  return /* @__PURE__ */ jsxs("div", { className: style$7["config-panel"], children: [
-    /* @__PURE__ */ jsx("div", { className: style$7["config-toggle"], children: /* @__PURE__ */ jsxs(TabList, { size: "small", selectedValue: mode, onTabSelect: handleModeChange, children: [
+  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: [
       /* @__PURE__ */ jsx(Tab, { value: "form", children: "Visual" }),
       /* @__PURE__ */ jsx(Tab, { value: "yaml", children: "Yaml" })
     ] }) }),
-    /* @__PURE__ */ jsx("div", { className: style$7["config-content"], children: mode === "form" ? /* @__PURE__ */ jsx("div", { className: style$7["form-content"], children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: style$9["config-content"], children: mode === "form" ? /* @__PURE__ */ jsx("div", { className: style$9["form-content"], children: /* @__PURE__ */ jsx(
       CompilerSettings,
       {
         host,
@@ -1664,7 +1916,7 @@ const ConfigPanel = ({
   ] });
 };
 
-const style$6 = {
+const style$8 = {
 	"editor-panel": "_editor-panel_k9ax7_1",
 	"panel-tabs-container": "_panel-tabs-container_k9ax7_7",
 	"panel-content": "_panel-content_k9ax7_11"
@@ -1706,12 +1958,12 @@ const EditorPanel = ({
   const onTabSelect = useCallback((_, data) => {
     setSelectedTab(data.value);
   }, []);
-  return /* @__PURE__ */ jsxs("div", { className: style$6["editor-panel"], children: [
-    /* @__PURE__ */ jsx("div", { className: style$6["panel-tabs-container"], children: /* @__PURE__ */ jsxs(TabList, { vertical: true, size: "large", selectedValue: selectedTab, onTabSelect, children: [
+  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: [
       /* @__PURE__ */ jsx(Tab, { value: "tsp", children: /* @__PURE__ */ jsx("span", { title: "TypeSpec", children: /* @__PURE__ */ jsx(TypeSpecIcon, {}) }) }),
       /* @__PURE__ */ jsx(Tab, { value: "cfg", children: /* @__PURE__ */ jsx("span", { title: "Config", children: /* @__PURE__ */ jsx(SettingsRegular, {}) }) })
     ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: style$6["panel-content"], children: [
+    /* @__PURE__ */ jsxs("div", { className: style$8["panel-content"], children: [
       commandBar,
       selectedTab === "tsp" ? /* @__PURE__ */ jsx(
         TypeSpecEditor,
@@ -1736,7 +1988,29 @@ const EditorPanel = ({
   ] });
 };
 
-const style$5 = {
+const breadcrumb = "_breadcrumb_15sw5_1";
+const segment = "_segment_15sw5_15";
+const separator = "_separator_15sw5_20";
+const current = "_current_15sw5_25";
+const style$7 = {
+	breadcrumb: breadcrumb,
+	segment: segment,
+	separator: separator,
+	current: current
+};
+
+const FileBreadcrumb = ({ path }) => {
+  if (!path || !path.includes("/")) {
+    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 })
+  ] }, index)) });
+};
+
+const style$6 = {
 	"file-output": "_file-output_jzw6j_1",
 	"viewer-selector": "_viewer-selector_jzw6j_5"
 };
@@ -1762,8 +2036,8 @@ const FileOutput = ({ filename, content, viewers }) => {
   } else if (keys.length === 1) {
     return resolvedViewers[keys[0]].render({ filename, content });
   }
-  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)) }) }),
+  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)) }) }),
     selectedRender && selectedRender({ filename, content })
   ] });
 };
@@ -1773,6 +2047,90 @@ const RawFileViewer = {
   render: ({ filename, content }) => /* @__PURE__ */ jsx(OutputEditor, { filename, value: content })
 };
 
+const style$5 = {
+	"file-tree": "_file-tree_m3if7_1"
+};
+
+const FileNodeIcon = ({ node }) => {
+  if (node.isDirectory) {
+    return /* @__PURE__ */ jsx(FolderRegular, {});
+  }
+  return /* @__PURE__ */ jsx(DocumentRegular, {});
+};
+function buildTree(files) {
+  const root = { id: "__root__", name: "root", isDirectory: true, children: [] };
+  const dirMap = /* @__PURE__ */ new Map();
+  dirMap.set("", root);
+  function ensureDir(dirPath) {
+    if (dirMap.has(dirPath)) {
+      return dirMap.get(dirPath);
+    }
+    const parts = dirPath.split("/");
+    const parentPath = parts.slice(0, -1).join("/");
+    const parent = ensureDir(parentPath);
+    const node = {
+      id: dirPath,
+      name: parts[parts.length - 1],
+      isDirectory: true,
+      children: []
+    };
+    dirMap.set(dirPath, node);
+    parent.children.push(node);
+    return node;
+  }
+  for (const file of [...files].sort()) {
+    const lastSlash = file.lastIndexOf("/");
+    if (lastSlash === -1) {
+      root.children.push({
+        id: file,
+        name: file,
+        isDirectory: false
+      });
+    } else {
+      const dirPath = file.substring(0, lastSlash);
+      const fileName = file.substring(lastSlash + 1);
+      const parent = ensureDir(dirPath);
+      parent.children.push({
+        id: file,
+        name: fileName,
+        isDirectory: false
+      });
+    }
+  }
+  function sortChildren(node) {
+    if (node.children) {
+      node.children.sort((a, b) => {
+        if (a.isDirectory !== b.isDirectory) {
+          return a.isDirectory ? -1 : 1;
+        }
+        return String(a.name).localeCompare(String(b.name));
+      });
+      for (const child of node.children) {
+        sortChildren(child);
+      }
+    }
+  }
+  sortChildren(root);
+  return root;
+}
+const FileTreeExplorer = ({
+  files,
+  selected,
+  onSelect
+}) => {
+  const tree = useMemo(() => buildTree(files), [files]);
+  return /* @__PURE__ */ jsx("div", { className: style$5["file-tree"], children: /* @__PURE__ */ jsx(
+    Tree,
+    {
+      tree,
+      selectionMode: "single",
+      selected,
+      onSelect,
+      nodeIcon: FileNodeIcon
+    }
+  ) });
+};
+
 const tabs = "_tabs_1x6x2_1";
 const tab = "_tab_1x6x2_1";
 const style$4 = {
@@ -1806,13 +2164,14 @@ const OutputTabs = ({
 };
 
 const style$3 = {
-	"output-view": "_output-view_omce4_1",
-	"file-viewer": "_file-viewer_omce4_6",
-	"output-content": "_output-content_omce4_12",
-	"file-viewer-content": "_file-viewer-content_omce4_16",
-	"type-graph-viewer": "_type-graph-viewer_omce4_21",
-	"viewer-tabs-container": "_viewer-tabs-container_omce4_26",
-	"viewer-error": "_viewer-error_omce4_30"
+	"output-view": "_output-view_eeqi3_1",
+	"file-viewer": "_file-viewer_eeqi3_6",
+	"output-content": "_output-content_eeqi3_12",
+	"file-viewer-content": "_file-viewer-content_eeqi3_16",
+	"file-viewer-content-with-breadcrumb": "_file-viewer-content-with-breadcrumb_eeqi3_21",
+	"type-graph-viewer": "_type-graph-viewer_eeqi3_32",
+	"viewer-tabs-container": "_viewer-tabs-container_eeqi3_37",
+	"viewer-error": "_viewer-error_eeqi3_41"
 };
 
 const FileViewerComponent = ({
@@ -1822,6 +2181,10 @@ const FileViewerComponent = ({
 }) => {
   const [filename, setFilename] = useState("");
   const [content, setContent] = useState("");
+  const showFileTree = useMemo(
+    () => outputFiles.some((f) => f.includes("/")) || outputFiles.length >= 3,
+    [outputFiles]
+  );
   const loadOutputFile = useCallback(
     async (path) => {
       const contents = await program.host.readFile("./tsp-output/" + path);
@@ -1839,18 +2202,36 @@ const FileViewerComponent = ({
       setFilename("");
     }
   }, [program, outputFiles, loadOutputFile, filename]);
-  const handleTabSelection = useCallback(
+  const handleFileSelection = useCallback(
     (newFilename) => {
-      setFilename(newFilename);
-      void loadOutputFile(newFilename);
+      if (outputFiles.includes(newFilename)) {
+        setFilename(newFilename);
+        void loadOutputFile(newFilename);
+      }
     },
-    [loadOutputFile]
+    [loadOutputFile, outputFiles]
   );
   if (outputFiles.length === 0) {
     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: [
+      /* @__PURE__ */ jsx(Pane, { minSize: 120, maxSize: 400, children: /* @__PURE__ */ jsx(
+        FileTreeExplorer,
+        {
+          files: outputFiles,
+          selected: filename,
+          onSelect: handleFileSelection
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Pane, { children: /* @__PURE__ */ jsxs("div", { className: style$3["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 }) })
+      ] }) })
+    ] }) });
+  }
   return /* @__PURE__ */ jsxs("div", { className: style$3["file-viewer"], children: [
-    /* @__PURE__ */ jsx(OutputTabs, { filenames: outputFiles, selected: filename, onSelect: handleTabSelection }),
+    /* @__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 }) })
   ] });
 };
@@ -2506,7 +2887,7 @@ function useStandalonePlaygroundContext(config) {
 }
 const StandalonePlayground = (config) => {
   const context = useStandalonePlaygroundContext(config);
-  const toasterId = useId$1();
+  const toasterId = useId();
   const { dispatchToast } = useToastController(toasterId);
   const [lastSavedData, setLastSavedData] = useState(null);
   const saveToStorage = useCallback(

package/dist/src/react/breadcrumb/file-breadcrumb.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+export interface FileBreadcrumbProps {
+    readonly path: string;
+}
+export declare const FileBreadcrumb: FunctionComponent<FileBreadcrumbProps>;
+//# sourceMappingURL=file-breadcrumb.d.ts.map

package/dist/src/react/breadcrumb/file-breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-breadcrumb.d.ts","sourceRoot":"","sources":["../../../../src/react/breadcrumb/file-breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG/C,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,CAmBjE,CAAC"}

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

@@ -0,0 +1,2 @@
+export { FileBreadcrumb, type FileBreadcrumbProps } from './file-breadcrumb.js';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/src/react/file-tree/file-tree.d.ts

@@ -0,0 +1,8 @@
+import { FunctionComponent } from 'react';
+export interface FileTreeExplorerProps {
+    readonly files: string[];
+    readonly selected: string;
+    readonly onSelect: (file: string) => void;
+}
+export declare const FileTreeExplorer: FunctionComponent<FileTreeExplorerProps>;
+//# sourceMappingURL=file-tree.d.ts.map

package/dist/src/react/file-tree/file-tree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-tree.d.ts","sourceRoot":"","sources":["../../../../src/react/file-tree/file-tree.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAKjE,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC;IACzB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AA8ED,eAAO,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CAkBrE,CAAC"}

package/dist/src/react/file-tree/index.d.ts

@@ -0,0 +1,2 @@
+export { FileTreeExplorer, type FileTreeExplorerProps } from './file-tree.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/react/file-tree/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/file-tree/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/src/react/output-view/file-viewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-viewer.d.ts","sourceRoot":"","sources":["../../../../src/react/output-view/file-viewer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAqB,aAAa,EAAE,MAAM,aAAa,CAAC;AAqDtF,wBAAgB,gBAAgB,CAAC,WAAW,EAAE,gBAAgB,EAAE,GAAG,aAAa,CAU/E"}
+{"version":3,"file":"file-viewer.d.ts","sourceRoot":"","sources":["../../../../src/react/output-view/file-viewer.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,gBAAgB,EAAqB,aAAa,EAAE,MAAM,aAAa,CAAC;AAqFtF,wBAAgB,gBAAgB,CAAC,WAAW,EAAE,gBAAgB,EAAE,GAAG,aAAa,CAU/E"}

package/dist/style.css

@@ -358,6 +358,33 @@
   display: flex;
   flex-direction: column;
 }
+._breadcrumb_15sw5_1 {
+  display: flex;
+  align-items: center;
+  padding: 4px 12px;
+  font-size: 12px;
+  height: 26px;
+  border-bottom: 1px solid var(--colorNeutralStroke1);
+  background: var(--colorNeutralBackground1);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex-shrink: 0;
+}
+
+._segment_15sw5_15 {
+  display: inline-flex;
+  align-items: center;
+}
+
+._separator_15sw5_20 {
+  margin: 0 4px;
+  color: var(--colorNeutralForeground4);
+}
+
+._current_15sw5_25 {
+  font-weight: 600;
+}
 ._file-output_jzw6j_1 {
   position: relative;
   height: 100%;
@@ -368,6 +395,12 @@
   z-index: 1;
   right: 0;
 }
+._file-tree_m3if7_1 {
+  height: 100%;
+  overflow: auto;
+  background: var(--colorNeutralBackground3);
+  padding-top: 4px;
+}
 ._tabs_1x6x2_1 {
   border-bottom: 1px solid var(--colorNeutralStroke1);
   box-shadow: var(--shadow2);
@@ -388,36 +421,47 @@
 ._tab--selected_1x6x2_18 {
   background-color: var(--colorNeutralBackground5) !important;
 }
-._output-view_omce4_1 {
+._output-view_eeqi3_1 {
   display: flex;
   flex-direction: row;
   height: 100%;
 }
-._file-viewer_omce4_6 {
+._file-viewer_eeqi3_6 {
   display: flex;
   flex-direction: column;
   height: 100%;
 }
 
-._output-content_omce4_12 {
+._output-content_eeqi3_12 {
   flex: 1;
   min-width: 0;
 }
-._file-viewer-content_omce4_16 {
+._file-viewer-content_eeqi3_16 {
+  flex: 1;
+  min-height: 0;
+}
+
+._file-viewer-content-with-breadcrumb_eeqi3_21 {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+._file-viewer-content-with-breadcrumb_eeqi3_21 ._file-viewer-content_eeqi3_16 {
   flex: 1;
   min-height: 0;
 }
 
-._type-graph-viewer_omce4_21 {
+._type-graph-viewer_eeqi3_32 {
   height: 100%;
   overflow-y: auto;
 }
 
-._viewer-tabs-container_omce4_26 {
+._viewer-tabs-container_eeqi3_37 {
   background-color: var(--colorNeutralBackground3);
 }
 
-._viewer-error_omce4_30 {
+._viewer-error_eeqi3_41 {
   padding: 20px;
 }
 ._layout_l03ni_1 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typespec/playground",
-  "version": "0.13.1-dev.0",
+  "version": "0.14.0-dev.2",
   "author": "Microsoft Corporation",
   "description": "TypeSpec playground UI components.",
   "homepage": "https://typespec.io",
@@ -59,46 +59,46 @@
     "!dist/test/**"
   ],
   "dependencies": {
-    "@fluentui/react-components": "~9.73.1",
-    "@fluentui/react-icons": "^2.0.292",
-    "@typespec/bundler": "^0.5.1 || >= 0.5.2-dev.1",
-    "@typespec/compiler": "^1.10.0 || >= 1.11.0-dev.0",
-    "@typespec/html-program-viewer": "^0.80.0 || >= 0.81.0-dev.0",
-    "@typespec/http": "^1.10.0 || >= 1.11.0-dev.0",
-    "@typespec/openapi": "^1.10.0 || >= 1.11.0-dev.0",
-    "@typespec/openapi3": "^1.10.0 || >= 1.11.0-dev.0",
-    "@typespec/protobuf": "^0.80.0 || >= 0.81.0-dev.0",
-    "@typespec/rest": "^0.80.0 || >= 0.81.0-dev.0",
-    "@typespec/versioning": "^0.80.0 || >= 0.81.0-dev.0",
+    "@fluentui/react-components": "~9.73.3",
+    "@fluentui/react-icons": "^2.0.321",
+    "@typespec/bundler": "^0.5.1 || >= 0.5.2-dev.2",
+    "@typespec/compiler": "^1.10.0 || >= 1.11.0-dev.4",
+    "@typespec/html-program-viewer": "^0.80.0 || >= 0.81.0-dev.1",
+    "@typespec/http": "^1.10.0 || >= 1.11.0-dev.2",
+    "@typespec/openapi": "^1.10.0 || >= 1.11.0-dev.1",
+    "@typespec/openapi3": "^1.10.0 || >= 1.11.0-dev.3",
+    "@typespec/protobuf": "^0.80.0 || >= 0.81.0-dev.1",
+    "@typespec/rest": "^0.80.0 || >= 0.81.0-dev.1",
+    "@typespec/versioning": "^0.80.0 || >= 0.81.0-dev.1",
     "clsx": "^2.1.1",
     "debounce": "~3.0.0",
     "lzutf8": "0.6.3",
-    "monaco-editor": "~0.55.0",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
-    "react-error-boundary": "^6.0.0",
-    "swagger-ui-dist": "^5.20.1",
-    "yaml": "~2.8.2",
+    "monaco-editor": "~0.55.1",
+    "react": "~19.2.4",
+    "react-dom": "~19.2.4",
+    "react-error-boundary": "^6.1.1",
+    "swagger-ui-dist": "^5.32.0",
     "vscode-languageserver": "~9.0.1",
-    "vscode-languageserver-textdocument": "~1.0.12"
+    "vscode-languageserver-textdocument": "~1.0.12",
+    "yaml": "~2.8.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.10",
-    "@playwright/test": "^1.57.0",
-    "@storybook/cli": "^10.1.8",
-    "@storybook/react-vite": "^10.1.8",
+    "@babel/core": "^7.29.0",
+    "@playwright/test": "^1.58.2",
+    "@storybook/cli": "^10.2.19",
+    "@storybook/react-vite": "^10.2.19",
     "@types/debounce": "~1.2.4",
-    "@types/node": "~25.3.0",
-    "@types/react": "~19.2.7",
-    "@types/react-dom": "~19.2.2",
-    "@types/swagger-ui-dist": "~3.30.5",
-    "@typespec/bundler": "^0.5.1 || >= 0.5.2-dev.1",
+    "@types/node": "~25.5.0",
+    "@types/react": "~19.2.14",
+    "@types/react-dom": "~19.2.3",
+    "@types/swagger-ui-dist": "~3.30.6",
+    "@typespec/bundler": "^0.5.1 || >= 0.5.2-dev.2",
     "@vitejs/plugin-react": "~5.1.2",
     "c8": "^11.0.0",
     "cross-env": "~10.1.0",
     "es-module-shims": "~2.8.0",
     "rimraf": "~6.1.3",
-    "storybook": "^10.1.8",
+    "storybook": "^10.2.19",
     "typescript": "~5.9.3",
     "vite": "^7.2.7",
     "vite-plugin-checker": "^0.12.0",