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

src/app/components/PaneToggleStrip.tsx

@@ -23,6 +23,7 @@ import { useRef, useState } from 'react';
 import { openModal } from '../modals/ModalCoordinator';
 import { usePanesStore, type PaneName } from '../stores/PanesStore';
 import { Icon, type IconName } from './Icon';
+import { IconButton } from './IconButton';
 import styles from './PaneToggleStrip.module.css';
 
 interface PaneItem {
@@ -105,14 +106,13 @@ export function PaneToggleStrip() {
       className={styles.strip}
     >
       {PANES.map((item, i) => (
-        <button
+        <IconButton
           key={item.pane}
           ref={(el) => {
             refs.current[i] = el;
           }}
-          type="button"
           aria-pressed={visible[item.pane]}
-          aria-label={item.label}
+          label={item.label}
           // Only point at the pane while it's actually mounted: App unmounts a
           // hidden pane's <section>, so emitting aria-controls then would leave a
           // dangling IDREF (invalid, even if AT ignores it). The association is
@@ -124,9 +124,7 @@ export function PaneToggleStrip() {
           // stable (aria-label) per APG's toggle-button rule.
           title={`${visible[item.pane] ? 'Hide' : 'Show'} ${item.label.toLowerCase()}`}
           tabIndex={focusIndex === i ? 0 : -1}
-          className={[styles.button, visible[item.pane] && styles.pressed]
-            .filter(Boolean)
-            .join(' ')}
+          className={visible[item.pane] ? styles.pressed : undefined}
           onClick={() => {
             togglePane(item.pane, panesInner());
             setFocusIndex(i);
@@ -134,21 +132,19 @@ export function PaneToggleStrip() {
           onKeyDown={(e) => onKeyDown(e, i)}
         >
           <Icon name={item.icon} />
-        </button>
+        </IconButton>
       ))}
 
       <div className={styles.divider} aria-hidden="true" />
 
-      <button
+      <IconButton
         ref={(el) => {
           refs.current[datasetsIndex] = el;
         }}
-        type="button"
-        aria-label="Datasets"
+        label="Datasets"
         aria-keyshortcuts="Meta+K Control+K"
         title="Datasets (⌘/Ctrl+K)"
         tabIndex={focusIndex === datasetsIndex ? 0 : -1}
-        className={styles.button}
         onClick={() => {
           openModal('datasets');
           setFocusIndex(datasetsIndex);
@@ -156,7 +152,7 @@ export function PaneToggleStrip() {
         onKeyDown={(e) => onKeyDown(e, datasetsIndex)}
       >
         <Icon name="dataset" />
-      </button>
+      </IconButton>
     </div>
   );
 }