@typespec/playground 0.9.0-dev.3 → 0.9.0-dev.5

package/dist/.storybook/preview.d.ts

@@ -1,4 +1,4 @@
-import { Preview } from '@storybook/react';
+import { Preview } from '@storybook/react-vite';
 declare const preview: Preview;
 export default preview;
 //# sourceMappingURL=preview.d.ts.map

package/dist/.storybook/preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../.storybook/preview.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEhD,QAAA,MAAM,OAAO,EAAE,OAUd,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../.storybook/preview.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAErD,QAAA,MAAM,OAAO,EAAE,OAUd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/index.js

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

package/dist/react/index.js

@@ -5,7 +5,7 @@ import { mergeClasses, Popover, PopoverTrigger, PopoverSurface, Title3, Table, T
 import { Settings24Regular, Save16Regular, Broom16Filled, Bug16Regular, FolderListRegular, DataLineRegular, ErrorCircle16Filled, Warning16Filled, ChevronDown16Regular } from '@fluentui/react-icons';
 import debounce from 'debounce';
 import { CompletionItemTag } from 'vscode-languageserver';
-import { a as resolveVirtualPath, g as getMonacoRange, c as createBrowserHost, r as registerMonacoLanguage } from '../services-CXtSSQdQ.js';
+import { a as resolveVirtualPath, g as getMonacoRange, c as createBrowserHost, r as registerMonacoLanguage } from '../services-BOARIFqT.js';
 import { ErrorBoundary } from 'react-error-boundary';
 import { TypeGraph } from '@typespec/html-program-viewer/react';
 import '@typespec/html-program-viewer/style.css';
@@ -30,6 +30,7 @@ const Editor = ({ model, options, actions, onMount }) => {
     editorRef.current = editor.create(editorContainerRef.current, {
       model,
       automaticLayout: true,
+      fixedOverflowWidgets: true,
       ...options
     });
     onMount?.({ editor: editorRef.current });
@@ -2392,8 +2393,29 @@ function createFileViewer(fileViewers) {
   };
 }
 
-const TypeGraphViewerComponent = ({ program }) => {
-  return /* @__PURE__ */ jsx("div", { className: style$4["type-graph-viewer"], children: /* @__PURE__ */ jsx(TypeGraph, { program }) });
+const TypeGraphViewerComponent = ({
+  program,
+  viewerState,
+  onViewerStateChange
+}) => {
+  const currentPath = viewerState?.["type-graph:path"] || "";
+  const handleNavigationChange = useCallback(
+    (path) => {
+      onViewerStateChange?.({
+        ...viewerState,
+        "type-graph:path": path
+      });
+    },
+    [viewerState, onViewerStateChange]
+  );
+  return /* @__PURE__ */ jsx("div", { className: style$4["type-graph-viewer"], children: /* @__PURE__ */ jsx(
+    TypeGraph,
+    {
+      program,
+      currentPath,
+      onNavigationChange: handleNavigationChange
+    }
+  ) });
 };
 const TypeGraphViewer = {
   key: "type-graph",
@@ -2406,7 +2428,10 @@ const OutputView = ({
   compilationState,
   viewers,
   fileViewers,
-  editorOptions
+  selectedViewer,
+  onViewerChange,
+  viewerState,
+  onViewerStateChange
 }) => {
   const resolvedViewers = useMemo(
     () => resolveViewers(viewers, fileViewers),
@@ -2423,7 +2448,10 @@ const OutputView = ({
     {
       compilationResult: compilationState,
       viewers: resolvedViewers,
-      editorOptions
+      selectedViewer,
+      onViewerChange,
+      viewerState,
+      onViewerStateChange
     }
   );
 };
@@ -2440,12 +2468,24 @@ function resolveViewers(viewers, fileViewers) {
   }
   return output;
 }
-const OutputViewInternal = ({ compilationResult, viewers, editorOptions }) => {
+const OutputViewInternal = ({
+  compilationResult,
+  viewers,
+  selectedViewer,
+  onViewerChange,
+  viewerState,
+  onViewerStateChange
+}) => {
   const viewerList = Object.values(viewers.programViewers);
-  const [selected, setSelected] = useState(viewerList[0].key);
+  const [internalSelected, setInternalSelected] = useState(viewerList[0].key);
+  const selected = selectedViewer ?? internalSelected;
   const onTabSelect = useCallback(
-    (_, data) => setSelected(data.value),
-    [setSelected]
+    (_, data) => {
+      const newSelection = data.value;
+      setInternalSelected(newSelection);
+      onViewerChange?.(newSelection);
+    },
+    [onViewerChange]
   );
   const viewer = useMemo(() => {
     return viewers.programViewers[selected];
@@ -2455,7 +2495,9 @@ const OutputViewInternal = ({ compilationResult, viewers, editorOptions }) => {
       viewer.render,
       {
         program: compilationResult.program,
-        outputFiles: compilationResult.outputFiles
+        outputFiles: compilationResult.outputFiles,
+        viewerState,
+        onViewerStateChange
       }
     ) }) }),
     /* @__PURE__ */ jsx("div", { className: style$4["viewer-tabs-container"], children: /* @__PURE__ */ jsx(
@@ -2669,41 +2711,159 @@ const ProblemPaneContent = ({
   return diagnostics.length === 0 ? /* @__PURE__ */ jsx("div", { className: style["no-problems"], children: " No problems" }) : /* @__PURE__ */ jsx(DiagnosticList, { diagnostics, onDiagnosticSelected });
 };
 
+function usePlaygroundState({
+  libraries,
+  samples,
+  playgroundState: controlledPlaygroundState,
+  defaultPlaygroundState,
+  onPlaygroundStateChange,
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
+  defaultEmitter,
+  defaultContent
+}) {
+  const effectiveDefaultState = useMemo(() => {
+    const baseDefault = defaultPlaygroundState ?? {};
+    if (!baseDefault.emitter) {
+      if (defaultEmitter) {
+        return { ...baseDefault, emitter: defaultEmitter, content: defaultContent };
+      }
+    }
+    return { ...baseDefault, content: baseDefault.content ?? defaultContent };
+  }, [defaultPlaygroundState, defaultEmitter, libraries, defaultContent]);
+  const [playgroundState, setPlaygroundState] = useControllableValue(
+    controlledPlaygroundState,
+    effectiveDefaultState,
+    onPlaygroundStateChange
+  );
+  const selectedEmitter = playgroundState.emitter;
+  const compilerOptions = useMemo(
+    () => playgroundState.compilerOptions ?? {},
+    [playgroundState.compilerOptions]
+  );
+  const selectedSampleName = playgroundState.sampleName ?? "";
+  const selectedViewer = playgroundState.selectedViewer;
+  const content = playgroundState.content ?? "";
+  const updateState = useCallback(
+    (updates) => {
+      setPlaygroundState({ ...playgroundState, ...updates });
+    },
+    [playgroundState, setPlaygroundState]
+  );
+  const onSelectedEmitterChange = useCallback(
+    (emitter) => updateState({ emitter }),
+    [updateState]
+  );
+  const onCompilerOptionsChange = useCallback(
+    (compilerOptions2) => updateState({ compilerOptions: compilerOptions2 }),
+    [updateState]
+  );
+  const onSelectedSampleNameChange = useCallback(
+    (sampleName) => updateState({ sampleName }),
+    [updateState]
+  );
+  const onSelectedViewerChange = useCallback(
+    (selectedViewer2) => updateState({ selectedViewer: selectedViewer2 }),
+    [updateState]
+  );
+  const onViewerStateChange = useCallback(
+    (viewerState) => updateState({ viewerState }),
+    [updateState]
+  );
+  const onContentChange = useCallback((content2) => updateState({ content: content2 }), [updateState]);
+  const lastProcessedSample = useRef("");
+  useEffect(() => {
+    if (selectedSampleName && samples && selectedSampleName !== lastProcessedSample.current) {
+      const config = samples[selectedSampleName];
+      if (config?.content) {
+        lastProcessedSample.current = selectedSampleName;
+        const updates = { content: config.content };
+        if (config.preferredEmitter) {
+          updates.emitter = config.preferredEmitter;
+        }
+        if (config.compilerOptions) {
+          updates.compilerOptions = config.compilerOptions;
+        }
+        updateState(updates);
+      }
+    }
+  }, [selectedSampleName, samples, updateState]);
+  return {
+    // State values
+    selectedEmitter,
+    compilerOptions,
+    selectedSampleName,
+    selectedViewer,
+    viewerState: playgroundState.viewerState ?? {},
+    content,
+    // State setters
+    onSelectedEmitterChange,
+    onCompilerOptionsChange,
+    onSelectedSampleNameChange,
+    onSelectedViewerChange,
+    onViewerStateChange,
+    onContentChange,
+    // Full state management
+    playgroundState,
+    setPlaygroundState
+  };
+}
+
 const Playground = (props) => {
   const { host, onSave } = props;
   const editorRef = useRef(void 0);
   useEffect(() => {
     editor.setTheme(props.editorOptions?.theme ?? "typespec");
   }, [props.editorOptions?.theme]);
-  const [selectedEmitter, onSelectedEmitterChange] = useControllableValue(
-    props.emitter,
-    props.defaultEmitter,
-    props.onEmitterChange
-  );
-  const [compilerOptions, onCompilerOptionsChange] = useControllableValue(
-    props.compilerOptions,
-    props.defaultCompilerOptions ?? {},
-    props.onCompilerOptionsChange
-  );
-  const [selectedSampleName, onSelectedSampleNameChange] = useControllableValue(
-    props.sampleName,
-    props.defaultSampleName,
-    props.onSampleNameChange
-  );
-  const [content, setContent] = useState(props.defaultContent);
+  const typespecModel = useMonacoModel("inmemory://test/main.tsp", "typespec");
+  const [compilationState, setCompilationState] = useState(void 0);
+  const state = usePlaygroundState({
+    libraries: props.libraries,
+    samples: props.samples,
+    playgroundState: props.playgroundState,
+    defaultPlaygroundState: props.defaultPlaygroundState,
+    onPlaygroundStateChange: props.onPlaygroundStateChange,
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    defaultEmitter: props.defaultEmitter,
+    defaultContent: props.defaultContent
+  });
+  const {
+    selectedEmitter,
+    compilerOptions,
+    selectedSampleName,
+    selectedViewer,
+    viewerState,
+    content,
+    onSelectedEmitterChange,
+    onCompilerOptionsChange,
+    onSelectedSampleNameChange,
+    onSelectedViewerChange,
+    onViewerStateChange,
+    onContentChange
+  } = state;
+  useEffect(() => {
+    if (typespecModel.getValue() !== (content ?? "")) {
+      typespecModel.setValue(content ?? "");
+    }
+  }, [content, typespecModel]);
+  useEffect(() => {
+    const disposable = typespecModel.onDidChangeContent(() => {
+      const newContent = typespecModel.getValue();
+      if (newContent !== content) {
+        onContentChange(newContent);
+      }
+    });
+    return () => disposable.dispose();
+  }, [typespecModel, content, onContentChange]);
   const isSampleUntouched = useMemo(() => {
     return Boolean(selectedSampleName && content === props.samples?.[selectedSampleName]?.content);
   }, [content, selectedSampleName, props.samples]);
-  const typespecModel = useMonacoModel("inmemory://test/main.tsp", "typespec");
-  const [compilationState, setCompilationState] = useState(void 0);
   const doCompile = useCallback(async () => {
-    const content2 = typespecModel.getValue();
-    setContent(content2);
+    const currentContent = typespecModel.getValue();
     const typespecCompiler = host.compiler;
-    const state = await compile(host, content2, selectedEmitter, compilerOptions);
-    setCompilationState(state);
-    if ("program" in state) {
-      const markers = state.program.diagnostics.map((diag) => ({
+    const state2 = await compile(host, currentContent, selectedEmitter, compilerOptions);
+    setCompilationState(state2);
+    if ("program" in state2) {
+      const markers = state2.program.diagnostics.map((diag) => ({
         ...getMonacoRange(typespecCompiler, diag.target),
         message: diag.message,
         severity: diag.severity === "error" ? MarkerSeverity.Error : MarkerSeverity.Warning,
@@ -2713,38 +2873,7 @@ const Playground = (props) => {
     } else {
       editor.setModelMarkers(typespecModel, "owner", []);
     }
-  }, [host, selectedEmitter, compilerOptions, typespecModel, setContent]);
-  const updateTypeSpec = useCallback(
-    (value) => {
-      if (typespecModel.getValue() !== value) {
-        typespecModel.setValue(value);
-      }
-    },
-    [typespecModel]
-  );
-  useEffect(() => {
-    updateTypeSpec(props.defaultContent ?? "");
-  }, [props.defaultContent, updateTypeSpec]);
-  useEffect(() => {
-    if (selectedSampleName && props.samples) {
-      const config = props.samples[selectedSampleName];
-      if (config.content) {
-        updateTypeSpec(config.content);
-        if (config.preferredEmitter) {
-          onSelectedEmitterChange(config.preferredEmitter);
-        }
-        if (config.compilerOptions) {
-          onCompilerOptionsChange(config.compilerOptions);
-        }
-      }
-    }
-  }, [
-    updateTypeSpec,
-    selectedSampleName,
-    props.samples,
-    onSelectedEmitterChange,
-    onCompilerOptionsChange
-  ]);
+  }, [host, selectedEmitter, compilerOptions, typespecModel]);
   useEffect(() => {
     const debouncer = debounce(() => doCompile(), 200);
     const disposable = typespecModel.onDidChangeContent(debouncer);
@@ -2759,19 +2888,23 @@ const Playground = (props) => {
   const saveCode = useCallback(() => {
     if (onSave) {
       onSave({
-        content: typespecModel.getValue(),
+        content: content ?? "",
         emitter: selectedEmitter,
-        options: compilerOptions,
-        sampleName: isSampleUntouched ? selectedSampleName : void 0
+        compilerOptions,
+        sampleName: isSampleUntouched ? selectedSampleName : void 0,
+        selectedViewer,
+        viewerState
       });
     }
   }, [
-    typespecModel,
+    content,
     onSave,
     selectedEmitter,
     compilerOptions,
     selectedSampleName,
-    isSampleUntouched
+    isSampleUntouched,
+    selectedViewer,
+    viewerState
   ]);
   const formatCode = useCallback(() => {
     void editorRef.current?.getAction("editor.action.formatDocument")?.run();
@@ -2817,10 +2950,10 @@ const Playground = (props) => {
       host,
       setContent: (val) => {
         typespecModel.setValue(val);
-        setContent(val);
+        onContentChange(val);
       }
     };
-  }, [host, setContent, typespecModel]);
+  }, [host, typespecModel, onContentChange]);
   return /* @__PURE__ */ jsx(PlaygroundContextProvider, { value: playgroundContext, children: /* @__PURE__ */ jsxs("div", { className: style$3["layout"], children: [
     /* @__PURE__ */ jsxs(SplitPane, { sizes: verticalPaneSizes, onChange: onVerticalPaneSizeChange, split: "horizontal", children: [
       /* @__PURE__ */ jsx(Pane, { children: /* @__PURE__ */ jsxs(SplitPane, { initialSizes: ["50%", "50%"], children: [
@@ -2859,7 +2992,11 @@ const Playground = (props) => {
             compilationState,
             editorOptions: props.editorOptions,
             viewers: props.viewers,
-            fileViewers: props.emitterViewers?.[selectedEmitter]
+            fileViewers: selectedEmitter ? props.emitterViewers?.[selectedEmitter] : void 0,
+            selectedViewer,
+            onViewerChange: onSelectedViewerChange,
+            viewerState,
+            onViewerStateChange
           }
         ) })
       ] }) }),
@@ -2952,12 +3089,20 @@ const StandalonePlayground = (config) => {
   const context = useStandalonePlaygroundContext(config);
   const toasterId = useId$1();
   const { dispatchToast } = useToastController(toasterId);
-  const onSave = useCallback(
+  const [lastSavedData, setLastSavedData] = useState(null);
+  const saveToStorage = useCallback(
     (value) => {
       if (!context) {
         return;
       }
       context.stateStorage.save(value);
+      setLastSavedData(value);
+    },
+    [context]
+  );
+  const onSave = useCallback(
+    (value) => {
+      saveToStorage(value);
       void navigator.clipboard.writeText(window.location.toString());
       dispatchToast(
         /* @__PURE__ */ jsxs(Toast, { children: [
@@ -2967,18 +3112,36 @@ const StandalonePlayground = (config) => {
         { intent: "success" }
       );
     },
-    [dispatchToast, context]
+    [dispatchToast, saveToStorage]
+  );
+  const onPlaygroundStateChange = useCallback(
+    (newState) => {
+      const saveData = {
+        content: lastSavedData?.content || "",
+        emitter: newState.emitter || "",
+        compilerOptions: newState.compilerOptions,
+        sampleName: newState.sampleName,
+        selectedViewer: newState.selectedViewer,
+        viewerState: newState.viewerState
+      };
+      saveToStorage(saveData);
+    },
+    [lastSavedData?.content, saveToStorage]
   );
   const fixedOptions = useMemo(
     () => context && {
       host: context.host,
       libraries: config.libraries,
       defaultContent: context.initialState.content,
-      defaultEmitter: context.initialState.emitter ?? config.defaultEmitter,
-      defaultCompilerOptions: context.initialState.options,
-      defaultSampleName: context.initialState.sampleName
+      defaultPlaygroundState: {
+        emitter: context.initialState.emitter ?? config.defaultPlaygroundState?.emitter,
+        compilerOptions: context.initialState.compilerOptions ?? config.defaultPlaygroundState?.compilerOptions,
+        sampleName: context.initialState.sampleName ?? config.defaultPlaygroundState?.sampleName,
+        selectedViewer: context.initialState.selectedViewer ?? config.defaultPlaygroundState?.selectedViewer,
+        viewerState: context.initialState.viewerState ?? config.defaultPlaygroundState?.viewerState
+      }
     },
-    [config.defaultEmitter, config.libraries, context]
+    [config.defaultPlaygroundState, config.libraries, context]
   );
   if (context === void 0 || fixedOptions === void 0) {
     return config.fallback;
@@ -2986,11 +3149,12 @@ const StandalonePlayground = (config) => {
   const options = {
     ...config,
     ...fixedOptions,
-    onSave
+    onSave,
+    onPlaygroundStateChange
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Toaster, { toasterId }),
-    options && /* @__PURE__ */ jsx(Playground, { ...options })
+    /* @__PURE__ */ jsx(Playground, { ...options })
   ] });
 };
 async function createReactPlayground(config) {
@@ -3012,12 +3176,19 @@ function createStandalonePlaygroundStateStorage() {
     emitter: {
       queryParam: "e"
     },
-    options: {
+    compilerOptions: {
       type: "object",
       queryParam: "options"
     },
     sampleName: {
       queryParam: "sample"
+    },
+    selectedViewer: {
+      queryParam: "v"
+    },
+    viewerState: {
+      type: "object",
+      queryParam: "vs"
     }
   });
   return {
@@ -3025,10 +3196,10 @@ function createStandalonePlaygroundStateStorage() {
     resolveSearchParams: stateStorage.resolveSearchParams,
     save(data) {
       stateStorage.save(
-        data.sampleName ? { sampleName: data.sampleName, options: data.options } : data
+        data.sampleName ? { ...data, content: void 0, emitter: void 0, sampleName: data.sampleName } : data
       );
     }
   };
 }
 
-export { Editor, Footer, FooterItem, FooterVersionItem, Playground, StandalonePlayground, createReactPlayground, createStandalonePlaygroundStateStorage, renderReactPlayground, useMonacoModel, usePlaygroundContext };
+export { Editor, Footer, FooterItem, FooterVersionItem, Playground, StandalonePlayground, createReactPlayground, createStandalonePlaygroundStateStorage, renderReactPlayground, useMonacoModel, usePlaygroundContext, usePlaygroundState };

package/dist/{services-CXtSSQdQ.js → services-BOARIFqT.js}

@@ -555,7 +555,7 @@ async function registerMonacoLanguage(host) {
   });
 }
 function getMonacoRange(typespecCompiler, target) {
-  const loc = typespecCompiler.getSourceLocation(target);
+  const loc = typespecCompiler.getSourceLocation(target, { locateId: true });
   if (loc === void 0 || loc.file.path !== "/test/main.tsp") {
     return {
       startLineNumber: 1,

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

@@ -1 +1 @@
-{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../src/react/editor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,MAAM,EAAoB,MAAM,eAAe,CAAC;AAC9D,OAAO,EAA8B,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE3E,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC,iBAAiB,EAAE,CAAC;IACrC,OAAO,EAAE,MAAM,CAAC,oCAAoC,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,CAAC,qBAAqB,CAAC;CACtC;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,CAuCjD,CAAC;AAEF,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,CAK5E"}
+{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../src/react/editor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,MAAM,EAAoB,MAAM,eAAe,CAAC;AAC9D,OAAO,EAA8B,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE3E,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC,iBAAiB,EAAE,CAAC;IACrC,OAAO,EAAE,MAAM,CAAC,oCAAoC,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,CAAC,qBAAqB,CAAC;CACtC;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,CAwCjD,CAAC;AAEF,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,CAK5E"}

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

@@ -5,4 +5,5 @@ export { Playground } from './playground.js';
 export type { PlaygroundProps, PlaygroundSaveData } from './playground.js';
 export { StandalonePlayground, createReactPlayground, createStandalonePlaygroundStateStorage, renderReactPlayground, } from './standalone.js';
 export type * from './types.js';
+export { usePlaygroundState, type PlaygroundState } from './use-playground-state.js';
 //# sourceMappingURL=index.d.ts.map

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"}
+{"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"}

package/dist/src/react/output-view/output-view.d.ts

@@ -9,6 +9,22 @@ export interface OutputViewProps {
      */
     viewers?: ProgramViewer[];
     fileViewers?: FileOutputViewer[];
+    /**
+     * The currently selected viewer key.
+     */
+    selectedViewer?: string;
+    /**
+     * Callback when the selected viewer changes.
+     */
+    onViewerChange?: (viewerKey: string) => void;
+    /**
+     * Current viewer state for viewers that have internal state.
+     */
+    viewerState?: Record<string, any>;
+    /**
+     * Callback when viewer state changes.
+     */
+    onViewerStateChange?: (state: Record<string, any>) => void;
 }
 export declare const OutputView: FunctionComponent<OutputViewProps>;
 //# sourceMappingURL=output-view.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"output-view.d.ts","sourceRoot":"","sources":["../../../../src/react/output-view/output-view.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkC,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/E,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAiB,gBAAgB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAMpG,MAAM,WAAW,eAAe;IAC9B,gBAAgB,EAAE,gBAAgB,GAAG,SAAS,CAAC;IAC/C,aAAa,CAAC,EAAE,wBAAwB,CAAC;IACzC;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAC1B,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAClC;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAwBzD,CAAC"}
+{"version":3,"file":"output-view.d.ts","sourceRoot":"","sources":["../../../../src/react/output-view/output-view.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkC,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/E,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAiB,gBAAgB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAMpG,MAAM,WAAW,eAAe;IAC9B,gBAAgB,EAAE,gBAAgB,GAAG,SAAS,CAAC;IAC/C,aAAa,CAAC,EAAE,wBAAwB,CAAC;IACzC;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAC1B,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACjC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAClC;;OAEG;IACH,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CA8BzD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"type-graph-viewer.d.ts","sourceRoot":"","sources":["../../../../src/react/output-view/type-graph-viewer.tsx"],"names":[],"mappings":"AAEA,OAAO,yCAAyC,CAAC;AACjD,OAAO,KAAK,EAAqB,aAAa,EAAE,MAAM,aAAa,CAAC;AAWpE,eAAO,MAAM,eAAe,EAAE,aAK7B,CAAC"}
+{"version":3,"file":"type-graph-viewer.d.ts","sourceRoot":"","sources":["../../../../src/react/output-view/type-graph-viewer.tsx"],"names":[],"mappings":"AAEA,OAAO,yCAAyC,CAAC;AAEjD,OAAO,KAAK,EAAqB,aAAa,EAAE,MAAM,aAAa,CAAC;AAgCpE,eAAO,MAAM,eAAe,EAAE,aAK7B,CAAC"}

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

@@ -1,33 +1,27 @@
-import { CompilerOptions } from '@typespec/compiler';
 import { FunctionComponent, ReactNode } from 'react';
 import { BrowserHost, PlaygroundSample } from '../types.js';
 import { FileOutputViewer, ProgramViewer } from './types.js';
+import { PlaygroundState } from './use-playground-state.js';
+export type { PlaygroundState };
 export interface PlaygroundProps {
     host: BrowserHost;
-    /** Default emitter if leaving this unmanaged. */
+    /** Default content if leaving this unmanaged. */
     defaultContent?: string;
     /** List of available libraries */
     readonly libraries: readonly string[];
-    /** Emitter to use */
-    emitter?: string;
-    /** Default emitter if leaving this unmanaged. */
-    defaultEmitter?: string;
-    /** Callback when emitter change */
-    onEmitterChange?: (emitter: string) => void;
-    /** Emitter options */
-    compilerOptions?: CompilerOptions;
-    /** Default emitter options if leaving this unmanaged. */
-    defaultCompilerOptions?: CompilerOptions;
-    /** Callback when emitter options change */
-    onCompilerOptionsChange?: (emitter: CompilerOptions) => void;
     /** Samples available */
     samples?: Record<string, PlaygroundSample>;
-    /** Sample to use */
-    sampleName?: string;
-    /** Default sample if leaving this unmanaged. */
-    defaultSampleName?: string;
-    /** Callback when sample change */
-    onSampleNameChange?: (sampleName: string) => void;
+    /** Playground state (controlled) */
+    playgroundState?: PlaygroundState;
+    /** Default playground state if leaving this unmanaged */
+    defaultPlaygroundState?: PlaygroundState;
+    /** Callback when playground state changes */
+    onPlaygroundStateChange?: (state: PlaygroundState) => void;
+    /**
+     * Default emitter to use if not provided in defaultPlaygroundState.
+     * @deprecated Use defaultPlaygroundState.emitter instead
+     */
+    defaultEmitter?: string;
     onFileBug?: () => void;
     /** Additional buttons to show up in the command bar */
     commandBarButtons?: ReactNode;
@@ -47,19 +41,60 @@ export interface PlaygroundProps {
 export interface PlaygroundEditorsOptions {
     theme?: string;
 }
-export interface PlaygroundSaveData {
+export interface PlaygroundSaveData extends PlaygroundState {
     /** Current content of the playground.   */
     content: string;
     /** Emitter name. */
     emitter: string;
-    /** Emitter options. */
-    options?: CompilerOptions;
-    /** If a sample is selected and the content hasn't changed since. */
-    sampleName?: string;
 }
 export interface PlaygroundLinks {
     /** Link to documentation */
     documentationUrl?: string;
 }
+/**
+ * Playground component for TypeSpec with consolidated state management.
+ *
+ * @example
+ * ```tsx
+ * const [playgroundState, setPlaygroundState] = useState<PlaygroundState>({
+ *   emitter: 'openapi3',
+ *   compilerOptions: {},
+ *   sampleName: 'basic',
+ *   selectedViewer: 'openapi',
+ *   viewerState: {}
+ * });
+ *
+ * <Playground
+ *   host={host}
+ *   playgroundState={playgroundState}
+ *   onPlaygroundStateChange={setPlaygroundState}
+ *   samples={samples}
+ *   viewers={viewers}
+ * />
+ * ```
+ *
+ * For uncontrolled usage, use defaultPlaygroundState:
+ * ```tsx
+ * <Playground
+ *   host={host}
+ *   defaultPlaygroundState={{
+ *     emitter: 'openapi3',
+ *     compilerOptions: {},
+ *   }}
+ *   samples={samples}
+ *   viewers={viewers}
+ * />
+ * ```
+ *
+ * For backward compatibility, you can also use the deprecated defaultEmitter prop:
+ * ```tsx
+ * <Playground
+ *   host={host}
+ *   defaultEmitter="openapi3"
+ *   samples={samples}
+ *   viewers={viewers}
+ * />
+ * ```
+ */
 export declare const Playground: FunctionComponent<PlaygroundProps>;
 //# sourceMappingURL=playground.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"playground.d.ts","sourceRoot":"","sources":["../../../src/react/playground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAc,MAAM,oBAAoB,CAAC;AAEtE,OAAO,sCAAsC,CAAC;AAG9C,OAAO,EAML,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAOjE,OAAO,KAAK,EAAoB,gBAAgB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGpF,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,WAAW,CAAC;IAElB,iDAAiD;IACjD,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,kCAAkC;IAClC,QAAQ,CAAC,SAAS,EAAE,SAAS,MAAM,EAAE,CAAC;IAEtC,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mCAAmC;IACnC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAE5C,sBAAsB;IACtB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,yDAAyD;IACzD,sBAAsB,CAAC,EAAE,eAAe,CAAC;IACzC,2CAA2C;IAC3C,uBAAuB,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAE7D,wBAAwB;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAE3C,oBAAoB;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAElD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB,uDAAuD;IACvD,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAE9B,uBAAuB;IACvB,KAAK,CAAC,EAAE,eAAe,CAAC;IAExB,kDAAkD;IAClD,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAE1B,4FAA4F;IAC5F,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,EAAE,CAAC,CAAC;IAEpD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAE7C,aAAa,CAAC,EAAE,wBAAwB,CAAC;IAEzC;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,kBAAkB;IACjC,2CAA2C;IAC3C,OAAO,EAAE,MAAM,CAAC;IAEhB,oBAAoB;IACpB,OAAO,EAAE,MAAM,CAAC;IAEhB,uBAAuB;IACvB,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B,oEAAoE;IACpE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B,4BAA4B;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAgOzD,CAAC"}
+{"version":3,"file":"playground.d.ts","sourceRoot":"","sources":["../../../src/react/playground.tsx"],"names":[],"mappings":"AAEA,OAAO,sCAAsC,CAAC;AAG9C,OAAO,EAML,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAOjE,OAAO,KAAK,EAAoB,gBAAgB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEpF,OAAO,EAAsB,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAGrF,YAAY,EAAE,eAAe,EAAE,CAAC;AAEhC,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,WAAW,CAAC;IAElB,iDAAiD;IACjD,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,kCAAkC;IAClC,QAAQ,CAAC,SAAS,EAAE,SAAS,MAAM,EAAE,CAAC;IAEtC,wBAAwB;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAE3C,oCAAoC;IACpC,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,yDAAyD;IACzD,sBAAsB,CAAC,EAAE,eAAe,CAAC;IACzC,6CAA6C;IAC7C,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAE3D;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB,uDAAuD;IACvD,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAE9B,uBAAuB;IACvB,KAAK,CAAC,EAAE,eAAe,CAAC;IAExB,kDAAkD;IAClD,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAE1B,4FAA4F;IAC5F,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,EAAE,CAAC,CAAC;IAEpD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAE7C,aAAa,CAAC,EAAE,wBAAwB,CAAC;IAEzC;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACzD,2CAA2C;IAC3C,OAAO,EAAE,MAAM,CAAC;IAEhB,oBAAoB;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,4BAA4B;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAuOzD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"standalone.d.ts","sourceRoot":"","sources":["../../../src/react/standalone.tsx"],"names":[],"mappings":"AASA,OAAO,EAML,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAEvD,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAc,KAAK,eAAe,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE5F,MAAM,WAAW,qBAAsB,SAAQ,OAAO,CAAC,eAAe,CAAC;IACrE,QAAQ,CAAC,SAAS,EAAE,SAAS,MAAM,EAAE,CAAC;IACtC,QAAQ,CAAC,YAAY,CAAC,EAAE,oBAAoB,CAAC;IAC7C,sEAAsE;IACtE,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;CAC/B;AAyBD,eAAO,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,qBAAqB,CAmDzE,CAAC;AAEF,wBAAsB,qBAAqB,CAAC,MAAM,EAAE,qBAAqB,oDAExE;AAED,wBAAsB,qBAAqB,CAAC,MAAM,EAAE,qBAAqB,iBASxE;AAED,wBAAgB,sCAAsC,IAAI,eAAe,CAAC,kBAAkB,CAAC,CA2B5F"}
+{"version":3,"file":"standalone.d.ts","sourceRoot":"","sources":["../../../src/react/standalone.tsx"],"names":[],"mappings":"AASA,OAAO,EAML,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAEvD,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,kBAAkB,EAExB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,WAAW,qBAAsB,SAAQ,OAAO,CAAC,eAAe,CAAC;IACrE,QAAQ,CAAC,SAAS,EAAE,SAAS,MAAM,EAAE,CAAC;IACtC,QAAQ,CAAC,YAAY,CAAC,EAAE,oBAAoB,CAAC;IAC7C,sEAAsE;IACtE,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;CAC/B;AAyBD,eAAO,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,qBAAqB,CAuFzE,CAAC;AAEF,wBAAsB,qBAAqB,CAAC,MAAM,EAAE,qBAAqB,oDAExE;AAED,wBAAsB,qBAAqB,CAAC,MAAM,EAAE,qBAAqB,iBASxE;AAED,wBAAgB,sCAAsC,IAAI,eAAe,CAAC,kBAAkB,CAAC,CAoC5F"}

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

@@ -13,6 +13,10 @@ export interface OutputViewerProps {
     readonly program: Program;
     /** Files emitted */
     readonly outputFiles: string[];
+    /** Current viewer state (for viewers that have internal state) */
+    readonly viewerState?: Record<string, any>;
+    /** Callback to update viewer state */
+    readonly onViewerStateChange?: (state: Record<string, any>) => void;
 }
 export interface ProgramViewer {
     readonly key: string;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/react/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,qBAAqB,EAAE,GAAG,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,WAAW,EAAE,MAAM,EAAE,CAAC;CAChC,CAAC;AACF,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG,kBAAkB,CAAC;AAElE,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;AAErE,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,oBAAoB;IACpB,QAAQ,CAAC,WAAW,EAAE,MAAM,EAAE,CAAC;CAChC;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,GAAG,IAAI,CAAC;CACjE;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,SAAS,GAAG,IAAI,CAAC;CACrE;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/react/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,qBAAqB,EAAE,GAAG,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,WAAW,EAAE,MAAM,EAAE,CAAC;CAChC,CAAC;AACF,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG,kBAAkB,CAAC;AAElE,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;AAErE,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,oBAAoB;IACpB,QAAQ,CAAC,WAAW,EAAE,MAAM,EAAE,CAAC;IAC/B,kEAAkE;IAClE,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3C,sCAAsC;IACtC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;CACrE;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,GAAG,IAAI,CAAC;CACjE;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,SAAS,GAAG,IAAI,CAAC;CACrE;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B"}

package/dist/src/react/use-playground-state.d.ts

@@ -0,0 +1,53 @@
+import { CompilerOptions } from '@typespec/compiler';
+import { PlaygroundSample } from '../types.js';
+export interface PlaygroundState {
+    /** Emitter to use */
+    emitter?: string;
+    /** Emitter options */
+    compilerOptions?: CompilerOptions;
+    /** Sample to use */
+    sampleName?: string;
+    /** Selected viewer */
+    selectedViewer?: string;
+    /** Internal state of viewers */
+    viewerState?: Record<string, any>;
+    /** TypeSpec content */
+    content?: string;
+}
+export interface UsePlaygroundStateProps {
+    /** List of available libraries */
+    readonly libraries: readonly string[];
+    /** Samples available */
+    samples?: Record<string, PlaygroundSample>;
+    /** Playground state (controlled) */
+    playgroundState?: PlaygroundState;
+    /** Default playground state if leaving this unmanaged */
+    defaultPlaygroundState?: PlaygroundState;
+    /** Callback when playground state changes */
+    onPlaygroundStateChange?: (state: PlaygroundState) => void;
+    /**
+     * Default emitter to use if not provided in defaultPlaygroundState.
+     * @deprecated Use defaultPlaygroundState.emitter instead
+     */
+    defaultEmitter?: string;
+    /** Default content if not provided in defaultPlaygroundState */
+    defaultContent?: string;
+}
+export interface PlaygroundStateResult {
+    selectedEmitter: string;
+    compilerOptions: CompilerOptions;
+    selectedSampleName: string;
+    selectedViewer?: string;
+    viewerState: Record<string, any>;
+    content: string;
+    onSelectedEmitterChange: (emitter: string) => void;
+    onCompilerOptionsChange: (compilerOptions: CompilerOptions) => void;
+    onSelectedSampleNameChange: (sampleName: string) => void;
+    onSelectedViewerChange: (selectedViewer: string) => void;
+    onViewerStateChange: (viewerState: Record<string, any>) => void;
+    onContentChange: (content: string) => void;
+    playgroundState: PlaygroundState;
+    setPlaygroundState: (state: PlaygroundState) => void;
+}
+export declare function usePlaygroundState({ libraries, samples, playgroundState: controlledPlaygroundState, defaultPlaygroundState, onPlaygroundStateChange, defaultEmitter, defaultContent, }: UsePlaygroundStateProps): PlaygroundStateResult;
+//# sourceMappingURL=use-playground-state.d.ts.map

package/dist/src/react/use-playground-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-playground-state.d.ts","sourceRoot":"","sources":["../../../src/react/use-playground-state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAG1D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,MAAM,WAAW,eAAe;IAC9B,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sBAAsB;IACtB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,oBAAoB;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sBAAsB;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAClC,uBAAuB;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,uBAAuB;IACtC,kCAAkC;IAClC,QAAQ,CAAC,SAAS,EAAE,SAAS,MAAM,EAAE,CAAC;IAEtC,wBAAwB;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAE3C,oCAAoC;IACpC,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,yDAAyD;IACzD,sBAAsB,CAAC,EAAE,eAAe,CAAC;IACzC,6CAA6C;IAC7C,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAE3D;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,gEAAgE;IAChE,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,qBAAqB;IAEpC,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,eAAe,CAAC;IACjC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACjC,OAAO,EAAE,MAAM,CAAC;IAGhB,uBAAuB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,uBAAuB,EAAE,CAAC,eAAe,EAAE,eAAe,KAAK,IAAI,CAAC;IACpE,0BAA0B,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,sBAAsB,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,mBAAmB,EAAE,CAAC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAChE,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAG3C,eAAe,EAAE,eAAe,CAAC;IACjC,kBAAkB,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CACtD;AAED,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,OAAO,EACP,eAAe,EAAE,yBAAyB,EAC1C,sBAAsB,EACtB,uBAAuB,EAEvB,cAAc,EACd,cAAc,GACf,EAAE,uBAAuB,GAAG,qBAAqB,CA0GjD"}

package/dist/stories/footer/footer-item.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import { FooterItem } from '../../src/react/footer/index.js';
 declare const meta: Meta<typeof FooterItem>;
 export default meta;

package/dist/stories/footer/footer-item.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"footer-item.stories.d.ts","sourceRoot":"","sources":["../../../stories/footer/footer-item.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAU,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAErE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAUjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AACF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC"}
+{"version":3,"file":"footer-item.stories.d.ts","sourceRoot":"","sources":["../../../stories/footer/footer-item.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAU,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAErE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAUjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AACF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC"}

package/dist/stories/footer/footer-version-item.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import { FooterVersionItem } from '../../src/react/footer/index.js';
 declare const meta: Meta<typeof FooterVersionItem>;
 export default meta;

package/dist/stories/footer/footer-version-item.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"footer-version-item.stories.d.ts","sourceRoot":"","sources":["../../../stories/footer/footer-version-item.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAEL,iBAAiB,EAElB,MAAM,iCAAiC,CAAC;AAoBzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,iBAAiB,CAUxC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAEhD,eAAO,MAAM,QAAQ,EAAE,KAGtB,CAAC;AAaF,eAAO,MAAM,YAAY,EAAE,KAI1B,CAAC"}
+{"version":3,"file":"footer-version-item.stories.d.ts","sourceRoot":"","sources":["../../../stories/footer/footer-version-item.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D,OAAO,EAEL,iBAAiB,EAElB,MAAM,iCAAiC,CAAC;AAoBzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,iBAAiB,CAUxC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAEhD,eAAO,MAAM,QAAQ,EAAE,KAGtB,CAAC;AAaF,eAAO,MAAM,YAAY,EAAE,KAI1B,CAAC"}

package/dist/stories/footer/footer.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import { Footer } from '../../src/react/footer/index.js';
 declare const meta: Meta<typeof Footer>;
 export default meta;

package/dist/stories/footer/footer.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"footer.stories.d.ts","sourceRoot":"","sources":["../../../stories/footer/footer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,MAAM,EAAiC,MAAM,iCAAiC,CAAC;AAoBxF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAU7B,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAShC,CAAC"}
+{"version":3,"file":"footer.stories.d.ts","sourceRoot":"","sources":["../../../stories/footer/footer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,MAAM,EAAiC,MAAM,iCAAiC,CAAC;AAoBxF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAU7B,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAShC,CAAC"}

package/dist/stories/playground.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import { Playground } from '../src/react/playground.js';
 declare const meta: Meta<typeof Playground>;
 export default meta;

package/dist/stories/playground.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"playground.stories.d.ts","sourceRoot":"","sources":["../../stories/playground.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAQxD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAIjC,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAqBF,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC"}
+{"version":3,"file":"playground.stories.d.ts","sourceRoot":"","sources":["../../stories/playground.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAQxD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAIjC,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAqBF,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typespec/playground",
-  "version": "0.9.0-dev.3",
+  "version": "0.9.0-dev.5",
   "author": "Microsoft Corporation",
   "description": "TypeSpec playground UI components.",
   "homepage": "https://typespec.io",
@@ -59,24 +59,24 @@
     "!dist/test/**"
   ],
   "dependencies": {
-    "@fluentui/react-components": "~9.61.2",
+    "@fluentui/react-components": "~9.66.1",
     "@fluentui/react-icons": "^2.0.292",
-    "@typespec/bundler": "^0.3.0 || >=0.4.0-dev <0.4.0",
-    "@typespec/compiler": "^0.67.2 || >=0.68.0-dev <0.68.0",
-    "@typespec/html-program-viewer": "^0.67.1 || >=0.68.0-dev <0.68.0",
-    "@typespec/http": "^0.67.1 || >=0.68.0-dev <0.68.0",
-    "@typespec/openapi": "^0.67.1 || >=0.68.0-dev <0.68.0",
-    "@typespec/openapi3": "^0.67.1 || >=0.68.0-dev <0.68.0",
-    "@typespec/protobuf": "^0.67.1 || >=0.68.0-dev <0.68.0",
-    "@typespec/rest": "^0.67.1 || >=0.68.0-dev <0.68.0",
-    "@typespec/versioning": "^0.67.1 || >=0.68.0-dev <0.68.0",
+    "@typespec/bundler": "^0.4.1 || >=0.5.0-dev <0.5.0",
+    "@typespec/compiler": "^1.1.0",
+    "@typespec/html-program-viewer": "^0.71.0 || >=0.72.0-dev <0.72.0",
+    "@typespec/http": "^1.1.0",
+    "@typespec/openapi": "^1.1.0",
+    "@typespec/openapi3": "^1.1.0",
+    "@typespec/protobuf": "^0.71.0 || >=0.72.0-dev <0.72.0",
+    "@typespec/rest": "^0.71.0 || >=0.72.0-dev <0.72.0",
+    "@typespec/versioning": "^0.71.0 || >=0.72.0-dev <0.72.0",
     "clsx": "^2.1.1",
     "debounce": "~2.2.0",
     "lzutf8": "0.6.3",
     "monaco-editor": "~0.52.2",
     "react": "~18.3.1",
     "react-dom": "~18.3.1",
-    "react-error-boundary": "^5.0.0",
+    "react-error-boundary": "^6.0.0",
     "swagger-ui-dist": "^5.20.1",
     "vscode-languageserver": "~9.0.1",
     "vscode-languageserver-textdocument": "~1.0.12"
@@ -84,27 +84,24 @@
   "devDependencies": {
     "@babel/core": "^7.26.10",
     "@playwright/test": "^1.51.1",
-    "@storybook/addon-actions": "^8.6.7",
-    "@storybook/cli": "^8.6.7",
-    "@storybook/react": "^8.6.7",
-    "@storybook/react-vite": "^8.6.7",
-    "@storybook/test": "^8.6.7",
-    "@storybook/types": "^8.6.7",
+    "@storybook/cli": "^9.0.12",
+    "@storybook/react-vite": "^9.0.12",
     "@types/debounce": "~1.2.4",
-    "@types/node": "~22.13.11",
+    "@types/node": "~24.0.3",
     "@types/react": "~18.3.11",
     "@types/react-dom": "~18.3.0",
     "@types/swagger-ui-dist": "~3.30.5",
-    "@typespec/bundler": "^0.3.0 || >=0.4.0-dev <0.4.0",
-    "@vitejs/plugin-react": "~4.3.4",
+    "@typespec/bundler": "^0.4.1 || >=0.5.0-dev <0.5.0",
+    "@vitejs/plugin-react": "~4.4.1",
     "c8": "^10.1.3",
     "cross-env": "~7.0.3",
-    "es-module-shims": "~2.0.10",
+    "es-module-shims": "~2.6.0",
     "rimraf": "~6.0.1",
+    "storybook": "^9.0.12",
     "typescript": "~5.8.2",
-    "vite": "^6.2.2",
+    "vite": "^6.2.7",
     "vite-plugin-checker": "^0.9.1",
-    "vite-plugin-dts": "4.5.3",
+    "vite-plugin-dts": "4.5.4",
     "@typespec/react-components": "^0.57.0"
   },
   "peerDependencies": {},
@@ -113,7 +110,7 @@
     "build": "vite build",
     "watch": "vite build --watch",
     "storybook": "sb dev",
-    "build: storybook": "sb build",
+    "build:storybook": "sb build",
     "preview": "pnpm build && vite preview",
     "start": "vite",
     "test": "echo 'no tests'",