UX second pass: icon-only header, pane-toggle cue, schema columns, facet cleanup

src/app/App.tsx

@@ -6,6 +6,7 @@ import { ModalShell } from './components/ModalShell';
 import { Onboarding } from './components/Onboarding';
 import { PaneSplitHandle } from './components/PaneSplitHandle';
 import { Icon } from './components/Icon';
+import { IconButton } from './components/IconButton';
 import { PaneToggleStrip } from './components/PaneToggleStrip';
 import { ResizeHandle } from './components/ResizeHandle';
 import { SnippetLibrary } from './components/SnippetLibrary';
@@ -77,46 +78,41 @@ export function App() {
         <span className={styles.version}>v{__APP_VERSION__}</span>
         <span className={styles.spacer} />
         {/* Header actions establish a hierarchy (Carbon button/usage → one
-            high-emphasis action per region; utilities in dashboards/toolbars read
-            better at low emphasis). The utilities are ghost (borderless) buttons
-            with a leading icon for scanning; a divider then sets off Donate — the
-            one solicitation, given a soft-accent wash — and the theme toggle. */}
-        <Button
-          variant="ghost"
+            high-emphasis action per region; Carbon UI-shell header → global
+            actions are a right-aligned row of icon-only buttons). The utilities
+            are IconButtons — tooltips carry the full action, accessible names
+            scope it ("Export workspace" vs the preview pane's per-chart
+            "Export") — then a divider sets off Donate — the one solicitation,
+            given a soft-accent wash — and the theme toggle. */}
+        <IconButton
+          label="Datasets"
           onClick={() => openModal('datasets')}
           aria-keyshortcuts="Meta+K Control+K"
           title="Datasets (⌘/Ctrl+K)"
         >
           <Icon name="dataset" />
-          Datasets
-        </Button>
-        <Button
-          variant="ghost"
+        </IconButton>
+        <IconButton
+          label="Import workspace"
           onClick={() => fileInputRef.current?.click()}
           title="Import a workspace JSON file"
         >
           <Icon name="import" />
-          Import
-        </Button>
-        {/* TODO: two controls labelled "Export" are visible at once (this
-            workspace export + the preview pane's per-chart export) — rename or
-            differentiate (docs/ux-second-pass.md). */}
-        <Button
-          variant="ghost"
+        </IconButton>
+        <IconButton
+          label="Export workspace"
           onClick={() => exportWorkspace()}
           title="Export your workspace to a JSON file"
         >
           <Icon name="export" />
-          Export
-        </Button>
-        <Button
-          variant="ghost"
+        </IconButton>
+        <IconButton
+          label="About"
           onClick={() => openModal('about')}
           title="About, keyboard shortcuts, and privacy information"
         >
           <Icon name="info" />
-          About
-        </Button>
+        </IconButton>
         <span className={styles.headerDivider} aria-hidden="true" />
         <Button variant="soft-accent" onClick={() => openModal('donate')} title="Support Astrolabe">
           Donate