feat: header ui

Author: iamgp

editor/src/App.tsx

@@ -999,8 +999,10 @@ export default function App() {
             {theme === 'dark' ? '☀️' : '🌙'}
           </button>
           <div className="h-4 w-px bg-border" />
-          <ImportButton onImport={handleImport} />
-          <ExportButton schema={schema.schema} />
+          <div className="inline-flex rounded-lg border border-border overflow-hidden">
+            <ImportButton onImport={handleImport} />
+            <ExportButton schema={schema.schema} />
+          </div>
         </div>
       </header>
 

editor/src/components/ExportButton.tsx

@@ -18,17 +18,17 @@ export function ExportButton({ schema, disabled }: ExportButtonProps) {
     <button
       onClick={handleExport}
       disabled={disabled || !hasFields}
-      className="flex items-center gap-2 h-7 px-4 bg-emerald-600 hover:bg-emerald-700 disabled:bg-border disabled:text-text-muted disabled:cursor-not-allowed text-white rounded-lg text-xs font-medium transition-colors"
+      className="flex items-center gap-1.5 h-7 px-3 bg-emerald-600 hover:bg-emerald-700 disabled:bg-border disabled:text-text-muted disabled:cursor-not-allowed text-white text-xs font-medium transition-colors"
       title={hasFields ? 'Export .stencil.yaml' : 'Define at least one field to export'}
     >
-      <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+      <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
         <path
           strokeLinecap="round"
           strokeLinejoin="round"
           d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
         />
       </svg>
-      Export YAML
+      Export
     </button>
   );
 }

editor/src/components/ImportButton.tsx

@@ -46,10 +46,10 @@ export function ImportButton({ onImport }: ImportButtonProps) {
       />
       <button
         onClick={handleClick}
-        className="flex items-center gap-1.5 h-7 px-3 rounded-lg text-xs font-medium bg-elevated text-text-secondary border border-border-strong hover:border-border-strong transition-colors"
+        className="flex items-center gap-1.5 h-7 px-3 text-xs font-medium bg-elevated text-text-secondary border-r border-border hover:bg-surface transition-colors"
         title="Import .stencil.yaml"
       >
-        <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
           <path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
         </svg>
         Import