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

src/app/components/Onboarding.module.css

@@ -28,6 +28,13 @@
   line-height: 1.5;
 }
 
+/* The two ways in, side by side: sample-first (primary) and data-first (ghost). */
+.ctaRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+}
+
 /* Primary call to action — the accent button, matching the library's Create. */
 .primary {
   display: inline-flex;
@@ -52,6 +59,30 @@
   outline-offset: 2px;
 }
 
+/* The data-first door — bordered ghost, same height as the primary beside it. */
+.buildCta {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  height: 40px;
+  padding: 0 var(--space-5);
+  border: var(--border-width) solid var(--border-strong);
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background var(--dur-fast) var(--ease);
+}
+.buildCta:hover {
+  background: var(--layer-01);
+}
+.buildCta:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+
 /* The "or start from an example" header row, with Add all pushed to the end. */
 .galleryHead {
   display: flex;