Chart builder: discoverable entry points — Build Chart door, dataset picker, no-datasets state

src/app/components/Onboarding.tsx

@@ -19,6 +19,7 @@ import type { VisualizationSpec } from 'vega-embed';
 import { CHART_EXAMPLES, exampleSpecText, type ChartExample } from '@core/examples';
 import { createSnippet as createSnippetRecord } from '@core/snippet';
 import { chartConfigFor } from '@core/vega-themes';
+import { openModal } from '../modals/ModalCoordinator';
 import { renderSpec, type RenderHandle } from '../services/chart-renderer';
 import { useAppStore } from '../stores/AppStore';
 import { usePanesStore } from '../stores/PanesStore';
@@ -105,6 +106,15 @@ export function Onboarding() {
     layoutWorkspace();
   };
 
+  // The data-first door (spec §02): straight into the Chart Builder, which picks
+  // up the freshest dataset — or, with none yet, explains itself and offers "Add a
+  // dataset". The workspace split is applied up front: if the builder creates the
+  // first snippet, onboarding unmounts without another chance to lay the panes out.
+  const handleBuild = () => {
+    layoutWorkspace();
+    openModal('chartBuilder');
+  };
+
   const handleAddAll = () => {
     // Stagger the timestamps so the first example (the bar chart) is the newest:
     // it then sorts to the top of the library and `addSnippets` makes it active
@@ -130,9 +140,14 @@ export function Onboarding() {
           your device.
         </p>
 
-        <button type="button" className={styles.primary} onClick={handleCreate}>
-          <Icon name="add" /> Create your first snippet
-        </button>
+        <div className={styles.ctaRow}>
+          <button type="button" className={styles.primary} onClick={handleCreate}>
+            <Icon name="add" /> Create your first snippet
+          </button>
+          <button type="button" className={styles.buildCta} onClick={handleBuild}>
+            <Icon name="chart" /> Build a chart from your data
+          </button>
+        </div>
 
         <div className={styles.galleryHead}>
           <h3 className={styles.galleryTitle}>Or start from an example</h3>