feat: add CodeGroupSelect component

[lawreka]

Summary

CodeGroupSelect is used for code snippets and examples, it's just different enough from the regular CodeGroup (two dropdowns! optional audio examples!) that it deserves its own component and stories (and migrating the old one was gonna be a pain)

Test Plan

• check new stories
• check new component

---

Note

Low Risk
New, additive UI component and Storybook stories with no changes to existing core logic; main risk is minor UX/state edge cases in selection syncing.

Overview
Adds a new CodeGroupSelect component that renders two dropdowns (group + example) with a themed code block, copy-to-clipboard support, optional askAiButton, and an alternate audio player rendering when a snippet includes audioUrl.

Exports the new component/types from components/code-group/index.ts and adds comprehensive Storybook stories covering themes, single-group/option behavior, custom className, and audio examples.

^{Written by Cursor Bugbot for commit 8faaf4d. This will update automatically on new commits. Configure here.}

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: No safe fallback for stale selectedGroup state
  • Added a safe selected-group fallback and used it for snippet lookup and group dropdown rendering so stale group state no longer breaks the UI when snippets change.

Or push these changes by commenting:

@cursor push 93156cb57e

Preview (93156cb57e)

diff --git a/packages/components/src/components/code-group/code-group-select.tsx b/packages/components/src/components/code-group/code-group-select.tsx
--- a/packages/components/src/components/code-group/code-group-select.tsx
+++ b/packages/components/src/components/code-group/code-group-select.tsx
@@ -44,9 +44,11 @@
 }: CodeGroupSelectProps) => {
   const groups = Object.keys(snippets);
   const [selectedGroup, setSelectedGroup] = useState(groups[0]);
+  const safeSelectedGroup =
+    selectedGroup && groups.includes(selectedGroup) ? selectedGroup : groups[0];
 
   const groupSnippets =
-    selectedGroup !== undefined ? snippets[selectedGroup] : undefined;
+    safeSelectedGroup !== undefined ? snippets[safeSelectedGroup] : undefined;
   const options = useMemo(
     () => (groupSnippets ? Object.keys(groupSnippets) : undefined),
     [groupSnippets]
@@ -113,7 +115,7 @@
         <CodeSelectDropdown
           codeBlockTheme={codeBlockTheme}
           options={groups}
-          selectedOption={selectedGroup}
+          selectedOption={safeSelectedGroup}
           setSelectedOption={handleGroupSelect}
         />
         <div className="flex overflow-hidden">

_{This Bugbot Autofix run was free. To enable autofix for future PRs, go to the Cursor dashboard.}