@typespec/playground 0.12.0-dev.6 → 0.12.0-dev.8

package/dist/react/index.js

@@ -1,10 +1,10 @@
 import require$$0, { createContext, useContext, memo, useCallback, useRef, useEffect, useMemo, useState, useId as useId$1 } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { mergeClasses, Popover, PopoverTrigger, PopoverSurface, Title3, Table, TableHeader, TableRow, TableHeaderCell, TableBody, TableCell, Select, useId, Label, Checkbox, RadioGroup, Radio, Input, Switch, Divider, Dialog, DialogTrigger, ToolbarButton, DialogSurface, DialogBody, DialogTitle, DialogContent, Toolbar, Tooltip, Link, TabList, Tab, Button, useToastController, Toast, ToastTitle, ToastBody, Toaster, FluentProvider, webLightTheme } from '@fluentui/react-components';
+import { mergeClasses, Popover, PopoverTrigger, PopoverSurface, Title3, Table, TableHeader, TableRow, TableHeaderCell, TableBody, TableCell, Select, tokens, Card, Text, Tooltip, ToolbarButton, OverlayDrawer, DrawerHeader, DrawerHeaderTitle, Button, DrawerBody, useId, Label, Checkbox, RadioGroup, Radio, Input, Switch, Divider, Dialog, DialogTrigger, DialogSurface, DialogBody, DialogTitle, DialogContent, Toolbar, Link, TabList, Tab, useToastController, Toast, ToastTitle, ToastBody, Toaster, FluentProvider, webLightTheme } from '@fluentui/react-components';
 import { getSourceLocation } from '@typespec/compiler';
 import { editor, Uri, MarkerSeverity, KeyMod, KeyCode } from 'monaco-editor';
 import { $ } from '@typespec/compiler/typekit';
-import { Settings24Regular, Save16Regular, Broom16Filled, Bug16Regular, FolderListRegular, DataLineRegular, ErrorCircle16Filled, Warning16Filled, ChevronDown16Regular } from '@fluentui/react-icons';
+import { DocumentBulletList24Regular, Dismiss24Regular, 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, p as printDebugInfo, d as debugGlobals, g as getMonacoRange, c as createBrowserHost, r as registerMonacoLanguage } from '../services-BTSPLy3C.js';
@@ -26,7 +26,7 @@ function usePlaygroundContext() {
 
 const list = "_list_wrnwm_1";
 const item$1 = "_item_wrnwm_4";
-const style$a = {
+const style$b = {
 	list: list,
 	item: item$1,
 	"item--error": "_item--error_wrnwm_15",
@@ -46,9 +46,9 @@ const DiagnosticList = ({
     [onDiagnosticSelected]
   );
   if (diagnostics.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: style$a["list"], children: "No errors" });
+    return /* @__PURE__ */ jsx("div", { className: style$b["list"], children: "No errors" });
   }
-  return /* @__PURE__ */ jsx("div", { className: style$a["list"], children: diagnostics.map((x, i) => {
+  return /* @__PURE__ */ jsx("div", { className: style$b["list"], children: diagnostics.map((x, i) => {
     return /* @__PURE__ */ jsx(DiagnosticItem, { diagnostic: x, onItemSelected: handleItemSelected }, i);
   }) });
 };
@@ -56,19 +56,19 @@ const DiagnosticItem = ({ diagnostic, onItemSelected }) => {
   const handleClick = useCallback(() => {
     onItemSelected(diagnostic);
   }, [diagnostic, onItemSelected]);
-  return /* @__PURE__ */ jsxs("div", { tabIndex: 0, className: style$a["item"], onClick: handleClick, children: [
+  return /* @__PURE__ */ jsxs("div", { tabIndex: 0, className: style$b["item"], onClick: handleClick, children: [
     /* @__PURE__ */ jsx(
       "div",
       {
         className: mergeClasses(
-          (style$a[diagnostic.severity === "error" ? "item--error" : "item--warning"])
+          (style$b[diagnostic.severity === "error" ? "item--error" : "item--warning"])
         ),
         children: diagnostic.severity
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: style$a["item-code"], children: diagnostic.code }),
-    /* @__PURE__ */ jsx("div", { className: style$a["item-message"], children: diagnostic.message }),
-    /* @__PURE__ */ jsx("div", { className: style$a["item-loc"], children: /* @__PURE__ */ jsx(DiagnosticTargetLink, { target: diagnostic.target }) })
+    /* @__PURE__ */ jsx("div", { className: style$b["item-code"], children: diagnostic.code }),
+    /* @__PURE__ */ jsx("div", { className: style$b["item-message"], children: diagnostic.message }),
+    /* @__PURE__ */ jsx("div", { className: style$b["item-loc"], children: /* @__PURE__ */ jsx(DiagnosticTargetLink, { target: diagnostic.target }) })
   ] });
 };
 const DiagnosticTargetLink = memo(({ target }) => {
@@ -133,18 +133,18 @@ function useMonacoModel(uri, language) {
 }
 
 const footer = "_footer_e6dic_1";
-const style$9 = {
+const style$a = {
 	footer: footer,
 	"footer-item": "_footer-item_e6dic_9"
 };
 
 const FooterItem = ({ children, link, className }) => {
-  const resolvedClassName = mergeClasses(style$9["footer-item"], className);
+  const resolvedClassName = mergeClasses(style$a["footer-item"], className);
   return link ? /* @__PURE__ */ jsx("a", { className: resolvedClassName, href: link, target: "_blank", rel: "noopener noreferrer", children }) : /* @__PURE__ */ jsx("div", { className: resolvedClassName, children });
 };
 
 const button = "_button_1c15n_4";
-const style$8 = {
+const style$9 = {
 	"version-item": "_version-item_1c15n_1",
 	button: button
 };
@@ -153,8 +153,8 @@ const FooterVersionItem = memo(({ versionSelector }) => {
   const { host } = usePlaygroundContext();
   const latest = versionSelector?.latest;
   const selected = versionSelector?.selected ?? host.compiler.MANIFEST.version;
-  return /* @__PURE__ */ jsx(FooterItem, { className: style$8["version-item"], children: /* @__PURE__ */ jsxs(Popover, { children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsxs("div", { className: style$8["button"], children: [
+  return /* @__PURE__ */ jsx(FooterItem, { className: style$9["version-item"], children: /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsxs("div", { className: style$9["button"], children: [
       /* @__PURE__ */ jsx("span", { children: "Version " }),
       /* @__PURE__ */ jsx("span", { children: selected }),
       /* @__PURE__ */ jsx("span", { children: latest ? latest === selected ? " (latest)" : " (old)" : "" })
@@ -200,7 +200,7 @@ const VersionSelector = memo(({ versions, selected, latest, onChange }) => {
 });
 
 const Footer = ({ className, children }) => {
-  return /* @__PURE__ */ jsx("div", { className: mergeClasses(style$9.footer, className), children });
+  return /* @__PURE__ */ jsx("div", { className: mergeClasses(style$a.footer, className), children });
 };
 
 function useControllableValue(controlledValue, defaultUncontrolledValue, onChange) {
@@ -988,35 +988,174 @@ const EmitterDropdown = ({
   );
 };
 
-const SamplesDropdown = ({
+const style$8 = {
+	"samples-grid": "_samples-grid_1dkte_1",
+	"sample-card": "_sample-card_1dkte_8",
+	"sample-card-content": "_sample-card-content_1dkte_26",
+	"sample-card-text": "_sample-card-text_1dkte_32",
+	"sample-icon": "_sample-icon_1dkte_40",
+	"sample-icon-pattern": "_sample-icon-pattern_1dkte_53",
+	"sample-icon-initials": "_sample-icon-initials_1dkte_59",
+	"sample-title": "_sample-title_1dkte_66",
+	"sample-description": "_sample-description_1dkte_71"
+};
+
+function hashString(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return Math.abs(hash);
+}
+const iconColors = [
+  { bg: tokens.colorPaletteBlueBackground2, fg: tokens.colorPaletteBlueForeground2 },
+  { bg: tokens.colorPaletteGrapeBackground2, fg: tokens.colorPaletteGrapeForeground2 },
+  { bg: tokens.colorPaletteForestBackground2, fg: tokens.colorPaletteForestForeground2 },
+  { bg: tokens.colorPalettePumpkinBackground2, fg: tokens.colorPalettePumpkinForeground2 },
+  { bg: tokens.colorPaletteMagentaBackground2, fg: tokens.colorPaletteMagentaForeground2 },
+  { bg: tokens.colorPaletteTealBackground2, fg: tokens.colorPaletteTealForeground2 },
+  { bg: tokens.colorPaletteGoldBackground2, fg: tokens.colorPaletteGoldForeground2 },
+  { bg: tokens.colorPalettePlumBackground2, fg: tokens.colorPalettePlumForeground2 },
+  { bg: tokens.colorPaletteLavenderBackground2, fg: tokens.colorPaletteLavenderForeground2 },
+  { bg: tokens.colorPaletteSteelBackground2, fg: tokens.colorPaletteSteelForeground2 }
+];
+const patterns = ["circle", "squares", "triangle", "hexagon", "diamond"];
+const SampleIcon = ({ name }) => {
+  const { colors, pattern, initials } = useMemo(() => {
+    const hash = hashString(name);
+    const colorIndex = hash % iconColors.length;
+    const patternIndex = (hash >> 4) % patterns.length;
+    const words = name.split(/\s+/);
+    const init = words.length >= 2 ? (words[0][0] + words[1][0]).toUpperCase() : name.slice(0, 2).toUpperCase();
+    return {
+      colors: iconColors[colorIndex],
+      pattern: patterns[patternIndex],
+      initials: init
+    };
+  }, [name]);
+  const renderPattern = () => {
+    const size = 48;
+    const half = size / 2;
+    switch (pattern) {
+      case "circle":
+        return /* @__PURE__ */ jsx("circle", { cx: half, cy: half, r: half - 4, fill: colors.fg, opacity: 0.15 });
+      case "squares":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("rect", { x: 4, y: 4, width: 16, height: 16, fill: colors.fg, opacity: 0.1 }),
+          /* @__PURE__ */ jsx("rect", { x: 28, y: 28, width: 16, height: 16, fill: colors.fg, opacity: 0.15 })
+        ] });
+      case "triangle":
+        return /* @__PURE__ */ jsx(
+          "polygon",
+          {
+            points: `${half},8 ${size - 8},${size - 8} 8,${size - 8}`,
+            fill: colors.fg,
+            opacity: 0.12
+          }
+        );
+      case "hexagon":
+        return /* @__PURE__ */ jsx(
+          "polygon",
+          {
+            points: `${half},4 ${size - 6},${half / 2 + 4} ${size - 6},${size - half / 2 - 4} ${half},${size - 4} 6,${size - half / 2 - 4} 6,${half / 2 + 4}`,
+            fill: colors.fg,
+            opacity: 0.12
+          }
+        );
+      case "diamond":
+        return /* @__PURE__ */ jsx(
+          "polygon",
+          {
+            points: `${half},6 ${size - 6},${half} ${half},${size - 6} 6,${half}`,
+            fill: colors.fg,
+            opacity: 0.12
+          }
+        );
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: style$8["sample-icon"], style: { backgroundColor: colors.bg }, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("svg", { width: "48", height: "48", viewBox: "0 0 48 48", className: style$8["sample-icon-pattern"], children: renderPattern() }),
+    /* @__PURE__ */ jsx("span", { className: style$8["sample-icon-initials"], style: { color: colors.fg }, children: initials })
+  ] });
+};
+
+const SampleCard = ({ name, sample, onSelect }) => {
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      className: style$8["sample-card"],
+      onClick: () => onSelect(name),
+      role: "button",
+      tabIndex: 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onSelect(name);
+        }
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: style$8["sample-card-content"], children: [
+        /* @__PURE__ */ jsx(SampleIcon, { name }),
+        /* @__PURE__ */ jsxs("div", { className: style$8["sample-card-text"], children: [
+          /* @__PURE__ */ jsx(Text, { as: "h3", weight: "semibold", className: style$8["sample-title"], children: name }),
+          sample.description && /* @__PURE__ */ jsx(Text, { as: "p", className: style$8["sample-description"], children: sample.description })
+        ] })
+      ] })
+    }
+  );
+};
+
+const SamplesDrawerTrigger = ({
   samples,
-  selectedSampleName,
   onSelectedSampleNameChange
 }) => {
-  const options = Object.keys(samples).map((sample) => {
-    return /* @__PURE__ */ jsx("option", { children: sample }, sample);
-  });
-  const handleSelected = useCallback(
-    (evt) => {
-      if (samples[evt.target.value]) {
-        onSelectedSampleNameChange(evt.target.value);
-      }
+  const [isOpen, setIsOpen] = useState(false);
+  const handleSampleSelect = useCallback(
+    (sampleName) => {
+      onSelectedSampleNameChange(sampleName);
+      setIsOpen(false);
     },
-    [onSelectedSampleNameChange, samples]
-  );
-  return /* @__PURE__ */ jsxs(
-    Select,
-    {
-      className: "sample-dropdown",
-      onChange: handleSelected,
-      value: selectedSampleName ?? "",
-      "aria-label": "Select a sample",
-      children: [
-        /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select sample..." }),
-        options
-      ]
-    }
+    [onSelectedSampleNameChange]
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { content: "Browse samples", relationship: "description", withArrow: true, children: /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        "aria-label": "Browse samples",
+        icon: /* @__PURE__ */ jsx(DocumentBulletList24Regular, {}),
+        onClick: () => setIsOpen(true),
+        children: "Samples"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      OverlayDrawer,
+      {
+        open: isOpen,
+        onOpenChange: (_, data) => setIsOpen(data.open),
+        position: "end",
+        size: "large",
+        children: [
+          /* @__PURE__ */ jsx(DrawerHeader, { children: /* @__PURE__ */ jsx(
+            DrawerHeaderTitle,
+            {
+              action: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  appearance: "subtle",
+                  "aria-label": "Close",
+                  icon: /* @__PURE__ */ jsx(Dismiss24Regular, {}),
+                  onClick: () => setIsOpen(false)
+                }
+              ),
+              children: "Sample Gallery"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(DrawerBody, { children: /* @__PURE__ */ jsx("div", { className: style$8["samples-grid"], children: Object.entries(samples).map(([name, sample]) => /* @__PURE__ */ jsx(SampleCard, { name, sample, onSelect: handleSampleSelect }, name)) }) })
+        ]
+      }
+    )
+  ] });
 };
 
 const form = "_form_sqeas_1";
@@ -1305,10 +1444,9 @@ const EditorCommandBar = ({
     /* @__PURE__ */ jsx(Tooltip, { content: "Format", relationship: "description", withArrow: true, children: /* @__PURE__ */ jsx(ToolbarButton, { "aria-label": "Format", icon: /* @__PURE__ */ jsx(Broom16Filled, {}), onClick: formatCode }) }),
     samples && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        SamplesDropdown,
+        SamplesDrawerTrigger,
         {
           samples,
-          selectedSampleName,
           onSelectedSampleNameChange
         }
       ),

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,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAW,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIxE,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;IACnD,eAAe,EAAE,eAAe,CAAC;IACjC,uBAAuB,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAE5D,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,CA2ErE,CAAC"}
+{"version":3,"file":"editor-command-bar.d.ts","sourceRoot":"","sources":["../../../src/editor-command-bar/editor-command-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAW,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIxE,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;IACnD,eAAe,EAAE,eAAe,CAAC;IACjC,uBAAuB,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAE5D,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,CA0ErE,CAAC"}

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

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

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

@@ -0,0 +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"}

package/dist/src/react/samples-drawer/sample-card.d.ts

@@ -0,0 +1,9 @@
+import { FunctionComponent } from 'react';
+import { PlaygroundSample } from '../../types.js';
+export interface SampleCardProps {
+    name: string;
+    sample: PlaygroundSample;
+    onSelect: (name: string) => void;
+}
+export declare const SampleCard: FunctionComponent<SampleCardProps>;
+//# sourceMappingURL=sample-card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sample-card.d.ts","sourceRoot":"","sources":["../../../../src/react/samples-drawer/sample-card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIvD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,gBAAgB,CAAC;IACzB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CA6BzD,CAAC"}

package/dist/src/react/samples-drawer/sample-icon.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+export interface SampleIconProps {
+    name: string;
+}
+export declare const SampleIcon: FunctionComponent<SampleIconProps>;
+//# sourceMappingURL=sample-icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sample-icon.d.ts","sourceRoot":"","sources":["../../../../src/react/samples-drawer/sample-icon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAW,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAgCxD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAqEzD,CAAC"}

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

@@ -0,0 +1,8 @@
+import { FunctionComponent } from 'react';
+import { PlaygroundSample } from '../../types.js';
+export interface SamplesDrawerProps {
+    samples: Record<string, PlaygroundSample>;
+    onSelectedSampleNameChange: (sampleName: string) => void;
+}
+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

@@ -0,0 +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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tooling/index.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAEzD;;GAEG;AACH,wBAAsB,yBAAyB,CAC7C,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,sBAAsB,CAAC,iBAyBhD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tooling/index.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAEzD;;GAEG;AACH,wBAAsB,yBAAyB,CAC7C,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,sBAAsB,CAAC,iBA0BhD"}

package/dist/src/types.d.ts

@@ -3,6 +3,10 @@ export interface PlaygroundSample {
     filename: string;
     preferredEmitter?: string;
     content: string;
+    /**
+     * A short description of what this sample demonstrates.
+     */
+    description?: string;
     /**
      * Compiler options for the sample.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,YAAY,EACZ,eAAe,EACf,gBAAgB,EAChB,WAAW,EACX,eAAe,EAChB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;CACnC;AAED,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B;AAED,MAAM,WAAW,WAAY,SAAQ,YAAY;IAC/C,QAAQ,EAAE,cAAc,oBAAoB,CAAC,CAAC;IAC9C,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;CACjD"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,YAAY,EACZ,eAAe,EACf,gBAAgB,EAChB,WAAW,EACX,eAAe,EAChB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;CACnC;AAED,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B;AAED,MAAM,WAAW,WAAY,SAAQ,YAAY;IAC/C,QAAQ,EAAE,cAAc,oBAAoB,CAAC,CAAC;IAC9C,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;CACjD"}

package/dist/style.css

@@ -175,6 +175,82 @@
 ._tree-row_16t0l_4 ._column_16t0l_44:last-child {
   margin-right: 5px;
 }
+._samples-grid_1dkte_1 {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+  padding: 8px 0;
+}
+
+._sample-card_1dkte_8 {
+  cursor: pointer;
+  padding: 16px;
+  transition:
+    box-shadow 0.2s ease,
+    border-color 0.2s ease;
+  min-height: 100px;
+}
+
+._sample-card_1dkte_8:hover {
+  box-shadow: var(--shadow8);
+}
+
+._sample-card_1dkte_8:focus-visible {
+  outline: 2px solid var(--colorBrandStroke1);
+  outline-offset: 2px;
+}
+
+._sample-card-content_1dkte_26 {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+}
+
+._sample-card-text_1dkte_32 {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+}
+
+._sample-icon_1dkte_40 {
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+  flex-shrink: 0;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  user-select: none;
+}
+
+._sample-icon-pattern_1dkte_53 {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+._sample-icon-initials_1dkte_59 {
+  position: relative;
+  font-size: 16px;
+  font-weight: 600;
+  z-index: 1;
+}
+
+._sample-title_1dkte_66 {
+  font-size: var(--fontSizeBase400);
+  margin: 0;
+}
+
+._sample-description_1dkte_71 {
+  font-size: var(--fontSizeBase200);
+  color: var(--colorNeutralForeground2);
+  margin: 0;
+  line-height: 1.4;
+}
 ._form_sqeas_1 {
   display: flex;
   flex-direction: column;

package/dist/tooling/index.js

@@ -9,6 +9,7 @@ async function buildSamples_experimental(rootDir, output, samples) {
       filename: config.filename,
       content,
       preferredEmitter: config.preferredEmitter,
+      description: config.description,
       compilerOptions: config.compilerOptions
     };
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typespec/playground",
-  "version": "0.12.0-dev.6",
+  "version": "0.12.0-dev.8",
   "author": "Microsoft Corporation",
   "description": "TypeSpec playground UI components.",
   "homepage": "https://typespec.io",

package/dist/src/react/samples-dropdown.d.ts

@@ -1,9 +0,0 @@
-import { FunctionComponent } from 'react';
-import { PlaygroundSample } from '../types.js';
-export interface SamplesDropdownProps {
-    samples: Record<string, PlaygroundSample>;
-    selectedSampleName: string;
-    onSelectedSampleNameChange: (sampleName: string) => void;
-}
-export declare const SamplesDropdown: FunctionComponent<SamplesDropdownProps>;
-//# sourceMappingURL=samples-dropdown.d.ts.map

package/dist/src/react/samples-dropdown.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"samples-dropdown.d.ts","sourceRoot":"","sources":["../../../src/react/samples-dropdown.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAC1C,kBAAkB,EAAE,MAAM,CAAC;IAC3B,0BAA0B,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1D;AAED,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CA8BnE,CAAC"}