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
Primarily additive UI work with isolated refactoring of CodeSelectDropdown that is only used by the new component, so blast radius is small.

Overview
Introduces a new CodeGroupSelect component that renders two-level snippet selection (group + example) via dropdowns, shows either a highlighted BaseCodeBlock or an HTML5 <audio> player per snippet, and supports optional copy, Ask AI, and external selection syncing via syncedLabel/callbacks.

Adds a comprehensive Storybook file demonstrating themes, single-group/option states, audio snippets, and custom styling, and exports the new component/types from code-group/index.ts. Also simplifies CodeSelectDropdown by removing the codeBlockTheme prop and using fixed light/dark Tailwind classes (now only consumed by CodeGroupSelect).

^{Written by Cursor Bugbot for commit ba79956. 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.}