fix(storybook): CodeTabs CSS fix + dynamische React tab via SourceType.DYNAMIC

- Voeg CodeTabs.css toe die margin/border-radius/box-shadow van .docblock-source
  reset zodat het codeblok naadloos aansluit op de tab bar
- Vervang statische React-tab door Source type=DYNAMIC: pikt automatisch de
  huidige story op via de Meta-context en update live mee met Controls-wijzigingen
- react prop is nu optioneel (backwards compat) en wordt niet meer gebruikt

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: Jeffrey Lauwers

packages/storybook/src/components/CodeTabs.css

@@ -0,0 +1,12 @@
+/**
+ * CodeTabs — override Storybook's Source block default styles.
+ *
+ * Storybook's .docblock-source element has margin (25px 0 40px) and border-radius (4px)
+ * that create visual gaps and rounding inside our wrapper. We remove these so the code
+ * block connects seamlessly with the tab bar above and the wrapper border below.
+ */
+.dsn-code-tabs .docblock-source {
+  margin: 0;
+  border-radius: 0;
+  box-shadow: none;
+}

packages/storybook/src/components/CodeTabs.tsx

@@ -1,9 +1,13 @@
 import React, { useState } from 'react';
-import { Source } from '@storybook/blocks';
+import { Source, SourceType } from '@storybook/blocks';
+import './CodeTabs.css';
 
 interface CodeTabsProps {
-  /** JSX/TSX code snippet for the React tab */
-  react: string;
+  /**
+   * @deprecated — React tab now uses SourceType.DYNAMIC to show live story code
+   * that updates with Controls. This prop is kept for backward compatibility but ignored.
+   */
+  react?: string;
   /** HTML/CSS markup snippet for the HTML/CSS tab */
   html: string;
 }
@@ -16,9 +20,11 @@ type Tab = 'react' | 'html';
  * - HTML/CSS tab: shows the equivalent vanilla HTML markup
  *
  * Syntax highlighting via Storybook's built-in Source block from @storybook/blocks.
+ * The React tab uses SourceType.DYNAMIC so it automatically shows the current story's
+ * rendered code and updates live when Controls change.
  * The tab bar uses design token CSS variables so it responds to dark mode.
  */
-export function CodeTabs({ react, html }: CodeTabsProps) {
+export function CodeTabs({ html }: CodeTabsProps) {
   const [activeTab, setActiveTab] = useState<Tab>('react');
 
   const tabBarStyle: React.CSSProperties = {
@@ -54,7 +60,7 @@ export function CodeTabs({ react, html }: CodeTabsProps) {
   };
 
   return (
-    <div>
+    <div className="dsn-code-tabs">
       <div style={tabBarStyle}>
         <button
           type="button"
@@ -75,7 +81,7 @@ export function CodeTabs({ react, html }: CodeTabsProps) {
       </div>
       <div style={codeWrapperStyle}>
         {activeTab === 'react' ? (
-          <Source code={react} language="tsx" dark />
+          <Source type={SourceType.DYNAMIC} dark />
         ) : (
           <Source code={html} language="html" dark />
         )}