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

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/style.css

@@ -175,6 +175,13 @@
 ._tree-row_16t0l_4 ._column_16t0l_44:last-child {
   margin-right: 5px;
 }
+._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,6 +538,23 @@
 ._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%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typespec/playground",
-  "version": "0.14.0-dev.2",
+  "version": "0.14.0-dev.3",
   "author": "Microsoft Corporation",
   "description": "TypeSpec playground UI components.",
   "homepage": "https://typespec.io",
@@ -85,8 +85,11 @@
   "devDependencies": {
     "@babel/core": "^7.29.0",
     "@playwright/test": "^1.58.2",
-    "@storybook/cli": "^10.2.19",
-    "@storybook/react-vite": "^10.2.19",
+    "@storybook/cli": "^10.1.8",
+    "@storybook/react-vite": "^10.1.8",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/debounce": "~1.2.4",
     "@types/node": "~25.5.0",
     "@types/react": "~19.2.14",
@@ -103,6 +106,7 @@
     "vite": "^7.2.7",
     "vite-plugin-checker": "^0.12.0",
     "vite-plugin-dts": "4.5.4",
+    "vitest": "^4.1.0",
     "@typespec/react-components": "^0.57.0"
   },
   "scripts": {
@@ -113,8 +117,8 @@
     "build:storybook": "sb build",
     "preview": "pnpm build && vite preview",
     "start": "vite",
-    "test": "echo 'no tests'",
-    "test:ci": "echo 'no tests'",
+    "test": "vitest run",
+    "test:ci": "vitest run --coverage --reporter=junit --reporter=default",
     "lint": "eslint . --max-warnings=0",
     "lint:fix": "eslint . --fix"
   }