feat(renderer): setup React, Vite, Tailwind CSS and Zustand state management

src/renderer/App.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { AppHeader } from './components/layout/AppHeader';
+import { TabBar } from './components/layout/TabBar';
+import { Toolbar } from './components/layout/Toolbar';
+import { Breadcrumb } from './components/layout/Breadcrumb';
+import { Sidebar } from './components/sidebar/Sidebar';
+import { EditorPane } from './components/editor/EditorPane';
+import { PreviewPane } from './components/preview/PreviewPane';
+import { StatusBar } from './components/layout/StatusBar';
+import { CommandPalette } from './components/modals/CommandPalette';
+import { ExportDialog } from './components/modals/ExportDialog';
+import { SettingsDialog } from './components/modals/SettingsDialog';
+import { useAppStore } from './stores/appStore';
+
+function App() {
+  const { sidebarVisible, previewVisible, activeTabId } = useAppStore();
+
+  return (
+    <div className="flex flex-col h-screen bg-background text-foreground overflow-hidden">
+      <AppHeader />
+      <TabBar />
+      <Toolbar />
+      <Breadcrumb />
+
+      <main className="flex flex-1 overflow-hidden">
+        {sidebarVisible && <Sidebar />}
+
+        <div className="flex flex-1 overflow-hidden">
+          <EditorPane className={previewVisible ? 'flex-1' : 'flex-1'} />
+          {previewVisible && (
+            <>
+              <div className="w-px bg-border cursor-col-resize hover:bg-brand transition-colors" />
+              <PreviewPane className="flex-1" />
+            </>
+          )}
+        </div>
+      </main>
+
+      <StatusBar />
+      <CommandPalette />
+      <ExportDialog />
+      <SettingsDialog />
+    </div>
+  );
+}
+
+export default App;