@typespec/playground 0.14.0-dev.2 → 0.14.0-dev.4

package/dist/src/editor-command-bar/editor-command-bar.d.ts

@@ -1,11 +1,12 @@
-import { FunctionComponent, ReactNode } from 'react';
+import { FunctionComponent } from 'react';
+import { CommandBarItem } from '../react/responsive-command-bar/index.js';
 import { BrowserHost, PlaygroundSample } from '../types.js';
 export interface EditorCommandBarProps {
-    documentationUrl?: string;
     saveCode: () => Promise<void> | void;
     formatCode: () => Promise<void> | void;
     fileBug?: () => Promise<void> | void;
-    commandBarButtons?: ReactNode;
+    /** Additional items provided by the consumer. */
+    commandBarItems?: readonly CommandBarItem[];
     host: BrowserHost;
     selectedEmitter: string;
     onSelectedEmitterChange: (emitter: string) => void;

package/dist/src/editor-command-bar/editor-command-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor-command-bar.d.ts","sourceRoot":"","sources":["../../../src/editor-command-bar/editor-command-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAW,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxE,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAGjE,MAAM,WAAW,qBAAqB;IACpC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACrC,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACrC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,IAAI,EAAE,WAAW,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,uBAAuB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnD,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAC3C,kBAAkB,EAAE,MAAM,CAAC;IAC3B,0BAA0B,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1D;AACD,eAAO,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CAmErE,CAAC"}
+{"version":3,"file":"editor-command-bar.d.ts","sourceRoot":"","sources":["../../../src/editor-command-bar/editor-command-bar.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAkC,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAI/E,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEjE,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACrC,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACrC,iDAAiD;IACjD,eAAe,CAAC,EAAE,SAAS,cAAc,EAAE,CAAC;IAC5C,IAAI,EAAE,WAAW,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,uBAAuB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnD,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAC3C,kBAAkB,EAAE,MAAM,CAAC;IAC3B,0BAA0B,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1D;AAED,eAAO,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CAwHrE,CAAC"}

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

@@ -1,3 +1,4 @@
+export type { CommandBarItem } from '../react/responsive-command-bar/index.js';
 export { usePlaygroundContext } from './context/index.js';
 export { DiagnosticList } from './diagnostic-list/diagnostic-list.js';
 export type { DiagnosticListProps } from './diagnostic-list/diagnostic-list.js';

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

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

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

@@ -1,5 +1,6 @@
 import { FunctionComponent, ReactNode } from 'react';
 import { BrowserHost, PlaygroundSample } from '../types.js';
+import { CommandBarItem } from './responsive-command-bar/index.js';
 import { FileOutputViewer, ProgramViewer } from './types.js';
 import { PlaygroundState } from './use-playground-state.js';
 export type { PlaygroundState };
@@ -23,10 +24,8 @@ export interface PlaygroundProps {
      */
     defaultEmitter?: string;
     onFileBug?: () => void;
-    /** Additional buttons to show up in the command bar */
-    commandBarButtons?: ReactNode;
-    /** Playground links */
-    links?: PlaygroundLinks;
+    /** Additional items to show in the command bar. */
+    commandBarItems?: CommandBarItem[];
     /** Custom viewers to view the typespec program */
     viewers?: ProgramViewer[];
     /** Custom file viewers that enabled for certain emitters. Key of the map is emitter name */
@@ -47,10 +46,6 @@ export interface PlaygroundSaveData extends PlaygroundState {
     /** Emitter name. */
     emitter: string;
 }
-export interface PlaygroundLinks {
-    /** Link to documentation */
-    documentationUrl?: string;
-}
 /**
  * Playground component for TypeSpec with consolidated state management.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"playground.d.ts","sourceRoot":"","sources":["../../../src/react/playground.tsx"],"names":[],"mappings":"AAGA,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;AASjE,OAAO,KAAK,EAAoB,gBAAgB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AACpF,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,CA0PzD,CAAC"}
+{"version":3,"file":"playground.d.ts","sourceRoot":"","sources":["../../../src/react/playground.tsx"],"names":[],"mappings":"AAGA,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;AASjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAoB,gBAAgB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEpF,OAAO,EAAsB,KAAK,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAIrF,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,mDAAmD;IACnD,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IAEnC,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAmRzD,CAAC"}

package/dist/src/react/responsive-command-bar/index.d.ts

@@ -0,0 +1,3 @@
+export { ResponsiveCommandBar } from './responsive-command-bar.js';
+export type { CommandBarItem, ResponsiveCommandBarProps } from './responsive-command-bar.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/react/responsive-command-bar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/responsive-command-bar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,YAAY,EAAE,cAAc,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/src/react/responsive-command-bar/responsive-command-bar.d.ts

@@ -0,0 +1,36 @@
+import { FunctionComponent, ReactNode } from 'react';
+/** Defines a single item in a responsive command bar. */
+export interface CommandBarItem {
+    /** Unique identifier for the item. */
+    readonly id: string;
+    /** Display label used for tooltip (desktop) and menu text (mobile). */
+    readonly label: string;
+    /** Icon element. */
+    readonly icon?: ReactNode;
+    /** Click handler for simple items. */
+    readonly onClick?: () => void;
+    /** If true, always visible as an icon button. If false (default), goes to overflow menu on mobile. */
+    readonly pinned?: boolean;
+    /** Sub-items rendered as a dropdown (desktop) or nested submenu (mobile). */
+    readonly children?: readonly CommandBarItem[];
+    /** Additional content rendered alongside the command bar (e.g., dialogs triggered by children). */
+    readonly content?: ReactNode;
+    /** Custom toolbar element for desktop rendering. Overrides default and children-based rendering. */
+    readonly toolbarItem?: ReactNode;
+    /** Custom menu element for mobile overflow menu. Overrides default and children-based rendering. */
+    readonly menuItem?: ReactNode;
+    /** Alignment group on the desktop toolbar. Defaults to "left". */
+    readonly align?: "left" | "right";
+}
+export interface ResponsiveCommandBarProps {
+    /** The items to render in the command bar. */
+    readonly items: readonly CommandBarItem[];
+    /** Whether to render in mobile (compact) mode. */
+    readonly isMobile: boolean;
+}
+/**
+ * A generic responsive command bar that renders items as a toolbar on desktop
+ * and collapses non-pinned items into a hamburger overflow menu on mobile.
+ */
+export declare const ResponsiveCommandBar: FunctionComponent<ResponsiveCommandBarProps>;
+//# sourceMappingURL=responsive-command-bar.d.ts.map

package/dist/src/react/responsive-command-bar/responsive-command-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-command-bar.d.ts","sourceRoot":"","sources":["../../../../src/react/responsive-command-bar/responsive-command-bar.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAY,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzE,yDAAyD;AACzD,MAAM,WAAW,cAAc;IAC7B,sCAAsC;IACtC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,uEAAuE;IACvE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,oBAAoB;IACpB,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAC1B,sCAAsC;IACtC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,sGAAsG;IACtG,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAC1B,6EAA6E;IAC7E,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,cAAc,EAAE,CAAC;IAC9C,mGAAmG;IACnG,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B,oGAAoG;IACpG,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,oGAAoG;IACpG,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,kEAAkE;IAClE,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACnC;AAED,MAAM,WAAW,yBAAyB;IACxC,8CAA8C;IAC9C,QAAQ,CAAC,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IAC1C,kDAAkD;IAClD,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,CA8D7E,CAAC"}

package/dist/src/react/samples-drawer/index.d.ts

@@ -1,2 +1,2 @@
-export { SamplesDrawerTrigger, type SamplesDrawerProps } from './samples-drawer-trigger.js';
+export { SamplesDrawerOverlay, SamplesDrawerTrigger, type SamplesDrawerOverlayProps, type SamplesDrawerProps, } from './samples-drawer-trigger.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/react/samples-drawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/samples-drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,KAAK,kBAAkB,EAAE,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/samples-drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,oBAAoB,EACpB,KAAK,yBAAyB,EAC9B,KAAK,kBAAkB,GACxB,MAAM,6BAA6B,CAAC"}

package/dist/src/react/samples-drawer/samples-drawer-trigger.d.ts

@@ -4,5 +4,12 @@ export interface SamplesDrawerProps {
     samples: Record<string, PlaygroundSample>;
     onSelectedSampleNameChange: (sampleName: string) => void;
 }
+export interface SamplesDrawerOverlayProps extends SamplesDrawerProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+/** The overlay drawer showing the sample gallery. Controlled via open/onOpenChange. */
+export declare const SamplesDrawerOverlay: FunctionComponent<SamplesDrawerOverlayProps>;
+/** Toolbar button trigger + overlay drawer for samples. */
 export declare const SamplesDrawerTrigger: FunctionComponent<SamplesDrawerProps>;
 //# sourceMappingURL=samples-drawer-trigger.d.ts.map

package/dist/src/react/samples-drawer/samples-drawer-trigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"samples-drawer-trigger.d.ts","sourceRoot":"","sources":["../../../../src/react/samples-drawer/samples-drawer-trigger.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAyB,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIvD,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAC1C,0BAA0B,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1D;AAED,eAAO,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,kBAAkB,CAwDtE,CAAC"}
+{"version":3,"file":"samples-drawer-trigger.d.ts","sourceRoot":"","sources":["../../../../src/react/samples-drawer/samples-drawer-trigger.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAyB,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIvD,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAC1C,0BAA0B,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1D;AAED,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACnE,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC;AAED,uFAAuF;AACvF,eAAO,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,CA4C7E,CAAC;AAEF,2DAA2D;AAC3D,eAAO,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,kBAAkB,CA0BtE,CAAC"}

package/dist/src/react/use-mobile.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Hook that detects whether the viewport is at or below the mobile breakpoint.
+ * Uses `matchMedia` with a listener for responsive changes.
+ */
+export declare function useIsMobile(): boolean;
+//# sourceMappingURL=use-mobile.d.ts.map

package/dist/src/react/use-mobile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile.d.ts","sourceRoot":"","sources":["../../../src/react/use-mobile.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,wBAAgB,WAAW,IAAI,OAAO,CAkBrC"}

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

@@ -0,0 +1,10 @@
+import { FunctionComponent, ReactNode } from 'react';
+export type ViewMode = "editor" | "output" | "both";
+export interface ViewToggleProps {
+    viewMode: ViewMode;
+    onViewModeChange: (mode: ViewMode) => void;
+    /** Additional toolbar actions rendered on the right side of the bar. */
+    actions?: ReactNode;
+}
+export declare const ViewToggle: FunctionComponent<ViewToggleProps>;
+//# sourceMappingURL=view-toggle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"view-toggle.d.ts","sourceRoot":"","sources":["../../../src/react/view-toggle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5E,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEpD,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,QAAQ,CAAC;IACnB,gBAAgB,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC3C,wEAAwE;IACxE,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAiCzD,CAAC"}

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

@@ -1,4 +1,3 @@
-import { PlaygroundLinks } from '../react/playground.js';
 import { PlaygroundSampleConfig } from '../tooling/types.js';
 import { PlaygroundSample } from '../types.js';
 export interface PlaygroundUserConfig extends Omit<PlaygroundConfig, "samples"> {
@@ -12,6 +11,5 @@ export interface PlaygroundConfig {
     readonly defaultEmitter: string;
     readonly libraries: readonly string[];
     readonly samples: Record<string, PlaygroundSample>;
-    readonly links?: PlaygroundLinks;
 }
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/vite/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC;IAC7E;;OAEG;IACH,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IACvC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,sBAAsB,CAAC,CAAC;CAC3D;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,SAAS,EAAE,SAAS,MAAM,EAAE,CAAC;IACtC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IACnD,QAAQ,CAAC,KAAK,CAAC,EAAE,eAAe,CAAC;CAClC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/vite/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC;IAC7E;;OAEG;IACH,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IACvC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,sBAAsB,CAAC,CAAC;CAC3D;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,SAAS,EAAE,SAAS,MAAM,EAAE,CAAC;IACtC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;CACpD"}

package/dist/state-storage.js

@@ -1,82 +1,68 @@
-import lzutf8 from 'lzutf8';
-
+import lzutf8 from "lzutf8";
+//#region src/state-storage.ts
+/**
+* Generic storage mechanism for data in the playground.
+* @param schema Schema of the data to be serialized in the query
+* @returns
+*/
 function createUrlStateStorage(schema) {
-  return { load, save, resolveSearchParams };
-  function load() {
-    const result = {};
-    const parsed = new URLSearchParams(window.location.search);
-    for (const [key, item] of Object.entries(schema)) {
-      const value = parsed.get(item.queryParam);
-      const decompressed = value && decompress(item, value);
-      const deserialized = decompressed && deserialize(item, decompressed);
-      if (deserialized) {
-        result[key] = deserialized;
-      }
-    }
-    return result;
-  }
-  function decompress(item, value) {
-    if (item.compress) {
-      try {
-        return lzutf8.decompress(value, { inputEncoding: "Base64" });
-      } catch (e) {
-        console.error(
-          `Error decompressing query parameter ${item.queryParam} with content:`,
-          value
-        );
-        return void 0;
-      }
-    } else {
-      return value;
-    }
-  }
-  function deserialize(item, value) {
-    if (item.type === "object") {
-      try {
-        return JSON.parse(value);
-      } catch (e) {
-        console.error(
-          `Error decompressing query parameter ${item.queryParam} with content:`,
-          value
-        );
-        return void 0;
-      }
-    } else {
-      return value;
-    }
-  }
-  function save(data) {
-    const params = resolveSearchParams(data, true);
-    history.pushState(null, "", window.location.pathname + "?" + params.toString());
-  }
-  function resolveSearchParams(data, mergeWithExisting = false) {
-    const params = new URLSearchParams(mergeWithExisting ? location.search : void 0);
-    for (const [key, item] of Object.entries(schema)) {
-      const value = data[key];
-      if (value) {
-        const serialized = serialize(item, value);
-        const compressed = compress(item, serialized);
-        params.set(item.queryParam, compressed);
-      } else {
-        params.delete(item.queryParam);
-      }
-    }
-    return params;
-  }
-  function compress(item, value) {
-    if (item.compress) {
-      return lzutf8.compress(value, { outputEncoding: "Base64" });
-    } else {
-      return value;
-    }
-  }
-  function serialize(item, value) {
-    if (item.type === "object") {
-      return JSON.stringify(value);
-    } else {
-      return value;
-    }
-  }
+	return {
+		load,
+		save,
+		resolveSearchParams
+	};
+	function load() {
+		const result = {};
+		const parsed = new URLSearchParams(window.location.search);
+		for (const [key, item] of Object.entries(schema)) {
+			const value = parsed.get(item.queryParam);
+			const decompressed = value && decompress(item, value);
+			const deserialized = decompressed && deserialize(item, decompressed);
+			if (deserialized) result[key] = deserialized;
+		}
+		return result;
+	}
+	function decompress(item, value) {
+		if (item.compress) try {
+			return lzutf8.decompress(value, { inputEncoding: "Base64" });
+		} catch (e) {
+			console.error(`Error decompressing query parameter ${item.queryParam} with content:`, value);
+			return;
+		}
+		else return value;
+	}
+	function deserialize(item, value) {
+		if (item.type === "object") try {
+			return JSON.parse(value);
+		} catch (e) {
+			console.error(`Error decompressing query parameter ${item.queryParam} with content:`, value);
+			return;
+		}
+		else return value;
+	}
+	function save(data) {
+		const params = resolveSearchParams(data, true);
+		history.pushState(null, "", window.location.pathname + "?" + params.toString());
+	}
+	function resolveSearchParams(data, mergeWithExisting = false) {
+		const params = new URLSearchParams(mergeWithExisting ? location.search : void 0);
+		for (const [key, item] of Object.entries(schema)) {
+			const value = data[key];
+			if (value) {
+				const compressed = compress(item, serialize(item, value));
+				params.set(item.queryParam, compressed);
+			} else params.delete(item.queryParam);
+		}
+		return params;
+	}
+	function compress(item, value) {
+		if (item.compress) return lzutf8.compress(value, { outputEncoding: "Base64" });
+		else return value;
+	}
+	function serialize(item, value) {
+		if (item.type === "object") return JSON.stringify(value);
+		else return value;
+	}
 }
-
+//#endregion
 export { createUrlStateStorage };

package/dist/style.css

@@ -175,6 +175,13 @@
 ._tree-row_16t0l_4 ._column_16t0l_44:last-child {
   margin-right: 5px;
 }
+/*$vite$:1*/._bar_1gurd_1 {
+  border-bottom: 1px solid var(--colorNeutralStroke1);
+}
+
+._divider_1gurd_5 {
+  flex: 1;
+}
 ._samples-grid_1dkte_1 {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
@@ -251,17 +258,6 @@
   margin: 0;
   line-height: 1.4;
 }
-._bar_15c2c_1 {
-  border-bottom: 1px solid var(--colorNeutralStroke1);
-}
-
-._divider_15c2c_5 {
-  flex: 1;
-}
-
-._spacer_15c2c_9 {
-  width: 10px;
-}
 ._settings_1yvpj_1 {
   display: flex;
   flex-direction: column;
@@ -464,7 +460,7 @@
 ._viewer-error_eeqi3_41 {
   padding: 20px;
 }
-._layout_l03ni_1 {
+._layout_63onh_1 {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -472,9 +468,16 @@
   overflow: hidden;
 }
 
-._edit-pane_l03ni_9 {
+._edit-pane_63onh_9 {
+  display: flex;
+  flex-direction: column;
+}
+
+._single-pane_63onh_14 {
   display: flex;
   flex-direction: column;
+  height: 100%;
+  width: 100%;
 }
 ._header_1qhql_1 {
   padding: 5px;
@@ -535,8 +538,26 @@
 ._internal-compiler-error_kxgwp_16 {
   padding: 10px;
 }
+._view-toggle-bar_1yl8k_1 {
+  display: flex;
+  align-items: center;
+  padding: 0 4px;
+  border-bottom: 1px solid var(--colorNeutralStroke1);
+  background-color: var(--colorNeutralBackground1);
+  flex-shrink: 0;
+}
+
+._view-toggle-tabs_1yl8k_10 {
+  min-height: auto;
+}
+
+._view-toggle-actions_1yl8k_14 {
+  margin-left: auto;
+  overflow: hidden;
+}
 ._swagger-ui-container_1c81n_1 {
   width: 100%;
   height: 100%;
   overflow: auto;
 }
+/*$vite$:1*/

package/dist/tooling/index.js

@@ -1,26 +1,27 @@
-import { getDirectoryPath } from '@typespec/compiler';
-import { readFile, mkdir, writeFile } from 'fs/promises';
-
+import { getDirectoryPath } from "@typespec/compiler";
+import { mkdir, readFile, writeFile } from "fs/promises";
+//#region src/tooling/index.ts
+/**
+* @experimental This API is experimental
+*/
 async function buildSamples_experimental(rootDir, output, samples) {
-  const resolvedSamples = {};
-  for (const [name, config] of Object.entries(samples)) {
-    const content = await readFile(`${rootDir}/${config.filename}`, "utf-8");
-    resolvedSamples[name] = {
-      filename: config.filename,
-      content,
-      preferredEmitter: config.preferredEmitter,
-      description: config.description,
-      compilerOptions: config.compilerOptions
-    };
-  }
-  const dir = getDirectoryPath(output);
-  await mkdir(dir, { recursive: true });
-  const dts = [
-    `import type { PlaygroundSample } from "@typespec/playground";`,
-    `const samples: Record<string, PlaygroundSample> = ${JSON.stringify(resolvedSamples, null, 2)};`,
-    `export default samples;`
-  ].join("\n");
-  await writeFile(output, dts);
+	const resolvedSamples = {};
+	for (const [name, config] of Object.entries(samples)) {
+		const content = await readFile(`${rootDir}/${config.filename}`, "utf-8");
+		resolvedSamples[name] = {
+			filename: config.filename,
+			content,
+			preferredEmitter: config.preferredEmitter,
+			description: config.description,
+			compilerOptions: config.compilerOptions
+		};
+	}
+	await mkdir(getDirectoryPath(output), { recursive: true });
+	await writeFile(output, [
+		`import type { PlaygroundSample } from "@typespec/playground";`,
+		`const samples: Record<string, PlaygroundSample> = ${JSON.stringify(resolvedSamples, null, 2)};`,
+		`export default samples;`
+	].join("\n"));
 }
-
+//#endregion
 export { buildSamples_experimental };

package/dist/vite/index.js

@@ -1,91 +1,67 @@
-import { typespecBundlePlugin } from '@typespec/bundler/vite';
-import react from '@vitejs/plugin-react';
-
+import { typespecBundlePlugin } from "@typespec/bundler/vite";
+import react from "@vitejs/plugin-react";
+//#region src/vite/index.ts
 function definePlaygroundViteConfig(config) {
-  return {
-    base: "./",
-    build: {
-      target: "esnext",
-      chunkSizeWarningLimit: 5e3,
-      rollupOptions: {
-        output: {
-          manualChunks(id) {
-            if (id.includes("/node_modules/monaco-editor/esm/vs/editor")) {
-              return "monaco";
-            }
-            return void 0;
-          }
-        }
-      }
-    },
-    esbuild: {
-      logOverride: { "this-is-undefined-in-esm": "silent" }
-    },
-    assetsInclude: [/\.tsp$/],
-    optimizeDeps: {
-      exclude: ["swagger-ui"]
-    },
-    plugins: [
-      react({}),
-      playgroundManifestPlugin(config),
-      !config.skipBundleLibraries ? typespecBundlePlugin({
-        folderName: "libs",
-        libraries: config.libraries
-      }) : void 0
-    ],
-    server: {
-      fs: {
-        strict: false
-      }
-    }
-  };
+	return {
+		base: "./",
+		build: {
+			target: "esnext",
+			chunkSizeWarningLimit: 5e3,
+			rollupOptions: { output: { manualChunks(id) {
+				if (id.includes("/node_modules/monaco-editor/esm/vs/editor")) return "monaco";
+			} } }
+		},
+		esbuild: { logOverride: { "this-is-undefined-in-esm": "silent" } },
+		assetsInclude: [/\.tsp$/],
+		optimizeDeps: { exclude: ["swagger-ui"] },
+		plugins: [
+			react({}),
+			playgroundManifestPlugin(config),
+			!config.skipBundleLibraries ? typespecBundlePlugin({
+				folderName: "libs",
+				libraries: config.libraries
+			}) : void 0
+		],
+		server: { fs: { strict: false } }
+	};
 }
 function playgroundManifestPlugin(config) {
-  const { samples, ...manifest } = config;
-  let viteConfig;
-  return {
-    name: "playground-manifest",
-    enforce: "pre",
-    // Need to run before resolving library imports to stub `@typespec/playground/manifest`
-    async configResolved(c) {
-      viteConfig = c;
-    },
-    resolveId(id) {
-      if (id === "@typespec/playground/manifest") {
-        return id;
-      }
-      return null;
-    },
-    load(id) {
-      if (id === `@typespec/playground/manifest`) {
-        const sampleImport = Object.values(samples ?? {}).map(
-          (sampleValue, index) => `import s${index} from "${viteConfig.root}/${sampleValue.filename}?raw"`
-        ).join("\n");
-        const sampleObj = [
-          "{",
-          ...Object.entries(samples ?? {}).map(
-            ([label, config2], index) => `${JSON.stringify(label)}: {
-                fileName: ${JSON.stringify(config2.filename)},
-                preferredEmitter: ${config2.preferredEmitter ? JSON.stringify(config2.preferredEmitter) : "undefined"},
+	const { samples, ...manifest } = config;
+	let viteConfig;
+	return {
+		name: "playground-manifest",
+		enforce: "pre",
+		async configResolved(c) {
+			viteConfig = c;
+		},
+		resolveId(id) {
+			if (id === "@typespec/playground/manifest") return id;
+			return null;
+		},
+		load(id) {
+			if (id === `@typespec/playground/manifest`) {
+				const sampleImport = Object.values(samples ?? {}).map((sampleValue, index) => `import s${index} from "${viteConfig.root}/${sampleValue.filename}?raw"`).join("\n");
+				const sampleObj = [
+					"{",
+					...Object.entries(samples ?? {}).map(([label, config], index) => `${JSON.stringify(label)}: {
+                fileName: ${JSON.stringify(config.filename)},
+                preferredEmitter: ${config.preferredEmitter ? JSON.stringify(config.preferredEmitter) : "undefined"},
                 content: s${index},
-                ${config2.compilerOptions ? `compilerOptions: ${JSON.stringify(config2.compilerOptions)},` : ""}
+                ${config.compilerOptions ? `compilerOptions: ${JSON.stringify(config.compilerOptions)},` : ""}
 
-              }, `
-          ),
-          "}"
-        ].join("\n");
-        const file = `
+              }, `),
+					"}"
+				].join("\n");
+				return `
         ${sampleImport};
         
         export default {
            ...${JSON.stringify(manifest)},
           samples: ${sampleObj}
         };`;
-        return file;
-      }
-      return void 0;
-    }
-  };
+			}
+		}
+	};
 }
-
+//#endregion
 export { definePlaygroundViteConfig };