Control scale: Button/IconButton primitives, two-height tokens, app-wide migration

src/app/components/SpecEditor.tsx

@@ -40,6 +40,7 @@ import { usePreviewStore } from '../stores/PreviewStore';
 import { selectActiveSnippet, selectShownText, useSnippetStore } from '../stores/SnippetStore';
 import { useUserSettingsStore } from '../stores/UserSettingsStore';
 import { Icon } from './Icon';
+import { Button } from './Button';
 import { SegmentedControl, type SegmentedOption } from './SegmentedControl';
 import { SelectControl } from './SelectControl';
 import {
@@ -239,16 +240,15 @@ function EditorToolbar({
           `title` (and the accessible name) when only the icon shows. Publish — the
           one primary action — keeps its label at every width. */}
       {canExtract && (
-        <button
-          type="button"
-          className={`${styles.action} ${styles.collapsible}`}
+        <Button
+          className={styles.collapsible}
           onClick={() => openModal('extract')}
           title="Extract inline data into a reusable dataset"
           aria-label="Extract to Dataset"
         >
           <Icon name="dataset" className={styles.actionIcon} />
           <span className={styles.actionLabel}>Extract to Dataset</span>
-        </button>
+        </Button>
       )}
       <SelectControl
         id="editor-config-actions"
@@ -256,14 +256,12 @@ function EditorToolbar({
         heading="Spec config"
         options={CONFIG_ACTIONS}
         onSelect={handleConfigAction}
-        triggerClassName={styles.action}
         triggerContent="Config"
         triggerTitle="Spec config actions — merge the chart theme in, or extract the config out"
         disabled={activeId === null || editorView === 'published'}
       />
-      <button
-        type="button"
-        className={`${styles.action} ${styles.collapsible}`}
+      <Button
+        className={styles.collapsible}
         onClick={() => void handleRevert()}
         disabled={activeId === null || !dirty}
         title="Revert draft to the last published version"
@@ -271,17 +269,16 @@ function EditorToolbar({
       >
         <Icon name="revert" className={styles.actionIcon} />
         <span className={styles.actionLabel}>Revert</span>
-      </button>
-      <button
-        type="button"
-        className={`${styles.action} ${styles.publish}`}
+      </Button>
+      <Button
+        variant="primary"
         onClick={handlePublish}
         disabled={activeId === null}
         title="Publish (⌘/Ctrl+S)"
         aria-keyshortcuts="Meta+S Control+S"
       >
         Publish
-      </button>
+      </Button>
       <EditorSettings />
     </div>
   );