Add dataset library, extract-to-dataset, and render-time reference resolution

src/app/components/SpecEditor.tsx

@@ -23,8 +23,10 @@ import * as monaco from 'monaco-editor/esm/vs/editor/edcore.main';
 import 'monaco-editor/esm/vs/language/json/monaco.contribution';
 import '../infrastructure/monaco-env'; // side-effect: wire workers before create
 import { configureVegaLiteJson } from '../infrastructure/monaco-schema';
+import { openModal } from '../modals/ModalCoordinator';
 import { useAppStore } from '../stores/AppStore';
 import { confirm } from '../stores/ConfirmStore';
+import { hasInlineData } from '../stores/ExtractStore';
 import { usePreviewStore } from '../stores/PreviewStore';
 import { selectActiveSnippet, selectShownText, useSnippetStore } from '../stores/SnippetStore';
 import { SegmentedControl, type SegmentedOption } from './SegmentedControl';
@@ -53,6 +55,11 @@ function EditorToolbar() {
     const draft = s.editorView === 'draft' ? s.draftText : active.draftSpec;
     return draft !== active.spec;
   });
+  // Offer Extract only when the live draft carries top-level inline data to lift
+  // out (spec §03F → hidden when the spec has no inline data).
+  const canExtract = useSnippetStore(
+    (s) => s.activeSnippetId !== null && hasInlineData(s.draftText),
+  );
 
   const handlePublish = () => {
     if (!useSnippetStore.getState().activeSnippetId) return;
@@ -85,6 +92,16 @@ function EditorToolbar() {
 
       <span className={styles.spacer} />
 
+      {canExtract && (
+        <button
+          type="button"
+          className={styles.action}
+          onClick={() => openModal('extract')}
+          title="Extract inline data into a reusable dataset"
+        >
+          Extract to Dataset
+        </button>
+      )}
       <button
         type="button"
         className={styles.action}